jQuery
【jQuery】3D Curtain Template
January 13, 2015

CSSとjQueryを使い、スクロールしてz軸に沿った動きをシミュレートする、分割ブロックの視覚要素。
<section class="cd-section"> <div class="cd-block"> <h1>3D Curtain Template</h1> </div> </section> <!-- .cd-section --> <section class="cd-section"> <div class="cd-block"> <div class="cd-half-block"></div> <div class="cd-half-block"> <p> <!-- Text here --> </p> </div> </div> </section> <!-- .cd-section --> <section class="cd-section"> <!-- ... --> </section> <!-- .cd-section -->
@media only screen and (min-width: 1170px) { .cd-section { height: 100vh; } .cd-block { position: fixed; top: 0; left: 0; } .cd-half-block { height: 100vh; width: 50%; position: absolute; top: 0; } .cd-section:nth-of-type(even) .cd-half-block:first-of-type, .cd-section:nth-of-type(odd) .cd-half-block:nth-of-type(2) { left: 0; transform: translateX(-100%); } .cd-section:nth-of-type(odd) .cd-half-block:first-of-type, .cd-section:nth-of-type(even) .cd-half-block:nth-of-type(2) { right: 0; transform: translateX(100%); } }
$(window).on('scroll', function(){ triggerAnimation(); }); function triggerAnimation(){ if(MQ == 'desktop') { //if on desktop screen - animate sections window.requestAnimationFrame(animateSection); } // ..... } function animateSection () { $('.cd-section').each(function(){ var actualBlock = $(this), scale, translate, opacity; //evaluate scale/translate values //... scaleBlock(actualBlock.find('.cd-block'), scale, opacity); translateBlock(actualBlock.find('.cd-half-block').eq(0), '-'+translate); translateBlock(actualBlock.find('.cd-half-block').eq(1), translate); }); } function translateBlock(elem, value) { elem.css({ //... 'transform': 'translateX(' + value + ')', }); } function scaleBlock(elem, value, opac) { elem.css({ //... 'transform': 'scale(' + value + ')', 'opacity': opac }); }