Làm cách nào để bắt đầu hoạt ảnh khi phần tử xuất hiện trên màn hình?

Question

Phần tử HTML hoạt ảnh như thế nào ngay khi nó xuất hiện trên màn hình?

Tôi đã tìm thấy ví dụ về tràn ngăn xếp tour page, nơi các phần tử thông tin trượt vào trang ngay sau khi bạn cuộn xuống đủ xa. Bí quyết đằng sau điều đó là gì?

Answer 1

Bạn cần phải sử dụng javascript để phát hiện vị trí của chế độ xem và kích hoạt nó khi nó hiển thị.

Bạn có thể sử dụng javascript để phát hiện và thực hiện quá trình chuyển đổi rồi css hoặc javascript để thực hiện hoạt ảnh.

Có rất nhiều tập lệnh dựa trên jquery có sẵn để thực hiện việc này. Dưới đây là một ví dụ:

---

DEMO

---

1. Tạo một yếu tố Html bạn wan để kiểm tra xem nó trong viewport.

<div class="demo"></div> 

2. Nạp jQuery javascript thư viện và jQuery Viewport Checker cắm ở phần cuối của tài liệu của bạn.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
<script src="viewportchecker.js"></script> 

3. Gọi plugin trên yếu tố này và làm điều gì đó trong javascript.

<script> 
$(document).ready(function(){ 
$('.demo').viewportChecker({ 
// Class to add to the elements when they are visible 
classToAdd: 'visible', 

// The offset of the elements (let them appear earlier or later) 
offset: 100, 

// Add the possibility to remove the class if the elements are not visible 
repeat: false, 

// Callback to do after a class was added to an element. Action will return "add" or "remove", depending if the class was added or removed 
callbackFunction: function(elem, action){} 
}); 
}); 
</script> 

---

DOWNLOAD THIS SCRIPT