/randomized-starfield-banner

Use Javascript and CSS effects to make a banner with an animated random starfield in the background.

Primary LanguageCSS

Randomized starfield banner

  • Approx. completion time: 1 hour
  • Deliverables: 1 HTML file, 1 CSS file, 1 JS file

Use Javascript and CSS effects to make a banner with an animated random starfield in the background.

  • Fork this repository.
  • Write Javascript that will generate 75 stars into the banner with random locations, opacities, rotations, and scales.
  • Animate the width and height of the stars so they pulse.
  • Much of the CSS is written for you: concentrate on the animation
  • DO NOT change the HTML.
  • Run it through Markbot and make sure it passes all the checks.

Details

  • Number of stars: 75
  • Randomized: top, left, opacity, transform: rotate() scale()
  • Getting the width/height of elements: outerWidth(), outerHeight()

Goal

Create the interaction shown in the linked video.

Hand in

Drop this folder into your Markbot application. Make sure to fix all the errors. And submit to Canvas using Markbot.