Skip to content

Latest commit

 

History

History
138 lines (111 loc) · 4 KB

README.md

File metadata and controls

138 lines (111 loc) · 4 KB
Raw

Twinkle-Twinkle

How to animate stars in the background with CSS

Hey all! the team over at:
Foo
got some good feedback (thanks!) about the twinkling stars in the background of the page.

I couldn't find any tutorials online so I thought I'd show you how we did it and you can play around with it and use it in your own pages.

It's a whole lot easier than you might think :)

>>> Here is a simplified version I drew up in CodePen

HTML

<div id="star-container"><div>
  • The HTML just needs one div. See? Easy!
  • This will be the container for the stars that will be created by JS

CSS

#star-container {
  background-color: black;
  height: 100vh;
}
  • Container gets a black background and takes up the whole screen 

.star {
    position: absolute;
    height: 10px;
    width: 10px;
    background-color: white;
}
  • This is a class that will apply to each star (the element doesn't exist yet!)
  • The absolute positioning means we can change where they will be displayed on the page using CSS properties like top: and left: 

  @keyframes twinkle {
    0%   { opacity: 1; }
    50%  { opacity: 0.2; }
    100% { opacity: 1; }
  }
  • This is a very simple animation that will change the opacity of the element it is applied to over time.
  • If you've not used keyframes before here is a CSS-TRICKS page explaining the use and the syntax!

JS

const starContainer = document.getElementById('star-container')

for (let i = 0; i < 100; i++) {
    const element = document.createElement('div')
    element.style.top=`${Math.random()*100}%`
    element.style.left=`${Math.random()*100}%`
    element.style.animation = `twinkle ${1+Math.random()*10}s ease-out infinite`
    starContainer.appendChild(element)
    element.setAttribute('class', 'star')
    }

This is where stuff gets a little tricky but it's only 1 paragraph so I'll go through it step by step:


for (let i = 0; i < 100; i++) {
  • Does something x100 you know the deal 

const element = document.createElement('div')
  • Creates an HTML <div> element 

element.style.top=`${Math.random()*100}%`
  • This is where the absolute positioning comes into play: it sets the CSS style of the created element to be a random % away from the top (so down) 

element.style.left=`${Math.random()*100}%`
  • Same as above, but away from the left (so right) 

element.style.animation = `twinkle ${1+Math.random()*10}s ease-out infinite`
  • Adds the CSS animation property to the element (see keyframes link above) including a random duration of 0-10 seconds +1 (this is so that the animation time will never be <1 in which case the star would become a pretty angry strobe light) 

starContainer.appendChild(element)
  • Makes the element a child (puts it inside of) our HTML star-container div 

element.setAttribute('class', 'star')
  • Sets the class of our element to "star", which is something we've already defined in our CSS :)

All done!

Now you can twinkle to your hearts content

Stuff to play around with

  • Background colour / img / opacity of star-container div
  • Size / shape / colour of stars (% sizes help with responsivity ;))
  • What the Keyframes animation does at different points
  • Where the stars will be created on the page
  • Use z-indexing to make sure stars are displayed behind / infront of other elements on page as desired

Stretch goal:

  • See if you can write some JS to create the stars in different colours ;)