derricksrandomviews Posted December 13, 2023 Share 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 Link to comment
paul2009 Posted December 13, 2023 Share 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 About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional. Link to comment
derricksrandomviews Posted December 15, 2023 Author Share 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 Link to comment
paul2009 Posted December 15, 2023 Share 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> About me: I've been a SQSP User for 18 yrs. I was invited to join the Circle when it launched in 2016. I have been a Circle Leader since 2017. I don't work for Squarespace. I value honesty, transparency, diversity and good design ♥. Work: I founded and run SF.DIGITAL, building Squarespace Extensions to supercharge your commerce website. Content: Views and opinions are my own. Links in my posts may refer to SF.DIGITAL products or may be affiliate links. Forum advice is free. You can thank me by clicking one of the feedback emojis below. Coffee is optional. Link to comment
derricksrandomviews Posted December 16, 2023 Author Share Posted December 16, 2023 I will certainly give your code a try. 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