CĂN BẢN
CSS3
CSS RESPONSIVE
CSS PARALLAX
CÁC CHỦ ĐỀ
BÀI MỚI NHẤT
Dự án mới của mình là gamehow.net, mời anh em ghé thăm và góp ý ạ.

Parallax - Hiệu ứng Parallax là gì?

Chào các bạn, chúng ta lại gặp nhau. Hôm nay, freetuts sẽ hướng dẫn các bạn tạo một landing page hoàn chỉnh cùng với hiệu ứng parallax. Để tiện cho việc theo dõi chuỗi bài viết này, chúng ta sẽ tìm hiểu sơ lược cũng như bố cục cơ bản trang web mà chúng ta hoàn thành sau khi kết thúc series này nhé.

1. Parallax là gì?

Parallax là hiệu ứng mà hình nền của trang web sẽ di chuyển với những tốc độ khác nhau so với các đối tượng khác khi lăn chuột cuộn xuống hoặc lên. Thậm chí, một số trang web còn làm hiện ứng theo cách cuộn ngang.

banquyen png
Bài viết này được đăng tại freetuts.net, không được copy dưới mọi hình thức.

Lịch sử hình thành hiệu ứng này xuất phát điểm từ giao diện game nhưng trong những năm gần đây nó đã lan rộng và trở thành một xu thế mới trong thiết kế website hiện đại. Xem ví dụ bên dưới

Từ parallax xuất phá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 thế giới kỹ thuật, một lập trình viên có thể tạo ra hiệu ứng này bằng nhiều cách khác nhau.

Để bắt đầu cho một trang web có hiệu ứng parallax, thì chúng ta phải lên ý tưởng từ bố cục cho đến các đổi tượng chuyển động như hình ảnh hoặc đoạn văn bản. Việc định hình nói trên sẽ tạo cho người xem cảm giác khác lạ như rơi vào một không gian đa chiều trong không gian.

2. Ý tưởng chia bố cục cho trang Parallax

Hiện nay, có vô vàng ý tưởng để tạo nên một trang web với hiệu ứng parallax, các bạn có thể dùng từ khóa parallax để tìm kiếm. Nhìn chung, thì đa phần các trang web đó đều có những bố cục chung như sau:

Chuỗi ảnh nền: Ảnh nền chắc chắn sẽ là một đối tượng không thể thiếu trong web với hiệu ứng parallax. Lưu ý bạn có thể sử dụng một ảnh nền với kích thước dài hoặc nhiều ảnh nền để thể hiện những nội dung khác nhau.

div.forest {
  background-image: url("forest.jpg");
}

div.eagle {
  background-image: url("eagle.jpg");
}

div.rhino {
  background-image: url("rhino.jpg");
}

div.owl {
  background-image: url("owl.jpg");
}

div.lion {
  background-image: url("lion.jpg");
}

div.bear {
  background-image: url("bear.jpg");
}

div.back {
  background-image: url("back.jpg");
  justify-content: center;
}

Thanh menu dọc hoặc ngang: với những trang web này thì gần như thành menu trở nên không cần thiết nữa nhưng với việc thêm vào thanh menu và những hiệu ứng chuyển động của nó làm web trở nên bắt mắt.

    <div class="side-menu">
      <ul>
        <li class="forest" onclick="moveToImage('.forest')">Forest</li>
        <li class="eagle" onclick="moveToImage('.eagle')">Eagle</li>
        <li class="rhino" onclick="moveToImage('.rhino')">Rhino</li>
        <li class="owl" onclick="moveToImage('.owl')">Owl</li>
        <li class="lion" onclick="moveToImage('.lion')">Lion</li>
        <li class="bear" onclick="moveToImage('.bear')">Bear</li>
      </ul>
    </div>

Chuỗi nhạc nền: âm thanh là một phần không thể thiếu, bởi vì parallax xuất phát từ game nên việc bổ trợ âm thanh sẽ rất cần thiết. Thường lệ trong trang web chúng ta dùng những âm thanh nhẹ, thanh hoặc dịu dàng để tạo cảm giác thoải mái cho người dùng, cũng như kết hợp với với hiệu ứng cuộn.

<audio src=".forest.mp3" controls autoplay>
      <p>If you are reading this, it is
       because your browser does not support the audio element.</p>
</audio>

Các đối tượng cuyển động: ảnh động hoặc ảnh vector sẽ được dùng nhiều với những ưu điểm riêng vì có thể thao tác thay đổi màu sắc cũng như những chuyển động phức tạp mà ảnh thường không làm được.

<div class="shape">
  <img src="eagle.svg">
  <img src="rhino.svg">
  <img src="owl.svg">
  <img src="lion.svg">
  <img src="bear.svg">
</div>

Trang mở đầu và kết thúc: Tùy từng nội dung mà sẽ khai thác trang mở đầu và kết thúc. Trong loạt bài viết này, freetuts cũng sẽ hướng dẫn các bạn thực hiện các trang đó.

<div class="forest"></div>
<div class="back">
  <div onclick="goHome()">
    <span><i class="fa fa-hand-pointer-o" aria-hidden="true"></i></span>
  </div>
</div>

Trong loạt bài viết này, freetuts sẽ lần lượt hướng dẫn các bạn từng bước cụ thể trong danh sách trên để tạo ra một trang parallax hoàn chỉnh.

3. Lời kết

Như vậy là đã xong phần tìm hiểu và cách thức bố cục của trang web với hiệu ứng parallax, cũng qua đây các bạn đã hiểu hiệu ứng parallax là gì rồi phải không nào. Các bạn hãy xem tiếp bài học tiếp theo nhé.

Cùng chuyên mục:

Validate form bằng HTML5

Validate form bằng HTML5

Trước đây chúng ta hay validate form bằng Javascript, nhưng ...

Thẻ aside trong HTML5

Thẻ aside trong HTML5

Mình cũng không rõ người ta tạo ra thẻ này làm gì, nhưng nếu xét…

Thẻ hgroup trong HTML5

Thẻ hgroup trong HTML5

hgroup là một thẻ được thêm vào kể từ phiên bản ...

Thẻ header trong HTML5

Thẻ header trong HTML5

Nếu nhìn qua một trang web được xây dựng bằng HTML5 thì bạn ...

Các thẻ HTML tạo form thu thập dữ liệu

Các thẻ HTML tạo form thu thập dữ liệu

Trước khi bắt đầu thì bạn phải hiểu khái niệm form dữ liệu là ...

Tạo background và đường viền cho thẻ HTML

Tạo background và đường viền cho thẻ HTML

Để tạo màu nền cho một thẻ HTML bất kì thì ta sử dụng thuộc…

Tạo menu một cấp bằng HTML đơn giản

Tạo menu một cấp bằng HTML đơn giản

Để làm menu 1 cấp thì có rất nhiều giải pháp. Bạn có thể sử…

Tạo HTML danh sách bài viết đơn giản

Tạo HTML danh sách bài viết đơn giản

Mục đích mình đưa ra bài tập này là giúp các bạn hiểu được cách…

Tạo bổ cục layout HTML đơn giản

Tạo bổ cục layout HTML đơn giản

Qua bài học này bạn sẽ biết cách tạo một file style riêng để ..

Phân biệt ID và Class trong HTML

Phân biệt ID và Class trong HTML

Mỗi thẻ HTML đều có những thuộc tính riêng và khác nhau. Tuy nhiền ..

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Cách dùng thẻ div trong HTML để tạo các khối giao diện

Thẻ div đóng vai trò rất quan trọng, nó được dùng để tạo ...

Phân biệt thẻ HTML Block và Inline

Phân biệt thẻ HTML Block và Inline

Có bao giờ bạn thắc mắc rằng, tại sao nội dung ...

Thuộc tính style trong HTML

Thuộc tính style trong HTML

Do chúng ta chưa học CSS nên mình sẽ không nói ...

Thẻ title trong HTML

Thẻ title trong HTML

Cách sử dụng thẻ title html ...

Thẻ style trong HTML

Thẻ style trong HTML

Style là một thẻ HTML bình thường, nó có công dụng là xác ...

Thẻ base trong HTML

Thẻ base trong HTML

Cách sử dụng thẻ base trong html ...

Thẻ link trong HTML

Thẻ link trong HTML

Cách sử dụng thẻ html ...

Thẻ meta trong HTML

Thẻ meta trong HTML

Cách sử dụng thẻ meta html ...

Thẻ script trong HTML

Thẻ script trong HTML

Cách sử dụng thẻ script html ...

Thẻ noscript trong HTML

Thẻ noscript trong HTML

Cách sử dụng thẻ noscript html ...

Top