Cách tạo hiệu ứng Parallax scrolling cho website cực ấn tượng

Xin chào các bạn, hôm nay chúng ta sẽ đến với một chủ đề về lập trình frontend. Bài viết này sẽ giải đáp giúp bạn hiệu ứng parallax scrolling là gì, nó có tác dụng như thê nào và cách áp dụng hiệu ứng này vào website của bạn.

Một website không có hiệu ứng hình ảnh hay một sự chuyển động nào sẽ giống như một bức tường dán giấy báo và quảng cáo ngày xưa. Chúng ta có thể hiểu đơn giản hiệu ứng là những công cụ để “make-up” tăng thêm sự lôi cuốn cho website, giữ chân người xem lâu hơn và tạo sự thích thú để họ tìm tòi khám phá website của mình. Trong bài hướng dẫn này, Share kỹ năng sẽ hướng dẫn cách tạo hiệu ứng parallax scrolling mang đến sự ấn tượng cho website của bạn.

1. Parallax scrolling là gì?

“Parallax” xuất phát từ thuật ngữ trong thiên văn học, miêu tả sử biểu hiện hướng di chuyển khác nhau khi nhìn chúng với các góc nhìn khác nhau.

Trong thuật ngữ lập trình, Parallax scrolling (cuộn song song) là hiệu ứng khi các yếu tố đồ họa / văn bản ở đằng trước chuyển động lệch với tốc độ chuyển động của hình nền (background), hình thành cảm giác giữa chúng có khoảng cách, khiến cho website của bạn có hiệu ứng không gian đa chiều cực tinh tế.

Một developer có thể tạo ra hiệu ứng này bằng việc kết hợp nhiều ngôn ngữ như HTML, CSS, Javascript.

Nếu ứng dụng hợp lý, parallax có thể đem lại những trải nghiệm vô cùng thú vị, khiến người xem ấn tượng mạnh với website. Tuy nhiên, nếu không được thiết kế tốt, hiệu ứng này sẽ làm cho website trở nên hỗn độn, gây khó chịu cho người dùng, làm giảm hiệu quả mục đích trang.

2. Các cách tạo hiệu ứng Parallax scrolling

Trong phần này mình giới thiệu đến cho các bạn hai cách tạo hiệu ứng Parallax scrolling để tham khảo. các bạn có thể lựa chọn phù hợp với dự án của mình.

Tạo hiệu ứng Parallax scrolling chỉ với HTML và CSS

Chuẩn bị bố cục HTML

<main class="wrapper">
  <section class="section parallax bg1">
    <h1>Such Adorableness</hi>
  </section>
  <section class="section static">
    <h1>Funny facts about cat</h1>
    <p>In terms of development, the first year of a cat’s life is equal to the first 15 years of a human life. 
      <br>After its second year, a cat is 25 in human years.<br> And after that, each year of a cat’s life is equal to about 7 human years.
Cats can rotate their ears 180 degrees.</p>
  </section>
  <section class="section parallax bg2">
    <h1>SO FWUFFY AWWW</hi>
  </section>
</main>

Áp dụng CSS

/* Tiny reset thingy */
body,html{margin:0;padding:0;}

.wrapper {
  /* The height needs to be set to a fixed value for the effect to work.
   * 100vh is the full height of the viewport. */
  height: 100vh;
  /* The scaling of the images would add a horizontal scrollbar, so disable x overflow. */
  overflow-x: hidden;
  /* Enable scrolling on the page. */
  overflow-y: auto;
  /* Set the perspective to 2px. This is essentailly the simulated distance from the viewport to transformed objects.*/
  perspective: 2px;
}

.section {
  /* Needed for children to be absolutely positioned relative to the parent. */
  position: relative;
  /* The height of the container. Must be set, but it doesn't really matter what the value is. */
  height: 100vh;
  
  /* For text formatting. */
  display: flex;
  align-items: center;
  text-align: center;
  flex-direction: column;
  padding: 30px;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 25px;
}

.parallax::after {
  /* Display and position the pseudo-element */
  content: " ";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  
  /* Move the pseudo-element back away from the camera,
   * then scale it back up to fill the viewport.
   * Because the pseudo-element is further away, it appears to move more slowly, like in real life. */
  transform: translateZ(-1px) scale(1.5);
  /* Force the background image to fill the whole element. */
  background-size: 100%;
  /* Keep the image from overlapping sibling elements. */ 
  z-index: -1;
}

/* The styling for the static div. */
.static {
  background: red;
}

/* Sets the actual background images to adorable kitties. This part is crucial. */
.bg1::after {
  background-image: url('https://placekitten.com/g/900/700');
}

.bg2::after {
  background-image: url('https://placekitten.com/g/800/600');
}

Cuối cùng chúng ta được kết quả demo như sau

Tạo hiệu ứng Parallax scrolling dạng sticky stack với javascript

Trong phần này, mình sẽ hướng dẫn bạn tạo hiệu ứng Parallax scrolling sử dụng một plugin jQuery.

Plugin này có tên StickyStack giúp tạo hiệu ứng xếp chồng trong quá trình scroll.

Chuẩn bị bố cục HTML

<div class="main-content-wrapper">
  <!-- section 1 -->
  <section id="one">
    <h1>StickyStack.js</h1>
    <p class="helper">A jQuery plugin that creates a <em>stacking</em> effect by <em>sticking</em> panels as they reach the top of the viewport.</p>
    <br />
    <div class="button-wrapper">
      <a href="github.com/mike-zarandona/StickyStack.js/archive/master.zip" class="btn">Download</a>
      <a href="https://github.com/mike-zarandona/StickyStack.js" class="btn" target="_blank">GitHub</a>
    </div><!--/.button-wrapper-->
  </section>

  <!-- section 2-->
  <section id="two">
    <div class="shadow">
      <h1>Long pages feel like a stack of cards</h1>
     </div><!--/.shadow-->
  </section>

  <!-- section 3 -->
  <section>
    <div class="shadow">
      <h1>Usage</h1>
      <p><code><pre>$('.main-content-wrapper').stickyStack();
      </pre></code></p>
    </div>
  </section>
    
  <!-- section 4 -->
  <section>
    <div class="shadow">
    <h1>Options</h1>
      <p><code><pre>$('.main-content-wrapper').stickyStack({
  containerElement: '.main-content-wrapper',
  stackingElement: 'section',
  boxShadow: '0 -3px 20px rgba(0, 0, 0, 0.25)'
});
      </pre></code></p>
    </div><!--/.shadow-->
    
  </section>

  <section>
    <p>Enjoy.</p>
    <div class="button-wrapper">
      <a href="https://github.com/mike-zarandona/StickyStack.js/archive/master.zip" class="btn">Download</a>
      <a href="https://github.com/mike-zarandona/StickyStack.js" class="btn" target="_blank">GitHub</a>
    </div><!--/.button-wrapper-->
    <small>by <a href="https://twitter.com/mikezarandona" target="_blank">mike zarandona</a></small>
  </section>
</div><!--/.main-content-wrapper-->

Áp dụng CSS

Thêm đoạn css sau vào thẻ <style>

body {
  font: 16px/1.5em 'Open Sans', 'Open Sans', sans-serif;
}
a {
  color: #fff;
  -webkit-transition: all 300ms;
  -moz-transition: all 300ms;
  -o-transition: all 300ms;
  transition: all 300ms;
}
a:hover {
  background-color: #fff;
  color: #111;
}
small {
  font-size: 10px;
  clear: both;
  display: block;
}
section {
  background-color: #303030;
  color: #fff;
  padding: 1em 2em;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background-size: cover;
  background-position: 50% 50%;
  display: block;
}
section.stuck + section:not(.stuck) {
  box-shadow: 0 -3px 20px rgba(0, 0, 0, 0.5);
}
section:before {
  content: '';
  display: block;
  position: absolute;
  background-color: rgba(0, 0, 0, 0.65);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
}
section:nth-child(1) {
  pading-top: 200px;
  text-align: center;
  background-image: url('https://picsum.photos/1600/900?image=1029');
  background-size: cover;
  background-position: 50% 50%;
  position: relative;
}
section:nth-child(1) h1 {
  margin-top: 160px;
  margin-bottom: 0;
  line-height: 1em;
  font: 300 48px/1.2em 'Open Sans', sans-serif;
}
section:nth-child(1) .helper {
  font-size: 14px;
  width: 50%;
  margin: 1em auto;
  line-height: 1.5em;
}
section:nth-child(2) {
  background-image: url('https://picsum.photos/1600/900?image=991');
  position: relative;
}
section:nth-child(2):before {
  display: none;
}
section:nth-child(2) h1 {
  font: 300 42px/1.3em 'Open Sans', sans-serif;
}
section:nth-child(3) {
  background-image: url('https://picsum.photos/1600/900?image=988');
}
section:nth-child(3) h1 {
  font-weight: 300;
  margin-bottom: 1em;
  line-height: 1.2em;
}
section:nth-child(3):before {
  display: none;
}
section:nth-child(4) {
  background-image: url('https://picsum.photos/1600/900?image=884');
}
section:nth-child(4):before {
  display: none;
}
section:nth-child(4) .shadow {
  position: absolute;
  bottom: 40px;
  left: 20px;
}
section:nth-child(4) h1 {
  font-weight: 300;
  line-height: 1.2em;
}
section:nth-child(5) {
  background-image: url('http://unsplash.it/1600/900?image=896');
  background-position: 50% 100%;
  padding-top: 30%;
  text-align: center;
}
/* Modular Styles */
h1 {
  font-size: 3em;
}
.button-wrapper {
  margin: 0 auto;
  padding: 0px;
  width: 320px;
  position: relative;
  clear: both;
}
.button-wrapper .btn + .btn {
  margin-left: -4px;
}
.btn {
  padding: 10px;
  font: bold 16px/1.2em sans-serif;
  border: 2px solid #fff;
  -webkit-border-radius: 3px;
  -webkit-background-clip: padding-box;
  -moz-border-radius: 3px;
  -moz-background-clip: padding;
  border-radius: 3px;
  background-clip: padding-box;
  background-color: transparent;
  text-decoration: none;
  margin: 0.5em auto;
  color: #fff;
  -webkit-transition: 300ms all;
  -moz-transition: 300ms all;
  -o-transition: 300ms all;
  transition: 300ms all;
  display: inline-block;
  box-sizing: border-box;
  width: 49%;
}
.btn:hover {
  background-color: rgba(255, 255, 255, 0.33);
  color: #fff;
  text-shadow: 0 1px 0 #111;
}
.btn:first-of-type {
  margin-right: 2%;
}
.shadow {
  background-color: rgba(0, 0, 0, 0.8);
  padding: 1em;
  border-radius: 5px;
}
.shadow:after {
  display: none;
}
.shadow h1:first-of-type,
.shadow h2:first-of-type,
.shadow h3:first-of-type {
  margin-top: 0;
  margin-bottom: 10px;
}

Sử dụng Parallax Javascript

Trước tiên bạn cần nạp thư viện Parallax js và jQuery vào website

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="./jquery.stickystack.min.js"></script>

Trong đó file jquery.stickystack.min.js bạn có thể download tại github

Tiếp theo bạn sử dụng thư viện Parallax để kích hoạt hiệu ứng

$(window).load(function() {
  $('section').css('min-height', $(window).height());

  $('.main-content-wrapper').stickyStack();
});

Kết quả cuối cùng được demo tại đây

Như vậy là qua bài hướng dẫn trên các bạn đã hiểu hiệu ứng parallax scrolling là gì, cũng như cách tạo ra hiệu ứng này cho website rồi phải không nào. Nếu có bất kỳ thắc mắc cũng như góp ý nào, bạn có thể comment xuống bài viết để chúng ta cùng thảo luận nhé. Chúc các bạn thành công.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *