Script Re-sizing Webpage

Question

I am currently using a Shooting Star script I found online to randomize shooting stars across the webpage. Whenever a shooting star goes out of the visible webpage, scroll bars appear and re-size the entire page for a moment. This happens quite frequently. Is there a way I can just have the shooting star delete itself once it hits the edge of the webpage, or maybe have it so that the webpage isn't affected by the shooting stars? Here's the website where I got the script from: http://codepen.io/manufosela/pen/Gymih Here's the code:

<html>
  <head>
    <title>Shooting star Example</title>
    <meta charset="utf-8">
    <meta name="author" content="@manufosela">
  </head>

  <body class="stars">
    <h1>SHOOTING STARS...</h1>
    <div id="ShootingStarParams"></div>
    <script type="text/javascript" src="http://codeorigin.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="ShootingStarClass.js"></script>
    <script type="text/javascript">
      $( document ).ready( function(){
        var shootingStarObj = new ShootingStar( "body" );
            shootingStarObj.launch();
      });
    </script>
  </body>
</html>

body { color:#FFF; height:600px; width:99%; height:95%; color:#FFF; }
      .stars {
        z-index: 0; position: absolute; /* width: 420em; height: 70em; */
        background-image: url( http://www.14denoviembre.es/img/hori.png ), url( http://www.14denoviembre.es/img/stars_5.png ); background-repeat: repeat-x,repeat-x repeat-y;
        transform:translate3D(0em, 0em, 0); animation: stars 21s ease; transform-style: preserve-3d;
      }

(function(){
      /**
        author: @manufosela
        2013/08/27    copyleft 2013

        ShootingStar class Main Methods:
          launch: launch shooting stars every N seconds received by param. 10 seconds by default.
          launchStar: launch a shooting star. Received options object by param with:
             - dir (direction between 0 and 1)
             - life (between 100 and 400)
             - beamSize (between 400 and 700)
             - velocity (between 2 and 10)
      **/

      ShootingStar = function( id ) {
        this.n = 0;
        this.m = 0;
        this.defaultOptions = { velocity:8, starSize:10, life:300, beamSize:400, dir:-1 };
        this.options = {};
        id = ( typeof id != "undefined" )?id:"";
        this.capa = ( $( id ).lenght > 0 )?"body":id;
        this.wW = $( this.capa ).innerWidth();
        this.hW = $( this.capa ).innerHeight();
      };

      ShootingStar.prototype.addBeamPart = function( x, y ) {
        this.n++;
        var name = this.getRandom( 100, 1 );
        $( "#star"+name ).remove();
        $( this.capa ).append( "<div id='star"+name+"'></div>" );
        $( "#star"+name ).append( "<div id='haz"+this.n+"' class='haz' style='position:absolute; color:#FF0; width:10px; height:10px; font-weight:bold; font-size:"+this.options.starSize+"px'>·</div>" );
        if ( this.n > 1 ) $( "#haz" + ( this.n - 1 ) ).css( { color:"rgba(255,255,255,0.5)" } );
        $( "#haz" + this.n ).css( { top: y + this.n, left: x + ( this.n * this.options.dir ) } );
      }

      ShootingStar.prototype.delTrozoHaz = function() {
        this.m++;
        $( "#haz" + this.m ).animate( {opacity:0}, 75 );
        if ( this.m >= this.options.beamSize ) { $( "#ShootingStarParams" ).fadeOut( "slow" ); }
      }

      ShootingStar.prototype.getRandom = function( max, min ) {
        return Math.floor( Math.random() * (max - min + 1)) + min;
      }

      ShootingStar.prototype.toType = function ( obj ) {
        if ( typeof obj === "undefined" ) { return "undefined"; /* consider: typeof null === object */ }
        if ( obj === null ) { return "null"; }
        var type = Object.prototype.toString.call( obj ).match( /^\[object\s(.*)\]$/ )[1] || '';
        switch ( type ) {
          case 'Number': if ( isNaN( obj ) ) { return "nan"; } else { return "number"; }
          case 'String': case 'Boolean': case 'Array': case 'Date': case 'RegExp': case 'Function': return type.toLowerCase();
        }
        if ( typeof obj === "object" ) { return "object"; }
        return undefined;
      }

      ShootingStar.prototype.launchStar = function( options ) {
        if ( this.toType( options ) != "object" ) { options = {}; }
        this.options = $.extend( {}, this.defaultOptions, options );
        this.n=0;
        this.m=0;
        var i=0, l=this.options.beamSize,
            x=this.getRandom( this.wW - this.options.beamSize - 100, 100 ), y=this.getRandom( this.hW - this.options.beamSize - 100, 100 ),
            self = this;
        for( ; i<l; i++ ) { setTimeout( function(){ self.addBeamPart( x, y ); }, self.options.life + ( i * self.options.velocity ) ); }
        for( i=0; i<l; i++ ) { setTimeout( function(){ self.delTrozoHaz() }, self.options.beamSize + ( i * self.options.velocity ) ); }
        $( "#ShootingStarParams" ).html( "Launching shooting star. PARAMS: wW: " + this.wW + " - hW: " + this.hW + " - life: " + this.options.life + " - beamSize: " + this.options.beamSize + " - velocity: " + this.options.velocity );
        $( "#ShootingStarParams" ).fadeIn( "slow" );
      }

      ShootingStar.prototype.launch = function( everyTime ) {
        if ( this.toType( everyTime ) != "number" ) { everyTime = 10; }
        everyTime = everyTime * 1000;
        this.launchStar();
        var self = this;
        setInterval( function() {
          var options = {
            dir: ( self.getRandom( 1, 0 ))?1:-1,
            life: self.getRandom( 400, 100 ),
            beamSize: self.getRandom( 700, 400 ),
            velocity: self.getRandom( 10, 4 )
          }
          self.launchStar( options );
        }, everyTime );
      }

})();

Answer 1

body {
    overflow: hidden;
}

This prevents scrollbars from appearing when content of an element goes beyond its dimensions.

Script Re-sizing Webpage

Question

1 answers

solution1
0 2016-03-27 20:50:33

Script Re-sizing Webpage

Question

1 answers

solution1 0 2016-03-27 20:50:33

solution1
0 2016-03-27 20:50:33