Liên kết Hoạt ảnh/Biến đổi CSS3 với Sự kiện Di chuyển

Question

Tôi đang tìm cách liên kết chuyển tiếp CSS3 với sự kiện cuộn. Tôi đang tìm kiếm chức năng tương tự như http://nizoapp.com/, trong đó một số yếu tố sẽ di chuyển khi bạn đến một điểm cuộn nhất định trên trang. Tôi biết bạn sẽ phải gọi sự kiện cuộn với jQuery (sử dụng bù đắp và cuộn), nhưng tôi tò mò nếu có một cách để sau đó sử dụng CSS3 cho phần hoạt hình hoặc nếu điều đó cần phải được thực hiện trong jQuery. Dù bằng cách nào, tôi sẽ yêu một số trợ giúp về làm thế nào để có được một bước nhảy bắt đầu về việc này để làm việc. Cảm ơn đã giúp đỡ.

Answer 1

Điểm khởi đầu tốt có thể là the jQuery Waypoints plugin. Nó giúp bạn dễ dàng thực hiện một hàm bất cứ khi nào bạn cuộn đến một phần tử và cũng có thể áp dụng các lớp dựa trên những gì đang được xem. Sau đó, bạn có thể sử dụng chúng để kích hoạt hoạt ảnh CSS mà bạn đang theo dõi.

CẬP NHẬT - Tôi vừa xem qua plugin the Scrollorama jQuery. Tác giả nói rằng nó không được kiểm tra kỹ lưỡng, nhưng nó được thiết kế để làm chính xác những gì bạn đang có, và chắc chắn trông giống như một điểm khởi đầu tốt.

Answer 2

Không có cách nào liên kết một CSS cụ thể đến vị trí cuộn. Bạn sẽ cần phải bao gồm một số keo javascript để đạt được hiệu ứng đó. Phương pháp yêu thích của tôi là liên kết với sự kiện onscroll của cửa sổ và đặt mã hoạt ảnh của bạn ở đó.

Answer 3

Tôi đang sử dụng phương thức scrollTop().

này sẽ thêm hoặc loại bỏ một lớp học với tài sản của tôi css Animate

$(window).scroll(function (event) { 
    var y = $(this).scrollTop(); 

    if (y <= 300) { 
     $('#my-div').addClass('animate'); 
    } 
    else 
    { 
     $('#my-div').removeClass('animate');     
    } 
}); 

trong html:

<div id="my-div"> 
    <p>Lorem ipsum dolor sit amet</p> 
</div> 

trong css:

#my-div { 
    width:200px; 
    height:200px; 
    background-color:red; 
} 
#my-div.animate { 
    transition: rotate(30deg); 
}