Tạo Trang Giới Thiệu Với 3D Curtain Template

Hôm nay iZdesigner giới thiệu đến các bạn mẫu 3D Curtain Template. Mẫu này được xây dựng từ những hiệu ứng động của CSS3 và được điều khiển bởi jQuery rất tuyệt vời để bạn dùng để giới thiệu công ty hoặc sản phẩm nổi bật nào đó trong ứng dụng web.

HTML
Để tạo khung chuẩn html, các bạn chỉ cần chý ý đến 2 phần : phần nội dung và phần điều hướng. Và chúng được sắp xếp như sau.

<section class="cd-section">
        <div class="cd-block">
            <div class="cd-half-block"></div>

            <div class="cd-half-block">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores eos labore ratione illum excepturi neque sunt blanditiis ducimus soluta quae!
                </p>
            </div>
        </div>
    </section> <!-- .cd-section -->

    <section class="cd-section">
        <div class="cd-block">
            <div class="cd-half-block"></div>

            <div class="cd-half-block">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores eos labore ratione illum excepturi neque sunt blanditiis ducimus soluta quae!
                </p>
            </div>
        </div>
    </section> <!-- .cd-section -->

    <section class="cd-section">
        <div class="cd-block">
            <div class="cd-half-block"></div>

            <div class="cd-half-block">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maiores eos labore ratione illum excepturi neque sunt blanditiis ducimus soluta quae!
                </p>
            </div>
        </div>
    </section> <!-- .cd-section -->

    <nav>
        <ul class="cd-vertical-nav">
            <li><a href="#0" class="cd-prev inactive">Next</a></li>
            <li><a href="#0" class="cd-next">Prev</a></li>
        </ul>
    </nav> <!-- .cd-vertical-nav -->

CSS
Và mỗi phần sẽ được định dạng với đoạn css sau :

/* -------------------------------- 

Main Components 

-------------------------------- */
@media only screen and (min-width: 1170px) {
  .cd-section {
    height: 100vh;
  }
}
.cd-section h1 {
  position: relative;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  font-size: 2.6rem;
}
@media only screen and (min-width: 768px) {
  .cd-section h1 {
    font-size: 3.2rem;
  }
}
@media only screen and (min-width: 1170px) {
  .cd-section h1 {
    font-size: 4.2rem;
  }
}

.cd-block, .cd-half-block {
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

.cd-block {
  -webkit-transform-origin: center center;
  -moz-transform-origin: center center;
  -ms-transform-origin: center center;
  -o-transform-origin: center center;
  transform-origin: center center;
}
.cd-section:first-of-type .cd-block {
  visibility: visible;
  height: 100vh;
  background-color: #263b40;
}
@media only screen and (min-width: 1170px) {
  .cd-block {
    position: fixed;
    width: 100%;
    min-height: 100vh;
    top: 0;
    left: 0;
    height: 100vh;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.7);
    visibility: hidden;
  }
  .cd-section:first-of-type .cd-block {
    visibility: visible;
  }
  .cd-block > * {
    visibility: visible;
  }
}

.cd-half-block {
  background: #ffffff;
  color: #263b40;
}
.cd-half-block:nth-of-type(1) {
  height: 60vh;
  background-color: #263b40;
  background-position: center center;
  background-repeat: no-repeat;
}
.cd-half-block:nth-of-type(2) {
  padding: 4em 10%;
}
.cd-half-block p {
  font-size: 1.8rem;
  line-height: 1.8;
}
.cd-section:nth-of-type(2) .cd-half-block:first-of-type {
  background-image: url("../img/img-1.jpg");
  background-size: cover;
}
.cd-section:nth-of-type(3) .cd-half-block:first-of-type {
  background-image: url("../img/img-2.jpg");
  background-size: cover;
}
.cd-section:nth-of-type(4) .cd-half-block:first-of-type {
  background-image: url("../img/img-3.jpg");
  background-size: cover;
}
@media only screen and (min-width: 1170px) {
  .cd-half-block {
    height: 100vh !important;
    width: 50%;
    position: absolute;
    top: 0;
  }
  .cd-half-block p {
    position: absolute;
    left: 50%;
    top: 50%;
    bottom: auto;
    right: auto;
    -webkit-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -ms-transform: translateX(-50%) translateY(-50%);
    -o-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    width: 100%;
    padding: 0 30%;
    font-size: 2.4rem;
  }
  .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;
    -webkit-transform: translateX(-100%);
    -moz-transform: translateX(-100%);
    -ms-transform: translateX(-100%);
    -o-transform: translateX(-100%);
    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;
    -webkit-transform: translateX(100%);
    -moz-transform: translateX(100%);
    -ms-transform: translateX(100%);
    -o-transform: translateX(100%);
    transform: translateX(100%);
  }
}

.cd-vertical-nav {
  position: fixed;
  z-index: 1;
  right: 3%;
  top: 50%;
  bottom: auto;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);
  display: none;
}
.cd-vertical-nav a {
  display: block;
  height: 40px;
  width: 40px;
  /* image replace */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  background: transparent url(../img/cd-icon-arrow.svg) no-repeat center center;
  -webkit-transition: opacity 0.2s 0s, visibility 0.2s 0s;
  -moz-transition: opacity 0.2s 0s, visibility 0.2s 0s;
  transition: opacity 0.2s 0s, visibility 0.2s 0s;
}
.cd-vertical-nav a.cd-prev {
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
  margin-bottom: 10px;
}
.cd-vertical-nav a.inactive {
  visibility: hidden;
  opacity: 0;
  -webkit-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  -moz-transition: opacity 0.2s 0s, visibility 0s 0.2s;
  transition: opacity 0.2s 0s, visibility 0s 0.2s;
}
@media only screen and (min-width: 1170px) {
  .cd-vertical-nav {
    display: block;
  }
}

jQuery
Cuối cùng là các bạn sử dụng đoạn script sau để tạo hiệu ứng.

jQuery(document).ready(function($){
    //change this value if you want to change the speed of the scale effect
    var scaleSpeed = 0.3,
    //change this value if you want to set a different initial opacity for the .cd-half-block
        boxShadowOpacityInitialValue = 0.7,
        animating = false; 
     
    //check the media query 
    var MQ = window.getComputedStyle(document.querySelector('body'), '::before').getPropertyValue('content').replace(/"/g, "");
    $(window).on('resize', function(){
        MQ = window.getComputedStyle(document.querySelector('body'), '::before').getPropertyValue('content').replace(/"/g, "");
    });

    //bind the animation to the window scroll event
    triggerAnimation();
    $(window).on('scroll', function(){
        triggerAnimation();
    });

    //move to next/previous section
    $('.cd-vertical-nav .cd-prev').on('click', function(){
        prevSection();
    });
    $('.cd-vertical-nav .cd-next').on('click', function(){
        nextSection();
    });
    $(document).keydown(function(event){
        if( event.which=='38' ) {
            prevSection();
            event.preventDefault();
        } else if( event.which=='40' ) {
            nextSection();
            event.preventDefault();
        }
    });

    function triggerAnimation(){
        if(MQ == 'desktop') {
            //if on desktop screen - animate sections
            (!window.requestAnimationFrame) ? animateSection() : window.requestAnimationFrame(animateSection);
        } else {
            //on mobile - remove the style added by jQuery 
            $('.cd-section').find('.cd-block').removeAttr('style').find('.cd-half-block').removeAttr('style');
        }
        //update navigation arrows visibility
        checkNavigation();
    }
     
    function animateSection () {
        var scrollTop = $(window).scrollTop(),
            windowHeight = $(window).height(),
            windowWidth = $(window).width();
         
        $('.cd-section').each(function(){
            var actualBlock = $(this),
                offset = scrollTop - actualBlock.offset().top,
                scale = 1,
                translate = windowWidth/2+'px',
                opacity,
                boxShadowOpacity;

            if( offset >= -windowHeight && offset <= 0 ) {
                //move the two .cd-half-block toward the center - no scale/opacity effect
                scale = 1,
                opacity = 1,
                translate = (windowWidth * 0.5 * (- offset/windowHeight)).toFixed(0)+'px';

            } else if( offset > 0 && offset <= windowHeight ) {
                //the two .cd-half-block are in the center - scale the .cd-block element and reduce the opacity
                translate = 0+'px',
                scale = (1 - ( offset * scaleSpeed/windowHeight)).toFixed(5),
                opacity = ( 1 - ( offset/windowHeight) ).toFixed(5);

            } else if( offset < -windowHeight ) {
                //section not yet visible
                scale = 1,
                translate = windowWidth/2+'px',
                opacity = 1;

            } else {
                //section not visible anymore
                opacity = 0;
            }
             
            boxShadowOpacity = parseInt(translate.replace('px', ''))*boxShadowOpacityInitialValue/20;
             
            //translate/scale section blocks
            scaleBlock(actualBlock.find('.cd-block'), scale, opacity);

            var directionFirstChild = ( actualBlock.is(':nth-of-type(even)') ) ? '-': '+';
            var directionSecondChild = ( actualBlock.is(':nth-of-type(even)') ) ? '+': '-';
            if(actualBlock.find('.cd-half-block')) {
                translateBlock(actualBlock.find('.cd-half-block').eq(0), directionFirstChild+translate, boxShadowOpacity);
                translateBlock(actualBlock.find('.cd-half-block').eq(1), directionSecondChild+translate, boxShadowOpacity); 
            }
            //this is used to navigate through the sections
            ( offset >= 0 && offset < windowHeight ) ? actualBlock.addClass('is-visible') : actualBlock.removeClass('is-visible');        
        });
    }

    function translateBlock(elem, value, shadow) {
        var position = Math.ceil(Math.abs(value.replace('px', '')));
         
        if( position >= $(window).width()/2 ) {
            shadow = 0; 
        } else if ( position > 20 ) {
            shadow = boxShadowOpacityInitialValue;
        }

        elem.css({
            '-moz-transform': 'translateX(' + value + ')',
            '-webkit-transform': 'translateX(' + value + ')',
            '-ms-transform': 'translateX(' + value + ')',
            '-o-transform': 'translateX(' + value + ')',
            'transform': 'translateX(' + value + ')',
            'box-shadow' : '0px 0px 40px rgba(0,0,0,'+shadow+')'
        });
    }

    function scaleBlock(elem, value, opac) {
        elem.css({
            '-moz-transform': 'scale(' + value + ')',
            '-webkit-transform': 'scale(' + value + ')',
            '-ms-transform': 'scale(' + value + ')',
            '-o-transform': 'scale(' + value + ')',
            'transform': 'scale(' + value + ')',
            'opacity': opac
        });
    }

    function nextSection() {
        if (!animating) {
            if ($('.cd-section.is-visible').next().length > 0) smoothScroll($('.cd-section.is-visible').next());
        }
    }

    function prevSection() {
        if (!animating) {
            var prevSection = $('.cd-section.is-visible');
            if(prevSection.length > 0 && $(window).scrollTop() != prevSection.offset().top) {
                smoothScroll(prevSection);
            } else if(prevSection.prev().length > 0 && $(window).scrollTop() == prevSection.offset().top) {
                smoothScroll(prevSection.prev('.cd-section'));
            }
        }
    }

    function checkNavigation() {
        ( $(window).scrollTop() < $(window).height()/2 ) ? $('.cd-vertical-nav .cd-prev').addClass('inactive') : $('.cd-vertical-nav .cd-prev').removeClass('inactive');
        ( $(window).scrollTop() > $(document).height() - 3*$(window).height()/2 ) ? $('.cd-vertical-nav .cd-next').addClass('inactive') : $('.cd-vertical-nav .cd-next').removeClass('inactive');
    }

    function smoothScroll(target) {
        animating = true;
        $('body,html').animate({'scrollTop': target.offset().top}, 500, function(){ animating = false; });
    }
});

Đoạn code tuy dài nhưng không khó để hiểu, mình mong là hiệu ứng này sẽ giúp các bạn có thêm ý tưởng thiết kế cho trang web hay blog của mình.