hummingbirdbyvictoria Posted November 6, 2019 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 :-)
JeanLouis Posted December 3, 2021 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>
IsabelBarrigaBrown Posted November 22, 2023 Posted November 22, 2023 Hi, does this code still work? Doesn't appear to be working on my website? thanks
tuanphan Posted November 24, 2023 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!)
SLDC Posted December 6, 2023 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?
tuanphan Posted December 7, 2023 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!)
derricksrandomviews Posted December 13, 2023 Posted December 13, 2023 If you would like a bit of holiday snow on your site use the following code in code header injection under website tools. It will snow gently on every page as seen here: my random views <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> Ziggy 1
paul2009 Posted December 13, 2023 Posted December 13, 2023 To ensure the site remains accessible, don’t forget to include a way for visitors to disable the moving elements 🙂. A button that hides the elements with the snowflake class should work. derricksrandomviews 1 Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
derricksrandomviews Posted December 15, 2023 Posted December 15, 2023 I moved the CSS to the home page header code injection and used a markdown block on one summary bloc page ( https://myrandomviews.com/blogsummary/iawl ) from site-wide code injection. I decided the snowflakes were a bit distracting when reading a blog post. The markdown block in a blog post also changes any page that has a summary item with content from that post as well as seen here: https://myrandomviews.com/blogsummary
paul2009 Posted December 15, 2023 Posted December 15, 2023 If it helps, here's some additional code to add a button that hides the flakes like this: <style> .floating-button { position: fixed; bottom: 70px; right: 20px; width: 34px; height: 34px; background-color: rgba(0,0,0,0.5); border: none; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; } .play-icon:before { content: "\25B6"; /* Unicode for Play icon */ font-size: 16px; color: white; } .pause-icon:before { content: "\275A\275A"; /* Unicode for Pause icon */ font-size: 16px; color: white; } </style> <!-- Floating button --> <div id="toggleButton" class="floating-button" onclick="toggleSnowflakes()"> <span id="buttonIcon" class="pause-icon"></span> </div> <script> var isSnowflakesVisible = true; var buttonIcon = document.getElementById('buttonIcon'); function toggleSnowflakes() { var snowflakes = document.querySelectorAll('.snowflake'); snowflakes.forEach(function (snowflake) { snowflake.style.display = isSnowflakesVisible ? 'none' : 'block'; }); // Toggle the button icon buttonIcon.className = isSnowflakesVisible ? 'play-icon' : 'pause-icon'; // Toggle the state isSnowflakesVisible = !isSnowflakesVisible; } </script> Me: I'm Paul, a SQSP user for >18 yrs & Circle Leader since 2017. I value honesty, transparency, diversity and good design ♥. Work: Founder of SF.DIGITAL. We provide high quality original extensions to supercharge your Squarespace website. Content: Views and opinions are my own. Links in my posts may refer to my own SF.DIGITAL products or may be affiliate links. Forum advice is completely free. You can thank me by selecting a feedback emoji. Buying a coffee is generous but optional.
derricksrandomviews Posted December 16, 2023 Posted December 16, 2023 I will certainly give your code a try.
derricksrandomviews Posted November 29 Posted November 29 (edited) Site URL: https://www.derricksrandomviews.com/ I posted this last year, and I thought it might be fun for some folks here again this year. Here is the thread with several snow snippets. https://forum.squarespace.com/search/?q=snow&quick=1 Edited November 29 by derricksrandomviews sayreambrosio, Tiny_Coast and Ziggy 3
MARK1878 Posted December 5 Posted December 5 Hi All, Very little experience with web design, is there an easy way to make my site "Christmassy" Snow flakes or something ? We do not sell anything, it is just our company info etc.. Mark
Lovethis1124 Posted December 5 Posted December 5 (edited) SO basically I used an old code for animated snow! but then I changed it a bit! So now it has snowmen too and the snowflakes are a bit bigger which in my opinion is better! So here's the code! (Put in the code injection tab under: Header option) <style> /* customizable snowflake styling */ /* customizable snowman styling */ .snowflake { color: #fff; font-size: 2em; font-family: Arial, cloud-script; 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 class="snowflake"> ☃️ </div> <div class="snowflake"> ☃️ </div> </div> Enjoy the code! (feel free to copy and paste it) Edited December 6 by Lovethis1124 spelling error
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment