Hello,
I have found this webpage where the code for falling snow is. Is there anyone who can tell me how I can change it to stars instead of snow?
Thank you very much
Hello,
I have found this webpage where the code for falling snow is. Is there anyone who can tell me how I can change it to stars instead of snow?
I haven’t tried it out but the .snowflake is a circle because border-radius is set to 50%. Go to the clippy generator (clip-path) website pick a shape, copy the css and replace border radius in the .snowflake style with the clip-path code. If that doesn’t work, Ill have a better look at it.
Or alternatively use a css shape generator (it may be more performant).
Another option is to use a star image and put it inside the div
Good idea, way more realistic than a basic shape, make sure u strip out the background of the star image. Theres loads of tutorials out there. Here’s a basic one using inkscape (open source).
No worries its Kirupa’s code that makes the animation work…
True @steve.mills, Do you how how I can make them into different colors? So, some of the stars is yellow and some are black.
#snowflakeContainer:nth-child(even){background-color: pink}
#snowflakeContainer:nth-child(odd){background-color: purple},
And remove the background-color in snowflake.
Thanks @steve.mills , it is some years since I last coded css and javascript so I have some problems remembering how to code it correct:wink:. What I can see it should stand under ? but then there are no stars… Is it the right place to place it?
My Bad, the CSS doesn’t apply to the cloned nodes. This is a quick work around. Paste the below code at the end of
“function generateSnowflakes() {”
after the block of code with the comments:
“// create our Snowflake object”
(right at the end of the function but inside it)
// PASTE THIS IN BELOW
let flakes = document.querySelectorAll(’.snowflake’);
for(i=0; i< flakes.length; i++){
i%2 == 0 ? flakes[i].style.backgroundColor = ‘yellow’ :
flakes[i].style.backgroundColor = ‘white’;
}
No problem, your help is really appreciated @steve.mills . Have I placed it correct? because all the snow (stars) is gone
Yeah that’s right,
Try past this CSS in.(replace the current CSS)
body{
background-color: black;
}
#snowflakeContainer {
position: absolute;
left: 0px;
top: 0px;
display: none;
}
.snowflake {
position: fixed;
user-select: none;
z-index: 1000;
pointer-events: none;
width: 10px;
height: 10px;
clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}
@steve.mills thanks for all of you help, I really appreciated it😊. I solved with this code
if (initialXPos > browserWidth / 2) {
var color = “#FFFFFF”;
} else {
var color = “#816E6A”;
}
no dramas, good work
:: Copyright KIRUPA 2024 //--