Falling snowflakes on webpage in Customize with code Posted December 7, 2022 On 12/5/2020 at 11:30 PM, derricksrandomviews said: Code to make images snow, using code block. <div class="snow" /> <style> .editor-stage .snow { height:50px; background: #fff; } .snow{ position:fixed; pointer-events:none; top:0; left:0; right:0; bottom:0; height:100vh; background: none; background-image: url('https://s3-eu-west-1.amazonaws.com/static-ressources/s1.png'), url('https://s3-eu-west-1.amazonaws.com/static-ressources/s2.png'), url('https://s3-eu-west-1.amazonaws.com/static-ressources/s3.png'); z-index:100; -webkit-animation: snow 10s linear infinite; -moz-animation: snow 10s linear infinite; -ms-animation: snow 10s linear infinite; animation: snow 10s linear infinite; } @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} } @-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 400px 1000px, 200px 400px, 100px 300px;} } @-webkit-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} } @-ms-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 50% {background-position: 500px 500px, 100px 200px, -100px 150px;} 100% {background-position: 500px 1000px, 200px 400px, -100px 300px;} } </style> <p> Hey, thanks for your great posts. I'm an absolute code noob and implemented your code on my site. Unfortunately, the animation ends very abruptly. Is there a way to make the animation smoother? So you have an infinite loop and no hard end of the animation. Many thanks in advance, Kind regards My page:https://www.hairmanufacture.online/
How can I change the length/height of the background image in Customize with code Posted March 4, 2022 Hey, I already tried: @media only screen and (max-width: 640px) {#collection-61d720afc51e9c7b1d735235 {height: 20px}} but it didn't work.
Falling snowflakes on webpage
in Customize with code
Posted
Hey, thanks for your great posts.
I'm an absolute code noob and implemented your code on my site.
Unfortunately, the animation ends very abruptly. Is there a way to make the animation smoother? So you have an infinite loop and no hard end of the animation.
Many thanks in advance,
Kind regards
My page:
https://www.hairmanufacture.online/