Tìm hiểu kĩ thuật parallax scrolling trong làm website

Bài đăng này đã không được cập nhật trong 9 năm

Với sự phát triển không ngừng nghỉ của khoa học kĩ thuật web : html, css3, javascript. Là khi chúng ta sự truyển tải thông điệp từ nhà thiết kế tới người sử dụng và khi khách hàng sử dụng cảm nhận và đánh giá là dễ sử dụng,giao diên thân thiện,sự tiện ích hiệu quả mà từng sản phẩm chúng ta làm ra. Ví dụ : Bạn xây 1 ngôi nhà thì nó phải giống 1 ngồi nhà trước đã, ai lại giống cái chuồng gà..."
Hôm nay mình rất vui được giới thiệu với cái bạn về 1 kĩ thuật "Parallax Scrolling". Việc tạo ra trải nghiệm mới lạ, khiến website thêm sinh động.
Kỹ thuật Parallax Scrolling được Ian Coyle tạo ra và áp dụng lần đầu tiên cho website Nike Better World 2011(https://web.archive.org/web/20110106031017id_/http://nikebetterworld.com/index) và cho đến hôm nay vẫn còn đang được sử dụng rộng rãi cho nhiều website trên thế giới.
Trong ngắn hạn, di chuyển parallax scrolling tạo ra ảo giác về chiều sâu trong một môi trường 2D bằng cách di chuyển hai hoặc nhiều đối tượng cùng lúc ở vận tốc khác nhau.
Bạn cũng có thể tìm thấy rất nhiều video hướng dẫn và các khóa học thiết kế web trên như thế nào để tạo ra các hiệu ứng di chuyển parallax scrolling trên Web.Hôm nay chúng tôi sẽ "hướng dẫn người mới bắt đầu với HTML" miễn phí về parallax scrolling.
Hãy đọc tiếp nếu bạn muốn tìm hiểu làm thế nào để tạo ra hiệu ứng thị parallax scrolling của riêng bạn từ đầu. Tuy nhiên nếu bạn không có thời gian, hoặc chỉ cần không cảm thấy thích nó, các thư viện sau đây sẽ làm rất nhiều công việc cho bạn: parallax.js stellar.js
Một số thứ cần chuẩn bị khi chúng ta bắt đầu: Thực hiện một hiệu ứng parallax có thể từ tinh tế đến phức tạp và các kỹ năng kỹ thuật cần thiết để tạo ra hiệu ứng như vậy dao động từ đơn giản đến phức tạp. Cũng như chi phí thời gian, một hệ quả khác của sự phức tạp cao có thể giảm hiệu suất. Hãy chắc chắn để chịu những điểm này trong khi lập kế hoạch của bạn và cố gắng để tránh ảnh hưởng đến khả năng sử dụng và hiệu suất. Làm thế nào chính xác, bạn sẽ làm thay đổi rất nhiều tùy thuộc vào dự án của bạn.
Tạo hiệu ứng : Tôi sẽ cho bạn thấy chỉ là một phương pháp để tạo một hiệu ứng parallax
HTML: Đầu tiên, chúng ta hãy tạo ra hai container trong html

<div class="background1 container"> <h2>The first box!</h2> </div>
<div class="background2 container"> <h2>The second box!</h2> </div>

CSS: Ở đây chúng ta áp dụng một số padding thật lớn để container của chúng đủ lớn để hiện thị rõ ràng ảnh hưởng. Chúng tôi cũng chỉ định một hình nền độc đáo cho mỗi người.

 .container {
   padding: 400px 200px;
  }
 .background1 {
 background: transparent url("img/background1.png") center 0 no-repeat;
   }
 .background2 {
 background: transparent url("img/background2.png") center 0 no-repeat;  }

Js: Chúng ta bắt đầu bằng cách thiết lập một vài biến; $window và tốc độ.Sử dụng ypos nền hình với khoảng cách trang đã cuộn từ trên đầu.

 var $window = $(window);
 var speed = 0.4;
 function update(){
 var ypos = $window.scrollTop();
 $('.container').each(function() {
 var $element = $(this);
 var height = $element.height();
 $(this).css('backgroundPosition', '50% ' + Math.round((height - ypos) * speed) + 'px');
 });
 };
 $window.bind('scroll', update);

Khi đã nắm bắt được hết về parallax scrolling, hãy thử áp dụng nó vào thực tế. Parallax Scrolling có thể giúp bạn làm 1 trang web hoành tráng.Khi kết hợp parallax scrolling với css3 sẽ tạo ra những điều không thể tưởng.Hi vọng là bài viết của mình có thể khiến các bạn thích thú với hiệu ứng này hoặc là tạo thêm cảm hứng sáng tạo cho các bạn trong việc thiết kế một trang web đẹp mắt, sinh động.Chúc các bạn may mắn. Các bạn cũng có thể tham khảo qua video sau:

https://www.youtube.com/embed/D75WTf_Y738

Cảm ơn các bạn đã theo dõi bài viết của tôi,tuy rất nhàn chán nhưng sẽ rất bổ ích cho công nghệ làm web. Một số trang web sử dụng kĩ thuật parallax scrolling các bạn có thể tham khảo : http://everylastdrop.co.uk/ , http://journey.lifeofpimovie.com/

Mục lục