Parallax là gì

Với vấn đề cải tiến và phát triển mau lẹ của rất nhiều công nghệ website nhỏng HTML5, CSS3, Javascript và không chỉ có thế là mức độ sáng chế giới hạn max của các Web Designer, việc tạo thành các đề nghị mớ lạ và độc đáo, khiến những website thêm tấp nập không hề là cthị xã cực nhọc nữa.

Bạn đang xem: Parallax là gì

Hôm ni bản thân xin ra mắt một chuyên môn được Thành lập và hoạt động từ năm 2011 (hơi là thọ rồi), chính là “Parallax Scrolling”.

Kỹ thuật Parallax Scrolling được Ian Coyle tạo thành và vận dụng lần đầu tiên mang đến trang web Nike Better World 2011 và cho tới từ bây giờ vẫn còn đang rất được áp dụng rộng rãi mang lại những website bên trên trái đất.

Xem thêm: Game Nấu Ăn Miễn Phí - Game Nấu Ăn Trò Chơi Thời Trang

*
*
*
Kỹ thuật Parallax Scrolling - Phần 1 213" data-src="https://thachpsay mê.com/wp-content/uploads/2014/03/parallax-scrolling-coban.png" data-sizes="(max-width: 820px) 100vw, 820px" class="aligncenter wp-image-15492 lazyload" src="https://thachptê mê.com/data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="> Kỹ thuật Parallax Scrolling - Phần 1 214">

Việc của bọn họ là sẽ sử dụng jquery nhằm bind sự kiện scroll con chuột của người dùng cùng thông qua sự khiếu nại đó nhằm cập nhật lại chỉ số top của background, đúng mực rộng là class bg. Chỉ số này đã đổi khác theo tốc độ mà lại bọn họ nguyên lý.

Điều nhưng mà chúng ta muốn thấy sinh sống đây là lúc ta cuộn loài chuột xuống, background đang dịch rời theo hướng lên trên mặt và ngược chở lại với lúc ta cuộn con chuột lên. Vậy nghĩa là thông số lúc ta cuộn chuột (scrollPos) vẫn luôn luôn luôn luôn đối ngược với chỉ số top của background. Ta tất cả công thức sau:

background-top-position = 0 - scroll-bar-position

Công thức trên hoàn toàn có thể đuợc biến hóa dựa vào vận tốc mà lại bọn họ mong muốn thấy làm việc background khi đưa động:

background-top-position = 0 - (speed * scroll-bar-position)

Chúng ta bao gồm đoạn code sau:

$(document).ready(function() $(window).bind("scroll", function() parallax(); ); ); // Function tạo parallax effect // vận tốc được lý lẽ do phát triển thành tốc độ - tính năng này đổi khác theo ý thích // scrollPos rước vị trí hiện giờ của tkhô giòn cuộn function parallax() var scrollPos = $(window).scrollTop(), tốc độ = 0.2; $(".bg").css("top", (0 - (scrollPos * speed)) + "px"); Sau Khi sẽ hoàn toàn, chúng ta hãy F5 lại một đợt nữa giúp thấy hiệu quả tất cả như muốn đợi không nào?

Lời Kết

Vậy là họ vẫn những bước đầu có tác dụng quen với cùng 1 kỹ thuật siêu độc đáo vào Web kiến thiết. Và ở trong phần sau mình đang tiến hành parallax scrolling với tương đối nhiều một số loại element, ví dụ như image tốt text ngơi nghỉ phần nhiều tốc độ scroll khác nhau để đem đến hiệu ứng bắt mắt hơn.

Xem thêm: Download 4 U: Kmspico 9 - Sheltonstallings07 On Buzzfeed

Mình cũng hi vọng qua bài xích này sẽ có ai kia Cảm Xúc hứng trúc cùng với câu hỏi mày mò những nghệ thuật về Web kiến thiết. Có rất nhiều sản phẩm khôn xiết thú vui tới từ công việc Web thiết kế đã cần được chúng ta khám phá kia.

Trước Lúc chào tạm biệt mình gửi chúng ta trang web boy-coy.com . Mình vẫn chết mê với nó đấy!


Chuyên mục: Hỏi đáp công nghệ