Bắt đầu hoạt ảnh khi cuộn đến

Tôi đã dành cả ngày tìm kiếm một cách dễ dàng để làm cho hoạt ảnh của tôi bắt đầu sau khi tôi đã cuộn đến một địa điểm cụ thể trên trang.Bắt đầu hoạt ảnh khi cuộn đến

css My

.animation { 
width: 50%; 
float: left; 
position: relative; 
-webkit-animation-name: test; 
-webkit-animation-duration: 4s; 
-webkit-animation-iteration-count: 3; 
-webkit-animation-fill-mode: forwards; 
animation-name: test; 
animation-duration: 4s; 
animation-iteration-count: 1; 
animation-fill-mode: forwards; }

Và HTML của tôi

<div class="container"> 

<div class="animation"> 

Content goes here... 

</div> 

</div>

Tôi tự hỏi làm thế nào để làm cho hình ảnh động bắt đầu khi tôi di chuyển đến thùng chứa lớp.

Nguồn

2015-06-12 WeBWeB

js sử dụng và thêm lớp để div khi nó xuất hiện trên màn hình: http://stackoverflow.com/questions/487073/check-if-element-is-visible-after-scrolling – krzysiej

Bạn có thể sử dụng thư viện như https://github.com/customd/jquery-visible thay vì cố gắng tự mình tìm ra –

Javascript

var $window = $(window); 
var $elem = $(".animation") 

function isScrolledIntoView($elem, $window) { 
    var docViewTop = $window.scrollTop(); 
    var docViewBottom = docViewTop + $window.height(); 

    var elemTop = $elem.offset().top; 
    var elemBottom = elemTop + $elem.height(); 

    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop)); 
} 
$(document).on("scroll", function() { 
    if (isScrolledIntoView($elem, $window)) { 
     $elem.addClass("animate") 
    } 
});

HTML

<div class="container"> 
    <div class="animation">Content goes here...</div> 
</div>

CSS

.animation.animate { 
    animation: pulse 5s infinite;//change this to whatever you want 
}

JSFiddle để chơi với (đừng quên để di chuyển)

Nguồn

2015-06-12 11:27:14 trebor

@WebWeb, bạn có thể thử này si công thức mple:

$(window).on('scroll' , function(){ 
    scroll_pos = $(window).scrollTop() + $(window).height(); 
    element_pos = $(yourelement).offset().top + $(yourelement).height() ; 
    if (scroll_pos > element_pos) { 
     $(yourelement).addClass('add-anim'); 
    }; 

})

Kiểm tra cơ bản nếu vị trí cửa sổ cuộn cao hơn so với phần tử được bù từ đầu tài liệu (cộng với chiều cao của phần tử). Một công thức cũ của nó.

FIDDLE AND DEMO HERE

Nếu lười biếng của bạn như tôi, mặc dù bạn có thể đi waypoints.js một thư viện tuyệt vời.

Nguồn

2015-06-12 11:38:28

Bạn có thể thử wow.js thật nhanh chóng và đơn giản để tích hợp hoạt ảnh khi cuộn khi phần tử hiển thị trên trang. Tôi tạo bản demo đơn giản.

<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
    <meta charset="utf-8"> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <title>Bootstrap 101 Template</title> 
 
    <link rel="stylesheet" href="http://mynameismatthieu.com/WOW/css/libs/animate.css"> 
 
    <style> 
 

 
body { 
 
    padding-bottom: 200px; 
 
} 
 

 
    </style> 
 
    </head> 
 
    <body> 
 

 
<div style="height: 110vh"> 
 
</div> 
 

 
<div class="wow bounceInLeft"> 
 
    Animation start when Visible 
 
</div> 
 

 
<div data-wow-delay=".5s" class="wow bounceInLeft"> 
 
    Animation start when Visible after .5s delay 
 
</div> 
 

 
<div data-wow-delay="1s" class="wow bounceInLeft"> 
 
    Animation start when Visible after 1s delay 
 
</div> 
 

 
<div data-wow-delay="2s" class="wow bounceInLeft"> 
 
    Animation start when Visible after 2s delay 
 
</div> 
 

 
<div style="text-align: center; margin-top: 300px;"> 
 
    <span data-wow-delay="" class="wow bounceInDown">Link 1</span> 
 
    <span data-wow-delay=".1s" class="wow bounceInDown">Link 3</span> 
 
    <span data-wow-delay=".2s" class="wow bounceInDown">Link 3</span> 
 
    <span data-wow-delay=".3s" class="wow bounceInDown">Link 4</span> 
 
</div> 
 

 

 
<script src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script> 
 
<script> 
 
new WOW().init(); 
 
</script> 
 

 
    </body> 
 
</html>

Nguồn

2015-06-12 11:40:49

không cần phải băn khoăn về điều đó ... chỉ cần sử dụng nó

GITHUB

tải animate.css và thực hiện điều này trong

<script src="http://mynameismatthieu.com/WOW/dist/wow.min.js"></script> 
<link rel="stylesheet" href="css/animate.css"> 
<script> 
new WOW().init(); 
</script> 


<div class="wow bounceInLeft animated"> 
       <h2>animated heading</h2> 
</div>

thử mã này ...

this link for more

(các lớp này có thể được sử dụng)

bounce 
flash 
pulse 
rubberBand 
shake 
headShake 
swing 
tada 
wobble 
jello 
bounceIn 
bounceInDown 
bounceInLeft 
bounceInRight 
bounceInUp 
bounceOut 
bounceOutDown 
bounceOutLeft 
bounceOutRight 
bounceOutUp 
fadeIn 
fadeInDown 
fadeInDownBig 
fadeInLeft 
fadeInLeftBig 
fadeInRight 
fadeInRightBig 
fadeInUp 
fadeInUpBig 
fadeOut 
fadeOutDown 
fadeOutDownBig 
fadeOutLeft 
fadeOutLeftBig 
fadeOutRight 
fadeOutRightBig 
fadeOutUp 
fadeOutUpBig 
flipInX 
flipInY 
flipOutX 
flipOutY 
lightSpeedIn 
lightSpeedOut 
rotateIn 
rotateInDownLeft 
rotateInDownRight 
rotateInUpLeft 
rotateInUpRight 
rotateOut 
rotateOutDownLeft 
rotateOutDownRight 
rotateOutUpLeft 
rotateOutUpRight 
hinge 
rollIn 
rollOut 
zoomIn 
zoomInDown 
zoomInLeft 
zoomInRight 
zoomInUp 
zoomOut 
zoomOutDown 
zoomOutLeft 
zoomOutRight 
zoomOutUp 
slideInDown 
slideInLeft 
slideInRight 
slideInUp 
slideOutDown 
slideOutLeft 
slideOutRight 
slideOutUp

Nguồn

2016-01-10 04:12:41

Nếu có bất cứ ai muốn sử dụng này cho một hình ảnh động mà nên chạy khi bạn mở trang, di chuột nó, khi bạn di chuyển và chạy lại khi bạn cuộn lại, đây là cách tôi giải quyết nó.

Tôi đã sử dụng những gì @robert đã sử dụng và thêm một số sàng lọc.

tôi đã fiddle này cho điều này https://jsfiddle.net/hassench/rre4qxhf/

Vì vậy, có bạn đi:

var $window = $(window); 
 
var $elem = $(".my-image-container"); 
 
var $gotOutOfFrame = false; 
 

 
function isScrolledIntoView($elem, $window) { 
 
    var docViewTop = $window.scrollTop(); 
 
    var docViewBottom = docViewTop + $window.height(); 
 

 
    var elemTop = $elem.offset().top; 
 
    var elemBottom = elemTop + $elem.height(); 
 

 
    return ((elemBottom <= docViewBottom) && (elemTop >= docViewTop) && $gotOutOfFrame); 
 
} 
 

 
function isScrolledOutView($elem, $window) { 
 
    var docViewTop = $window.scrollTop(); 
 
    var docViewBottom = docViewTop + $window.height(); 
 

 
    var elemTop = $elem.offset().top; 
 
    var elemBottom = elemTop + $elem.height(); 
 

 
    return ((elemBottom < docViewBottom) && (elemTop < docViewTop)); 
 
} 
 
$(document).on("scroll", function() { 
 
    if (isScrolledIntoView($elem, $window)) { 
 
    $gotOutOfFrame = false; 
 
    $elem.addClass("animate"); 
 
    $(function() { 
 
     setTimeout(function() { 
 
     $elem.removeClass("animate"); 
 

 
     }, 1500); 
 
    }); 
 
    } 
 
    if (isScrolledOutView($elem, $window)) { 
 
    $gotOutOfFrame = true; 
 
    $elem.removeClass("animate"); 
 
    } 
 
});

.my-image-container { 
 
    top: 50px; 
 
    max-width: 22%; 
 
} 
 

 
.my-image-container:hover { 
 
    animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; 
 
    transform: translate3d(0, 0, 0); 
 
    backface-visibility: hidden; 
 
    perspective: 1000px; 
 
} 
 

 
.my-image-container .my-image { 
 
    animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; 
 
    -moz-animation-delay: 1s; 
 
    -webkit-animation-delay: 1s; 
 
    -o-animation-delay: 1s; 
 
    animation-delay: 1s; 
 
    transform: translate3d(0, 0, 0); 
 
    backface-visibility: hidden; 
 
    perspective: 1000px; 
 
    width: 100%; 
 
} 
 

 
.animate { 
 
    animation: shake 0.82s cubic-bezier(0.36, 0.07, 0.19, 0.97) both; 
 
    -moz-animation-delay: 0.5s; 
 
    -webkit-animation-delay: 0.5s; 
 
    -o-animation-delay: 0.5s; 
 
    animation-delay: 0.5s; 
 
    transform: translate3d(0, 0, 0); 
 
    backface-visibility: hidden; 
 
    perspective: 1000px; 
 
} 
 

 
@keyframes shake { 
 
    10%, 
 
    90% { 
 
    transform: translate3d(-1px, 0, 0); 
 
    } 
 
    20%, 
 
    80% { 
 
    transform: translate3d(2px, 0, 0); 
 
    } 
 
    30%, 
 
    50%, 
 
    70% { 
 
    transform: translate3d(-4px, 0, 0); 
 
    } 
 
    40%, 
 
    60% { 
 
    transform: translate3d(4px, 0, 0); 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
The animation will run when you firt open the page,<br> 
 

 
and when you hover it,<br> 
 

 
and when you scroll out then in. <br> 
 

 
<div class="my-image-container"> 
 
    <img class="my-image" 
 
    src="http://www.lifeofpix.com/wp-content/uploads/2017/05/img-5831.jpg"> 
 
</div> 
 
<br> Scroll down then back up 
 
<br><br><br><br><br><br><br><br> 
 
<br><br><br><br><br><br><br><br> 
 
<br><br><br><br><br><br><br><br> 
 
<br><br><br><br><br><br><br><br> 
 
scroll up

Nguồn

2017-06-14 10:30:35

Bắt đầu hoạt ảnh khi cuộn đến

Trả lời

Các vấn đề liên quan