페럴럭스 기초 1편

페럴럭스 기초 1 편

html 구조

<div id="sections">

<section id="section0">

<img src="img/main/vis_1.jpg" alt="">

</section>

<section id="section1">

<p>UNIT9 and Cheil Worldwide present a thrilling 4D Snowboarding VR experience for the 2018 Winter Olympics</p>

<p>Samsung: Snowboard VR takes users through a hyper-real journey complete with vast canyons, sheer rock cliff, and a gravity defying ‘world in the sky’. Before donning the VR headsets, users at the 2018 Winter Olympics stood on a physical snowboard which replicated the movements of the snowboard in the VR scene, providing a deeper sense of immersion.</p>

</section>

</div>

스크립트

var _w;

var $section0,

$visualImg;

var $section1;

function create()

{

_w = $( window );

$section0 = $( "#section0" );

$section0.css( "opacity", 0 );

$visualImg = $section0.find( "img" );

$section1 = $( "#section1" );

}

function addEvent()

{

_w.on( "load", loadComplete );

}

function loadComplete( $e )

{

resizeEvent( null );

_w.on( "resize", resizeEvent );

scrollLisner( null );

_w.on( "scroll", scrollLisner );

}

function resizeEvent( $e )

{

show();

}

function show()

{

var wW = _w.width();

var wH = _w.height();

$section0.css( "opacity", 1 );

$visualImg.css({ width : wW, height : wH });

$section1.css({ marginTop: wH });

}

function scrollLisner( $e )

{

var section0Height = $section0.height();

// 1. 제이쿼리로 window 객체를 만들어

// 2. 제이쿼리 window객체의 scrollTop 가져와

// var sT = $( this ).scrollTop();

// 1. 제이쿼리 window객체의 scrollTop 가져와

var sT = _w.scrollTop();

$visualImg.css({

'opacity' : 1 - ( sT / section0Height ),

"top" : ( sT / 2 ) * ( -1 ),

});

TweenMax.to( $visualImg, 0, { scale : 1 + ( sT / section0Height ) / 2, ease: Expo.easeInOut } )

}