How to code falling stars?

programming
1

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
2

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).

1 Like
3

Another option is to use a star image and put it inside the div :grinning:

2 Likes
4

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).


Good luck :slightly_smiling_face:
1 Like
5

Thank you very much @steve.mills, it works now :star_struck: :grinning:

6

No worries its Kirupa’s code that makes the animation work…:slightly_smiling_face:

1 Like
7

True :grinning:@steve.mills, Do you how how I can make them into different colors? So, some of the stars is yellow and some are black. :grinning:

8

#snowflakeContainer:nth-child(even){background-color: pink}
#snowflakeContainer:nth-child(odd){background-color: purple},
And remove the background-color in snowflake.

1 Like
9

Thanks @steve.mills :blush:, 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?

10

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’;
}

Screenshot_2021-02-21 Document
Screenshot_2021-02-21 Document2317×1377 25 KB

11

No problem, your help is really appreciated @steve.mills :blush:. Have I placed it correct? because all the snow (stars) is gone
image

12

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%);

    }
13

@steve.mills Hmm it is strange, it still doesnt work… Have I done it correct?:blush:

2021-02-21
2021-02-211080×1920 227 KB

14

2021-02-21 (1)
2021-02-21 (1)1073×1920 286 KB

15

2021-02-21 (2)
2021-02-21 (2)1075×1920 248 KB

16

@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”;
}

17

no dramas, good work

1 Like
20

Check this video out, It will help you.