Với việc phát triển nhanh chóng của những công nghệ web như HTML5, CSS3, Javascript và bên cạnh đó là sức sáng tạo không giới hạn của các Web Designer, việc tạo ra các trải nghiệm mới lạ, khiến các website thêm sinh động không còn là chuyện khó nữa.
Đang xem: 30 trang web sử dụng hiệu ứng parallax đẹp mắt
Hôm nay mình xin giới thiệu một kỹ thuật được ra đời từ năm 2011 (khá là lâu rồi), đó là “Parallax Scrolling”.
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 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.
Xem thêm: tổng hợp game ps2
Kỹ thuật Parallax Scrolling – Phần 1 213″ data-src=”http://mister-map.com/wp-content/uploads/2014/03/parallax-scrolling-coban.png” data-sizes=”(max-width: 820px) 100vw, 820px” class=”aligncenter wp-image-15492 lazyload” src=”http://mister-map.com/data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==”> Kỹ thuật Parallax Scrolling – Phần 1 214″>
Việc của chúng ta là sẽ sử dụng jquery để bind sự kiện scroll chuột của người dùng và thông qua sự kiện đó để cập nhật lại chỉ số top của background, chính xác hơn là class bg. Chỉ số này sẽ thay đổi theo tốc độ mà chúng ta quy định.
Điều mà chúng ta muốn thấy ở đây là khi ta cuộn chuột xuống, background sẽ di chuyển theo hướng lên trên và ngược lại với lúc ta cuộn chuột lên. Vậy nghĩa là thông số khi ta cuộn chuột (scrollPos) sẽ luôn luôn đối ngược với chỉ số top của background. Ta có công thức sau:
background-top-position = 0 – scroll-bar-position
Công thức trên có thể đuợc thay đổi dựa vào tốc độ mà chúng ta muốn thấy ở background khi chuyển động:
background-top-position = 0 – (speed * scroll-bar-position)
Chúng ta có đoạn code sau:
$(document).ready(function() { $(window).bind(“scroll”, function() { parallax(); }); }); // Function tạo parallax effect // tốc độ được quy định bởi biến speed – cái này thay đổi theo ý muốn // scrollPos lấy vị trí hiện tại của thanh cuộn function parallax() { var scrollPos = $(window).scrollTop(), speed = 0.2; $(“.bg”).css(“top”, (0 – (scrollPos * speed)) + “px”); }Sau khi đã hoàn tất, các bạn hãy F5 lại một lần nữa để xem kết quả có như mong đợi không nào?
Lời Kết
Vậy là chúng ta đã bước đầu làm quen với một kỹ thuật rất thú vị trong Web design. Và ở phần sau mình sẽ thực hiện parallax scrolling với nhiều loại element, ví dụ như image hay text ở những tốc độ scroll khác nhau để đem lại hiệu ứng bắt mắt hơn.
Xem thêm: Youtube – My Talking Tom
Mình cũng hi vọng qua bài này sẽ có ai đó cảm thấy hứng thú với việc tìm hiểu các kỹ thuật về Web design. Có rất nhiều thứ rất thú vị đến từ công việc Web design đang cần được các bạn khám phá đó.
Trước khi chào tạm biệt mình gửi các bạn website boy-coy.com . Mình đã chết mê với nó đấy!
