CODEWITHSUNDEEP
css
praveen
praveen

Reputation: 63

Animation css3 blinking stars

Please help with the following code :-

Html:-

<figure class="star">
<figure class="star-top"></figure>
<figure class="star-bottom"></figure>
</figure>

Js:-

var limit=100, // Max number of starts
  body=document.body;
loop={
//initilizeing
start:function(){
    for (var i=0; i <= limit; i++) {
        var star=this.newStar();
        star.style.top=this.rand()*100+"%";
        star.style.left=this.rand()*100+"%";
        star.style.webkitAnimationDelay=this.rand()+"s";
        star.style.mozAnimationDelay=this.rand()+"s";
        body.appendChild(star);
    };
},
//to get random number
rand:function(){
    return Math.random();
},
//createing html dom for star
newStar:function(){
    var d = document.createElement('div');
    d.innerHTML = '<figure class="star"><figure class="star-top"></figure>
          <figure class="star-bottom"></figure></figure>';
    return d.firstChild;
},
  };
  loop.start();

http://jsfiddle.net/H29j7/

The background and star animation is covering the entire body element. I want to define a div element and restrict the background and star animation within that div so that I can define a custom height for it.

Thank you

Upvotes: 0

Views: 6502

Answers (1)

Mister Epic
Mister Epic

Reputation: 16743

First, let's create a container for the stars:

<div id="container">
<figure class="star">
  <figure class="star-top"></figure>
  <figure class="star-bottom"></figure>
 </figure>
</div>

Now refer to the container instead of the body in your script:

var container=document.getElementById('container');

And then style it up:

#container{
    height:200px;
    width:200px;
    overflow:hidden;
    background: #212121;
    position:relative;
}

ref: http://jsfiddle.net/H29j7/6/

Upvotes: 1

Related Questions