6 Bước xây dựng Parallax Websites

• Các website với các hình ảnh , text, box... di chuyển
• Đây là lý do tại sao hôm nay chúng tôi sẽ chỉ cho bạn một vài ví dụ thực tế để xây dựng chúng.
• Bạn có thể nghĩ về bài viết này như một bộ sưu tập của các khối xây dựng mà bạn có thể trộn và kết hợp thành trang web tương tác ấn tượng.

Mở Đầu

• Cách thông thường là các trang web này được xây dựng là bằng cách sử dụng một thư viện JavaScript.
• Một số trong những lựa chọn phổ biến là Scrollr, scrollMagic, Parallax.js, scrollReveal.js và ...
• Chúng tôi sẽ sử dụng Scrollr vì nó là phổ biến nhất và và làm việc trên các thiết bị di động.
• Để sử dụng Scrollr, bạn chỉ cần tải nó về và tạo ra một liên kết đến nó trong HTML. Sau khi đã xong, gọi skrollr.init (); sẽ cho phép Scrollr cho tất cả các yếu tố trên trang.

   <script src="assets/skrollr.min.js"></script>
   <script>
      skrollr.init();
   </script>

• Thư viện rất mạnh và bạn có thể tạo ra tất cả các loại hình ảnh di chuyển với nó. Xem các trang web của chúng tôi đã xây dựng với nó
• Muốn tìm hiểu nó được làm thế nào , Hãy vào đọc!

1. Giới thiệu Parallax

• Các parallax là animation di chuyển phổ biến nhất mà chúng ta thấy ngày nay. Nó bao gồm một hình ảnh lớn, cố định và lan khắp nền. Mà chúng ta chỉ thấy một phần tùy thuộc vào mức chúng đã cuộn.
• Khác hơn parallax là chúng chỉ là một hình ảnh bên trong một div wrapper, với chúng chuyển động ở tốc độ khác nhau và một số CSS thông minh.

• demo link : http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/1_parallax_intro.html

2. Body Text

• Ở đây chúng ta có ba đoạn paragraphs sẽ xuất hiện khác nhau. Chúng tôi đã thực hiện điều này bằng cách sử dụng offsets, bắt đầu các hình ảnh động sớm hơn so với bình thường nó cần.

• xem demo ở đây http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/2_body_text.html

3. Feature List

• Feature List là những nơi mà bạn giới thiệu sản phẩm của bạn .Icon lớn và văn bản là phải có, nhưng bạn cũng có thể spice lên với hình ảnh động bắt mắt. Trong ví dụ chúng tôi sẽ cho các tính năng xuất hiện từ những phía khác nhau của màn hình.

• demo link : http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/3_feature_list.html

4. About us

• Phần About us ví dụ của chúng tôi bao gồm các avatar khá tròn xếp trên hai hàng. Các hình ảnh trong hàng đầu tiên được xoay chiều kim đồng hồ và những người vào hàng thứ hai được lật ngang.

link demo: http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/4_about_us.html

5. Gallery

• Chúng tôi đã chuẩn bị một hình ảnh động di chuyển đẹp ví dụ như bộ sưu tập chúng.
• Nó bao gồm một tập hợp các hình ảnh trên hai hàng.
• Hàng đầu tiên di chuyển từ phải sang trái và di chuyển hàng thứ hai theo hướng ngược lại.
• Các animation này có một số thời gian để hoàn thành, và vì chúng ta không muốn bộ sưu tập chúng rời khỏi màn hình mà không kết thúc quá trình chuyển đổi, chúng tôi tạm dừng di chuyển trong một thời gian.

• link demo : http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/5_gallery.html

6. Footer

• Đối với khu vực footer chúng tôi đã sử dụng một trong những mẫu freebie chúng và chúng tôi chỉ thay đổi các màu sắc. Khi di chuyển vào màn hình, độ rộng của thanh tìm kiếm bên trong nó tăng lên.

• link demo : http://demo.tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/6_footer.html

Kết luận

• Tham khảo bài viết ở link http://tutorialzine.com/2015/09/6-practical-examples-for-building-parallax-websites/
• Hy vọng bạn thích ví dụ của chúng tôi! Có rất nhiều thứ bạn có thể tìm hiểu về Scrollr. Nó có một rất tài liệu chi tiết bao gồm mọi khía cạnh của thư viện: https://github.com/Prinzhorn/skrollr#documentation