Sparkly

by Virginie LE GUEN BERTHEAUME

HTML

<div class="photo">
</div>

CSS

div.photo {
  background: rgba(0, 0, 0, 0) url("https://custom.cvent.com/9BC2D0988F874B5C8C15E9D14B6E2F3B/pix/21abaeaeb5d94c73b6814e90cf55d240.jpg") no-repeat scroll center top;
  height: 516px;
  margin: 0 auto;
  position: relative;
  text-align: center;
  top: -40px;
  width: 1000px;
}

div.star {
  position: absolute;
  width: 15px;
  background-image: url( data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA8AAAAPCAQAAACR313BAAAAS0lEQVQYGZXBQRGAIABFwVeCJBIG00AbwkgRKfE8c/kz7sLBQmIlsZE4SJwkPiRuTharze50udXX5XR4e1k4uUlcJE4SO4mNxIs/PsnOKsJwHzXnAAAAAElFTkSuQmCC );
  height: 15px;
}

JavaScript

var mySparkle = {};
mySparkle.stars = [];
mySparkle.createStar = function( ) {
	if( !mySparkle.elem ) {
  	mySparkle.elem = $( "body" );
  }
  var star = $( "<div class='star'></div>" );
  
  var randTop = Math.random() * 100;
  var randLeft = Math.random() * 100;
  star.css( "top" , "calc( " + randTop + "%" );
  star.css( "left" , randLeft + "%" );
  mySparkle.elem.append( star );
  mySparkle.stars.push( star );
};
mySparkle.createStars = function( n ) {
	for( var i = 0 ; i < n ; i ++ )
  	mySparkle.createStar( );
}
mySparkle.moveStars = function() {
	for( var i = 0 ; i < mySparkle.stars.length ; i++ ) {
    var randTop = Math.random() * 100;
    var randLeft = Math.random() * 100;
    mySparkle.stars[ i ].css( "top" , randTop + "%" );
    mySparkle.stars[ i ].css( "left" , randLeft + "%" );
  }
  setTimeout( mySparkle.moveStars, 300);
}
mySparkle.showPos = function() {
	for( var i = 0 ; i < mySparkle.stars.length ; i++ ) {
    console.log (
      mySparkle.stars[ i ] ,
    	mySparkle.stars[ i ].css( "top" ) ,
    	mySparkle.stars[ i ].css( "left" )
   );
  }
}
mySparkle.init = function( elem , n ) {
	mySparkle.elem = elem;
  mySparkle.createStars( n );
  mySparkle.moveStars( );
}

// mySparkle.init( null , 150 ); // creates 150 stars, and the whole page ( elem = body )
mySparkle.init( $( ".photo" ) , 150 ); // creates 150 stars, and the div(s) with the "photo" class ( elem = $( ".photo ) )