Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Twinkling Stars

Recommended Posts

Hi guys,

I am trying to do the following in plain JS and am failing miserably:


0_ Dynamically create x amount of stars of an existing dom element

1_ Fill an area with randomly positioned stars (dots at this point)

2_ Then animate the alpha in and out at random times


Issue: The console log is not printing the generated random numbers for the index 


Thanks for your help!

See the Pen 31632d94b995ed3af8c5f917a69228c8 by dada78 (@dada78) on CodePen

Link to post
Share on other sites

Very nice Blake. :)


What's the advantage in creating the empty fragment and appending the stars to it and then the fragment to 'main'? My first instinct would have been to use .cloneNode() and append the stars directly into the 'main' element. 


I'm here to learn Professor Bowen.

  • Like 3
Link to post
Share on other sites

Great question.


Appending a star directly to the main element will trigger a reflow. There are 300 stars, so appending them one at a time could trigger 300 reflows. That does not include any additional reflows or repaints that might be caused by changing the initial style for each star. By appending all the stars to a document fragment, modifying them on there, and then adding it to the main element will trigger only 1 reflow and repaint.


For that demo, the performance impact probably won't be noticeable because it only happens when the page loads, you can't scroll, see, or interact with anything else on the screen, and the star images are very lightweight.


Here's where I first learned about using fragments.



I was dealing with the same problems as the author. My SVG app ran like crap because of all <use> elements I was constantly adding and removing from the DOM. Moral of the story. Use document fragments whenever possible, and don't use <use> elements... like ever. I have officially renamed them <don't use> elements.


  • Like 6
Link to post
Share on other sites

ahhh... makes complete sense. Thanks for the lesson. That slideshow is pretty educational. I've got that one bookmarked now.


Goodbye <use>. Hello createDocumentFragment().


  • Like 2
Link to post
Share on other sites

Thanks @OSUblake,

I tried to make your example work with my initial codepen and forked the update here:

See the Pen 0e5f98812d7d45aa074880b569f39303 by dada78 (@dada78) on CodePen


However I feel like I am not fully understanding this line here, as it throws the following console error: Uncaught TypeError: Cannot read property 'cloneNode' of undefined


var index = random(textures.length)|0;
  var star = textures[index].cloneNode(true);


This is how I understand it: length returns the number of DOM elements in the textures variable or 0 and randomizes those. 

var star  holds the randomized array of the textures variable and clones each of the elements in the index and then appends it to the fragment we've created.


Is the issue happening because I only have one DOM element not various different ones like you?


Thanks for taking the time to explain.







Link to post
Share on other sites

Hi @dada78


Correct. It's throwing the error because you only have 1 star.


I was lazy and did something else that might be confusing. The weird "|" pipe character in this code is just a quick way to floor a positive number.

// This...
var ease1 = eases[random(numAnimations)|0];

// ... is the same as this
var ease1 = eases[Math.floor(random(numAnimations))];


I changed them so they wouldn't confuse you.


See the Pen pWWQaE?editors=0010 by osublake (@osublake) on CodePen


  • Like 2
  • Thanks 1
Link to post
Share on other sites

@OSUblake you rock! Thanks so much! Continuing to learn something new one day at a time :-)

  • Like 1
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.