【jQuery】3D Curtain Template

CSSとjQueryを使い、スクロールしてz軸に沿った動きをシミュレートする、分割ブロックの視覚要素。

HTML

<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 -->

CSS

@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%);
}
}

JS

$(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
});
}
 

【jQuery】3D Curtain Template

  • LATEST
  • RELATED
  • POPULAR