Nếu các bạn đang cần tìm một mẫu thiết kế web dùng để giới thiệu công ty hoặc sản phẩm nổi bật nào đó thì thử dùng mẫu 3D Curtain Template mà mình chia sẻ trong bài viết này xem sao. 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.
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.