비오는 효과 제이쿼리

비오는 효과 제이쿼리

HTML

<ul class="item_list">

<li><img src="image/item.png" alt="아이템"></li>

<li><img src="image/item.png" alt="아이템"></li>

<li><img src="image/item.png" alt="아이템"></li>

<li><img src="image/item.png" alt="아이템"></li>

<li><img src="image/item.png" alt="아이템"></li>

<li><img src="image/item.png" alt="아이템"></li>

<li><img src="image/item.png" alt="아이템"></li>

<li><img src="image/item.png" alt="아이템"></li>

<li><img src="image/item.png" alt="아이템"></li>

<li><img src="image/item.png" alt="아이템"></li>

<li><img src="image/item.png" alt="아이템"></li>

</ul>

CSS

body{ margin:0; padding:0;}

#wrap{ position: relative; background:#151515; width:100%; height:100vh; overflow: hidden;}

.item_list{ position: relative; top:0; left:0;}

.item_list li{ position: absolute; top:0; left:0; opacity: 0;}

SCRIPT

function create()

{

_w = $( window );

_itemList = $( ".item_list" );

_itemTarget = _itemList.children( "li" );

_wH = _w.height();

console.log( "create" );

}

function addEvent()

{

}

function loadItem()

{

var index = $( this ).index();

_itemTarget.css({

top: - _itemTarget.eq( index ).height()

})

}

function moveItem()

{

_itemTarget.each( function(){

posX = Math.random() * ( _w.width() - $( this ).width() );

TweenMax.set( $( this ), { opacity:0, left: posX });

TweenMax.to( $( this ), 1, { opacity:1, top : _wH, ease:Power0.easeInOut, delay:Math.random() * 3, onCompleteParams : [ $( this ) ], onComplete: reMoveItem});

});

}

function reMoveItem( $item )

{

var item = $item;

posX = Math.random() * ( _w.width() -item.width() );

TweenMax.set( item, { opacity: 0, left: posX, top: -item.height() });

TweenMax.to( item, 1, { opacity:1, top: _wH, ease:Power0.easeInOut, delay:Math.random() * 2, onCompleteParams : [ item ], onComplete:reMoveItem });

}

예제 샘플 : http://ux.adqua.co.kr/ux/ixkfo86/test/rain/random.html