HTML5 & CSS3

Hướng dẫn tạo hiệu ứng parallax image

Chia sẻ nhanh

Parallax scrolling không còn là quá xa lại với anh em frontend nữa. Nó có vô vàn cách để áp dụng nhằm thu hút người xem và nâng cao trải nghiệm người dùng.

Chúng ta hãy xem Mr Fisk's site - thiết kế bởi BMO, đập vào mắt bạn là một loạt hình ảnh chuyển động dạng 3D theo chuyển động di chuột của bạn. Nhìn có vẻ kinh kinh nhưng cách áp dụng của nó lại đơn giản cực kỳ nếu bạn "phệt" theo tôi từng bước từng bước như sau

01. Initiate HTML

Chắc chắn rồi, bước đầu tiên là sẽ phải tạo ngay một file html, load lủng css, js các kiểu con đà điểu mà bạn thích vào đây

<!DOCTYPE html>
<html>
<head>
<title>Mouse Scroll</title>
<link rel="stylesheet" type="text/css" href="/styles.css" />
<script src="/code.js"></script>
</head>
<body>
*** STEP 2 HERE
</body>
</html>

02. Content elements

Để các bạn có thể tự tạo một thư viện riêng, trong ví dụ này chúng ta sẽ tạo ra một phương thức chung nhất để mỗi khi bạn muốn áp dụng chỉ cần điền thêm attribute "data-parallax" là chạy "nong nanh nuôn"

<article data-parallax>
<div></div>
<div></div>
<div></div>
</article>

Mỗi div trên đây tương ứng với số lớp hiển thị. Bạn có thể thêm bớt tùy theo mục đích sử dụng nhé. Có thể nhét thành background của div, hoặc cũng có thể phang trực tiếp img cũng không ảnh hưởng ji tới sự đung đưa - parallax đâu bạn nhé.

03. Parallax container style

File css styles.css bạn thêm vào như sau

[data-parallax]{
position: relative;
width: 100vw;
height: 100vh;
}

trên đây là một div có rộng và cao bằng luôn kích thước hiển thị của màn hình. còn tùy thuộc vào mục đích riêng, bạn có thể định nghĩa kiểu ji cũng được miễn là để position: relative cho nó là được.

04. Parallax children

Như đã nói ở trên, đối với các lớp parallax con, bạn có thể sử dụng background-image hoặc chèn thẳng img vào cũng được.

[data-parallax] > *{
position: absolute;
width: 50%;
height: 50%;
left: 25%;
top: 25%;
border: 1px solid #000;
background: rgba(255,0,0,.25)
}

05. Initiate the JavaScript

Trong file core.js bạn khai báo khởi tạo parallax ngay khi load trang

window.addEventListener("load", function(){
*** STEP 6 HERE
});

06. Node search

Check xem trang có div nào có thuộc tính data-parallax hay không? nếu có thì mới check đến các lớp parallax con

ar nodes = document.querySelectorAll("[data-parallax]");
for(var i=0; i<nodes.length; i++){
var children = nodes[i].children;
for(var n=0; n<children.length; n++){
children[n].setAttribute("data-index", n+2);
}
*** STEP 7 HERE
}

07. Parallax listeners

Bước cuối cùng là bạn tạo hiệu ứng cho các lớp parallax con khi chuột chuyển động trong div parallax container.

nodes[i].addEventListener("mousemove", function(e){
var elms = this.children;
for(var c=0; c<elms.length; c++){
var divisor = parseInt(elms[c].getAttribute("data-index"));
var startX = this.offsetWidth/4;
var startY = this.offsetHeight/8;
elms[c].style.left = startX-(((e.screenX/divisor)-e.clientX)/3)+"px";
elms[c].style.top = startY-(((e.screenY/divisor)-e.clientY)/3)+"px";
}
});

Chúc anh em thành công!

Nếu thấy hữu ích, đừng quên like thanks tín dụng các kiểu nhé anh em

Bình luận

TOP

Bạn đã sẵn sàng chuyển ý tưởng tuyệt vời
của bạn thành hiện thực?