Tạo trang giới thiệu ấn tượng với CSS3 và jQuery

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.

Xem Demo | Download

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>  

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

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

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

CSS

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

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

Main Components 

-------------------------------- */
@media only screen and (min-awidth: 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-awidth: 768px) {
  .cd-section h1 {
    font-size: 3.2rem;
  }
}
@media only screen and (min-awidth: 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-awidth: 1170px) {
  .cd-block {
    position: fixed;
    awidth: 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-awidth: 1170px) {
  .cd-half-block {
    height: 100vh !important;
    awidth: 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%);
    awidth: 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;
  awidth: 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-awidth: 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).awidth();
		
		$('.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).awidth()/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.

Chúc các bạn thành công !

Chuyên Mục: Css, Javascript

Bài viết được đăng bởi webmaster