페럴럭스 기초 2편

페럴럭스 기초 2 편

html 구조

<div id="wrap">

<div class="section0"></div>

<div class="section1">

<img src="" alt="">

</div>

<div class="section2"></div>

</div>

javascript 구조

var _w;

var _s1;

function create()

{

_w = $( window );

_s1 = $( ".section1" );

}

function addEvent()

{

scrollListener( null );

_w.on( "scroll", scrollListener );

}

function scrollListener( $e )

{

var sT = _w.scrollTop();

var wH = _w.height();

var s1Top = _s1.offset().top;

var per = ( sT + wH ) / s1Top - 1;

var index = parseInt( per * 100 );

if( index < 0 || index > 155 ) return;

var url = "img/main/img_" + index + ".png";

$( "img" ).attr( "src", url );

}

예제로 만든 샘플 사이트

http://ux.adqua.co.kr/ux/ixkfo86/test/parallax/index.html