테스트 사이트 - 개발 중인 베타 버전입니다

눈내리는 효과 채택완료

MJEI 9년 전 조회 4,301

홈페이지에 눈내리는 효과를 주려고 하는데요..

검색해보니 소스가 많긴한데 모두 홈페이지 전체에 눈이 내리는데

상단에서 일정공간( width:100%; height:1000px; 정도의 공간 )에서만 눈이 내리는게 보이고 스크롤 내리면 밑부분은 눈내리는게 안보이고 싶은데 제가 본 소스는 모두다 스크롤 내려도 계속 눈이 보이네요..

 

height 값을 지정해서 스크롤 내리면 안보이게..수정이 가능할까요?

제가 주워온 소스는 아래와 붙여넣어봅니다... 천사같은 고수님들 도움부탁드려요 ㅠ ㅠ

 

(function($){  $.snowfall = function(element, options){   var defaults = {     flakeCount : 35,     flakeColor : '#ffffff',     flakeIndex: 999999,     minSize : 1,     maxSize : 2,     minSpeed : 1,     maxSpeed : 5,     round : false,     shadow : false,     collection : false,     collectionHeight : 40,     deviceorientation : false    },    options = $.extend(defaults, options),    random = function random(min, max){     return Math.round(min + Math.random()*(max-min));    };        $(element).data("snowfall", this);           // Snow flake object    function Flake(_x, _y, _size, _speed, _id)    {     // Flake properties     this.id = _id;     this.x  = _x;     this.y  = _y;     this.size = _size;     this.speed = _speed;     this.step = 0;     this.stepSize = random(1,10) / 100;       if(options.collection){      this.target = canvasCollection[random(0,canvasCollection.length-1)];     }          var flakeMarkup = $(document.createElement("div")).attr({'class': 'snowfall-flakes', 'id' : 'flake-' + this.id}).css({'width' : this.size, 'height' : this.size, 'background' : options.flakeColor, 'position' : 'absolute', 'top' : this.y, 'left' : this.x, 'fontSize' : 0, 'zIndex' : options.flakeIndex});          if($(element).get(0).tagName === $(document).get(0).tagName){      $('body').append(flakeMarkup);      element = $('body');     }else{      $(element).append(flakeMarkup);     }          this.element = document.getElementById('flake-' + this.id);          // Update function, used to update the snow flakes, and checks current snowflake against bounds     this.update = function(){      this.y += this.speed;            if(this.y > (elHeight) - (this.size  + 6)){       this.reset();      }            this.element.style.top = this.y + 'px';      this.element.style.left = this.x + 'px';            this.step += this.stepSize;

     if (doRatio === false) {       this.x += Math.cos(this.step);      } else {       this.x += (doRatio + Math.cos(this.step));      }

     // Pileup check      if(options.collection){       if(this.x > this.target.x && this.x < this.target.width + this.target.x && this.y > this.target.y && this.y < this.target.height + this.target.y){        var ctx = this.target.element.getContext("2d"),         curX = this.x - this.target.x,         curY = this.y - this.target.y,         colData = this.target.colData;                  if(colData[parseInt(curX)][parseInt(curY+this.speed+this.size)] !== undefined || curY+this.speed+this.size > this.target.height){          if(curY+this.speed+this.size > this.target.height){           while(curY+this.speed+this.size > this.target.height && this.speed > 0){            this.speed *= .5;           }

          ctx.fillStyle = "#fff";                      if(colData[parseInt(curX)][parseInt(curY+this.speed+this.size)] == undefined){            colData[parseInt(curX)][parseInt(curY+this.speed+this.size)] = 1;            ctx.fillRect(curX, (curY)+this.speed+this.size, this.size, this.size);           }else{            colData[parseInt(curX)][parseInt(curY+this.speed)] = 1;            ctx.fillRect(curX, curY+this.speed, this.size, this.size);           }           this.reset();          }else{           // flow to the sides           this.speed = 1;           this.stepSize = 0;                     if(parseInt(curX)+1 < this.target.width && colData[parseInt(curX)+1][parseInt(curY)+1] == undefined ){            // go left            this.x++;           }else if(parseInt(curX)-1 > 0 && colData[parseInt(curX)-1][parseInt(curY)+1] == undefined ){            // go right            this.x--;           }else{            //stop            ctx.fillStyle = "#fff";            ctx.fillRect(curX, curY, this.size, this.size);            colData[parseInt(curX)][parseInt(curY)] = 1;            this.reset();           }          }         }       }      }            if(this.x > (elWidth) - widthOffset || this.x < widthOffset){       this.reset();      }     }          // Resets the snowflake once it reaches one of the bounds set     this.reset = function(){      this.y = 0;      this.x = random(widthOffset, elWidth - widthOffset);      this.stepSize = random(1,10) / 100;      this.size = random((options.minSize * 100), (options.maxSize * 100)) / 100;      this.speed = random(options.minSpeed, options.maxSpeed);     }    }       // Private vars    var flakes = [],     flakeId = 0,     i = 0,     elHeight = $(element).height(),     elWidth = $(element).width(),     widthOffset = 0,     snowTimeout = 0;       // Collection Piece ******************************    if(options.collection !== false){     var testElem = document.createElement('canvas');     if(!!(testElem.getContext && testElem.getContext('2d'))){      var canvasCollection = [],       elements = $(options.collection),       collectionHeight = options.collectionHeight;            for(var i =0; i < elements.length; i++){        var bounds = elements[i].getBoundingClientRect(),         canvas = document.createElement('canvas'),         collisionData = [];

       if(bounds.top-collectionHeight > 0){                  document.body.appendChild(canvas);         canvas.style.position = 'absolute';         canvas.height = collectionHeight;         canvas.width = bounds.width;         canvas.style.left = bounds.left + 'px';         canvas.style.top = bounds.top-collectionHeight + 'px';                  for(var w = 0; w < bounds.width; w++){          collisionData[w] = [];         }                  canvasCollection.push({element :canvas, x : bounds.left, y : bounds.top-collectionHeight, width : bounds.width, height: collectionHeight, colData : collisionData});        }      }     }else{      // Canvas element isnt supported      options.collection = false;     }    }    // ************************************************        // This will reduce the horizontal scroll bar from displaying, when the effect is applied to the whole page    if($(element).get(0).tagName === $(document).get(0).tagName){     widthOffset = 25;    }        // Bind the window resize event so we can get the innerHeight again    $(window).bind("resize", function(){      elHeight = $(element).height();     elWidth = $(element).width();    });    

   // initialize the flakes    for(i = 0; i < options.flakeCount; i+=1){     flakeId = flakes.length;     flakes.push(new Flake(random(widthOffset,elWidth - widthOffset), random(0, elHeight), random((options.minSize * 100), (options.maxSize * 100)) / 100, random(options.minSpeed, options.maxSpeed), flakeId));    }

   // This adds the style to make the snowflakes round via border radius property    if(options.round){     $('.snowfall-flakes').css({'-moz-border-radius' : options.maxSize, '-webkit-border-radius' : options.maxSize, 'border-radius' : options.maxSize});    }        // This adds shadows just below the snowflake so they pop a bit on lighter colored web pages    if(options.shadow){     $('.snowfall-flakes').css({'-moz-box-shadow' : '1px 1px 1px #555', '-webkit-box-shadow' : '1px 1px 1px #555', 'box-shadow' : '1px 1px 1px #555'});    }

   // On newer Macbooks Snowflakes will fall based on deviceorientation    var doRatio = false;    if (options.deviceorientation) {     $(window).bind('deviceorientation', function(event) {      doRatio = event.originalEvent.gamma * 0.1;     });    }

   // this controls flow of the updating snow    function snow(){     for( i = 0; i < flakes.length; i += 1){      flakes[i].update();     }          snowTimeout = setTimeout(function(){snow()}, 30);    }        snow();      // Public Methods      // clears the snowflakes   this.clear = function(){       $(element).children('.snowfall-flakes').remove();       flakes = [];       clearTimeout(snowTimeout);      };  };    // Initialize the options and the plugin  $.fn.snowfall = function(options){   if(typeof(options) == "object" || options == undefined){        return this.each(function(i){      (new $.snowfall(this, options));     });    }else if (typeof(options) == "string") {    return this.each(function(i){     var snow = $(this).data('snowfall');     if(snow){      snow.clear();     }    });   }  }; })(jQuery);

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

9년 전

해결되었습니다.

로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인