TweenMax 눈내리는 효과

트윈맥스를 사용하여 눈내리는거 같은 효과를 만들어봤습니다.

 

<section>
  <span class="circle circle1"></span>
  <span class="circle circle2"></span>
  <span class="circle circle3"></span>
  <span class="circle circle1"></span>
  <span class="circle circle2"></span>
  <span class="circle circle3"></span>
  <span class="circle circle1"></span>
  <span class="circle circle2"></span>
  <span class="circle circle3"></span>  
</section>

 

* {
  margin:0;
  padding:0;
  box-sizing:border-box;
}

section {
  position:relative;
  background:#333;
  height:500px;
  overflow:hidden;
}

.circle {
  position:absolute;
  width:8px;
  height:8px;
  border-radius:50%;
}

.circle1 {
  background:green;
}

.circle2 {
  background:snow;
}

.circle3 {
  background:salmon;
}

 

$(function(){

	var $win = $(window),
  	$section = $('section'),
  	$hei = $section.height(),
  	$snow = $('.circle'),
    	posX;
    
	$snow.each(function(){
  	
    	var $this = $(this);
    	posX = Math.random() * $win.width();
    
    	TweenMax.set( $this, {
	    	left: posX
    });
    
    TweenMax.to( $this, 1, {
    	top: $hei,
     	ease: Power0.easeInOut,
     	delay: Math.random(),
      	repeat: -1
    });
    
  });
  
});

 

jsfiddle에서 보기

https://jsfiddle.net/hyuckjin/tef5u8c6/