눈내리는 효과

눈내리는 효과

QA

눈내리는 효과

본문

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

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

상단에서 일정공간( 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

답변을 작성하시기 전에 로그인 해주세요.
전체 123,532 | RSS
QA 내용 검색

회원로그인

(주)에스아이알소프트 / 대표:홍석명 / (06211) 서울특별시 강남구 역삼동 707-34 한신인터밸리24 서관 1404호 / E-Mail: admin@sir.kr
사업자등록번호: 217-81-36347 / 통신판매업신고번호:2014-서울강남-02098호 / 개인정보보호책임자:김민섭(minsup@sir.kr)
© SIRSOFT