hummingbirdbyvictoria Posted November 6, 2019 Share Posted November 6, 2019 Is there a way I can add a falling snow effect to my website www.hummingbirdbyvictoria.com? Hope someone can help :-) Link to comment
JeanLouis Posted December 3, 2021 Share Posted December 3, 2021 Hellooooo Dear, Yes feel free to try this code (Setting - advanced - code injection - header): <style> /* customizable snowflake styling */ .snowflake { color: #fff; font-size: 1em; font-family: Arial, sans-serif; text-shadow: 0 0 5px #000; } @-webkit-keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@-webkit-keyframes snowflakes-shake{0%,100%{-webkit-transform:translateX(0);transform:translateX(0)}50%{-webkit-transform:translateX(80px);transform:translateX(80px)}}@keyframes snowflakes-fall{0%{top:-10%}100%{top:100%}}@keyframes snowflakes-shake{0%,100%{transform:translateX(0)}50%{transform:translateX(80px)}}.snowflake{position:fixed;top:-10%;z-index:9999;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;cursor:default;-webkit-animation-name:snowflakes-fall,snowflakes-shake;-webkit-animation-duration:10s,3s;-webkit-animation-timing-function:linear,ease-in-out;-webkit-animation-iteration-count:infinite,infinite;-webkit-animation-play-state:running,running;animation-name:snowflakes-fall,snowflakes-shake;animation-duration:10s,3s;animation-timing-function:linear,ease-in-out;animation-iteration-count:infinite,infinite;animation-play-state:running,running}.snowflake:nth-of-type(0){left:1%;-webkit-animation-delay:0s,0s;animation-delay:0s,0s}.snowflake:nth-of-type(1){left:10%;-webkit-animation-delay:1s,1s;animation-delay:1s,1s}.snowflake:nth-of-type(2){left:20%;-webkit-animation-delay:6s,.5s;animation-delay:6s,.5s}.snowflake:nth-of-type(3){left:30%;-webkit-animation-delay:4s,2s;animation-delay:4s,2s}.snowflake:nth-of-type(4){left:40%;-webkit-animation-delay:2s,2s;animation-delay:2s,2s}.snowflake:nth-of-type(5){left:50%;-webkit-animation-delay:8s,3s;animation-delay:8s,3s}.snowflake:nth-of-type(6){left:60%;-webkit-animation-delay:6s,2s;animation-delay:6s,2s}.snowflake:nth-of-type(7){left:70%;-webkit-animation-delay:2.5s,1s;animation-delay:2.5s,1s}.snowflake:nth-of-type(8){left:80%;-webkit-animation-delay:1s,0s;animation-delay:1s,0s}.snowflake:nth-of-type(9){left:90%;-webkit-animation-delay:3s,1.5s;animation-delay:3s,1.5s}.snowflake:nth-of-type(10){left:25%;-webkit-animation-delay:2s,0s;animation-delay:2s,0s}.snowflake:nth-of-type(11){left:65%;-webkit-animation-delay:4s,2.5s;animation-delay:4s,2.5s} </style> <div class="snowflakes" aria-hidden="true"> <div class="snowflake"> ❅ </div> <div class="snowflake"> ❆ </div> <div class="snowflake"> ❅ </div> <div class="snowflake"> ❆ </div> <div class="snowflake"> ❅ </div> <div class="snowflake"> ❆ </div> <div class="snowflake"> ❅ </div> <div class="snowflake"> ❆ </div> <div class="snowflake"> ❅ </div> <div class="snowflake"> ❆ </div> <div class="snowflake"> ❅ </div> <div class="snowflake"> ❆ </div> </div> Link to comment
IsabelBarrigaBrown Posted November 22, 2023 Share Posted November 22, 2023 Hi, does this code still work? Doesn't appear to be working on my website? thanks Link to comment
tuanphan Posted November 24, 2023 Share Posted November 24, 2023 On 11/22/2023 at 7:13 PM, IsabelBarrigaBrown said: Hi, does this code still work? Doesn't appear to be working on my website? thanks I have 2 examples (I Helped a member on forum), if you like anyone, you can let me know, I will give code https://tuanphan3.squarespace.com/snow https://tuanphan3.squarespace.com/failing-leaves pass: abc Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
SLDC Posted December 6, 2023 Share Posted December 6, 2023 On 11/24/2023 at 9:25 AM, tuanphan said: I have 2 examples (I Helped a member on forum), if you like anyone, you can let me know, I will give code https://tuanphan3.squarespace.com/snow https://tuanphan3.squarespace.com/failing-leaves pass: abc Would love the snow flakes code for a 7.1 website, is that possible? Link to comment
tuanphan Posted December 7, 2023 Share Posted December 7, 2023 23 hours ago, SLDC said: Would love the snow flakes code for a 7.1 website, is that possible? Add this code to Page Header Code Injection (page you want the effect appears) <style> section, .section-border, .section-background { background-color: transparent !important; } html { background: #000; min-height: 100vh; } html::after { z-index: 9999; content: ""; position: fixed; inset: 0; pointer-events: none; user-select: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640px 480px' width='640px' height='480px'> %3Cstyle> circle { r: 3px; } %3C/style> %3Cg fill='%239098a0'> %3Ccircle cx='591px' cy='99px' /> %3Ccircle cx='591px' cy='363px' /> %3Ccircle cx='543px' cy='123px' /> %3Ccircle cx='525px' cy='15px' /> %3Ccircle cx='519px' cy='195px' /> %3Ccircle cx='501px' cy='183px' /> %3Ccircle cx='465px' cy='231px' /> %3Ccircle cx='465px' cy='375px' /> %3Ccircle cx='453px' cy='159px' /> %3Ccircle cx='447px' cy='435px' /> %3Ccircle cx='435px' cy='3px' /> %3Ccircle cx='399px' cy='123px' /> %3Ccircle cx='387px' cy='171px' /> %3Ccircle cx='381px' cy='207px' /> %3Ccircle cx='63px' cy='111px' /> %3Ccircle cx='357px' cy='471px' /> %3Ccircle cx='345px' cy='279px' /> %3Ccircle cx='345px' cy='63px' /> %3Ccircle cx='333px' cy='111px' /> %3Ccircle cx='321px' cy='183px' /> %3Ccircle cx='219px' cy='243px' /> %3Ccircle cx='213px' cy='375px' /> %3Ccircle cx='207px' cy='171px' /> %3Ccircle cx='189px' cy='111px' /> %3Ccircle cx='189px' cy='351px' /> %3Ccircle cx='177px' cy='423px' /> %3Ccircle cx='177px' cy='327px' /> %3Ccircle cx='141px' cy='171px' /> %3Ccircle cx='111px' cy='339px' /> %3Ccircle cx='93px' cy='255px' /> %3Ccircle cx='81px' cy='39px' /> %3Ccircle cx='57px' cy='447px' /> %3Ccircle cx='57px' cy='351px' /> %3Ccircle cx='75px' cy='411px' /> %3Ccircle cx='33px' cy='225px' /> %3Ccircle cx='33px' cy='279px' /> %3Ccircle cx='165px' cy='15px' /> %3Ccircle cx='27px' cy='387px' /> %3Ccircle cx='21px' cy='39px' /> %3C/g>%3C/svg>"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640px 480px' width='640px' height='480px'> %3Cstyle> circle { r: 3px; } %3C/style> %3Cg fill='%236e757c'> %3Ccircle cx='591px' cy='99px' /> %3Ccircle cx='591px' cy='363px' /> %3Ccircle cx='543px' cy='123px' /> %3Ccircle cx='525px' cy='15px' /> %3Ccircle cx='519px' cy='195px' /> %3Ccircle cx='501px' cy='183px' /> %3Ccircle cx='465px' cy='231px' /> %3Ccircle cx='465px' cy='375px' /> %3Ccircle cx='453px' cy='159px' /> %3Ccircle cx='447px' cy='435px' /> %3Ccircle cx='435px' cy='3px' /> %3Ccircle cx='399px' cy='123px' /> %3Ccircle cx='387px' cy='171px' /> %3Ccircle cx='381px' cy='207px' /> %3Ccircle cx='63px' cy='111px' /> %3Ccircle cx='357px' cy='471px' /> %3Ccircle cx='345px' cy='279px' /> %3Ccircle cx='345px' cy='63px' /> %3Ccircle cx='333px' cy='111px' /> %3Ccircle cx='321px' cy='183px' /> %3Ccircle cx='219px' cy='243px' /> %3Ccircle cx='213px' cy='375px' /> %3Ccircle cx='207px' cy='171px' /> %3Ccircle cx='189px' cy='111px' /> %3Ccircle cx='189px' cy='351px' /> %3Ccircle cx='177px' cy='423px' /> %3Ccircle cx='177px' cy='327px' /> %3Ccircle cx='141px' cy='171px' /> %3Ccircle cx='111px' cy='339px' /> %3Ccircle cx='93px' cy='255px' /> %3Ccircle cx='81px' cy='39px' /> %3Ccircle cx='57px' cy='447px' /> %3Ccircle cx='57px' cy='351px' /> %3Ccircle cx='75px' cy='411px' /> %3Ccircle cx='33px' cy='225px' /> %3Ccircle cx='33px' cy='279px' /> %3Ccircle cx='165px' cy='15px' /> %3Ccircle cx='27px' cy='387px' /> %3Ccircle cx='21px' cy='39px' /> %3C/g>%3C/svg>"), url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640px 480px' width='640px' height='480px'> %3Cstyle> circle { r: 3px; } %3C/style> %3Cg fill='%233e434a'> %3Ccircle cx='591px' cy='99px' /> %3Ccircle cx='591px' cy='363px' /> %3Ccircle cx='543px' cy='123px' /> %3Ccircle cx='525px' cy='15px' /> %3Ccircle cx='519px' cy='195px' /> %3Ccircle cx='501px' cy='183px' /> %3Ccircle cx='465px' cy='231px' /> %3Ccircle cx='465px' cy='375px' /> %3Ccircle cx='453px' cy='159px' /> %3Ccircle cx='447px' cy='435px' /> %3Ccircle cx='435px' cy='3px' /> %3Ccircle cx='399px' cy='123px' /> %3Ccircle cx='387px' cy='171px' /> %3Ccircle cx='381px' cy='207px' /> %3Ccircle cx='63px' cy='111px' /> %3Ccircle cx='357px' cy='471px' /> %3Ccircle cx='345px' cy='279px' /> %3Ccircle cx='345px' cy='63px' /> %3Ccircle cx='333px' cy='111px' /> %3Ccircle cx='321px' cy='183px' /> %3Ccircle cx='219px' cy='243px' /> %3Ccircle cx='213px' cy='375px' /> %3Ccircle cx='207px' cy='171px' /> %3Ccircle cx='189px' cy='111px' /> %3Ccircle cx='189px' cy='351px' /> %3Ccircle cx='177px' cy='423px' /> %3Ccircle cx='177px' cy='327px' /> %3Ccircle cx='141px' cy='171px' /> %3Ccircle cx='111px' cy='339px' /> %3Ccircle cx='93px' cy='255px' /> %3Ccircle cx='81px' cy='39px' /> %3Ccircle cx='57px' cy='447px' /> %3Ccircle cx='57px' cy='351px' /> %3Ccircle cx='75px' cy='411px' /> %3Ccircle cx='33px' cy='225px' /> %3Ccircle cx='33px' cy='279px' /> %3Ccircle cx='165px' cy='15px' /> %3Ccircle cx='27px' cy='387px' /> %3Ccircle cx='21px' cy='39px' /> %3C/g>%3C/svg>"); background-size: 640px 480px, 480px 360px, 256px 192px; --snowfall-pos-x: 0; --snowfall-pos-y: 0; background-repeat: repeat; background-position: 0 0; } /* no-op condition for scoping */ html::after { animation: snowfall-no-composition 96s linear infinite; } @keyframes snowfall-no-composition { 0% { background-position: 0 0, 0 0, 0 0; } 3.125% { background-position: -60px 480px, -45px 360px, -24px 192px; } 33.3333333333% { background-position: -640px 5120px, -480px 3840px, -256px 2048px; } 100% { background-position: -1920px 15360px, -1440px 11520px, -768px 6144px; } } @supports (animation-composition: replace, add, add) { /**/ html::after { animation: snowfall-x 32s linear infinite, snowfall-y 3s linear infinite, snowfall-x-wobble-1 8s cubic-bezier(0.35, 0, 0.65, 0.99) infinite, snowfall-x-wobble-2 8s cubic-bezier(0.35, 0, 0.65, 0.99) infinite; animation-composition: replace, add, add, add; animation-delay: 0s, 0s, 0s, 0.23s; } } @keyframes snowfall-y { from { background-position: 0 0, 0 0, 0 0; } to { background-position: 0 480px, 0 360px, 0 192px; } } @keyframes snowfall-x { from { background-position: 0 0, 0 0, 0 0; } to { background-position: -640px 0, -480px 0, -256px 0; } } @keyframes snowfall-x-wobble-1 { 0% { background-position: 16px 0; } 50% { background-position: -16px 0; } 100% { background-position: 16px 0; } } @keyframes snowfall-x-wobble-2 { 0% { background-position: 0 0, 12px 0; } 50% { background-position: 0 0, -12px 0; } 100% { background-position: 0 0, 12px 0; } } @keyframes snowfall-x-wobble { 0% { background-position: 16px 0, 12px 0, 6.4px 0; } 50% { background-position: -16px 0, -12px 0, -6.4px 0; } 100% { background-position: 16px 0, 12px 0, 6.4px 0; } } </style> Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message Contact Customer Care - Learn CSS - Buy me a coffee (thank you!) Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment