Javascript 滚动到时开始动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30801588/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
提示：将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间：2020-08-23 05:45:44 来源:igfitidea点击:
Start animation when scrolled to
提问by WeBWeB
I have spend all day looking for an easy way to make my animation start after I have scrolled to a specific place on the page.
我一整天都在寻找一种简单的方法来让我的动画在滚动到页面上的特定位置后开始。
My css
我的CSS
.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; }
And my HTML
还有我的 HTML
<div class="container">
<div class="animation">
Content goes here...
</div>
</div>
I wonder how to make the animation start when I scroll to the class container.
我想知道当我滚动到类容器时如何让动画开始。
回答by Bobby Tables
Javascript
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
HTML
<div class="container">
<div class="animation">Content goes here...</div>
</div>
CSS
CSS
.animation.animate {
animation: pulse 5s infinite;//change this to whatever you want
}
JSFiddleto play with (don't forget to scroll)
JSFiddle玩（不要忘记滚动）
回答by Alexander Solonik
@WebWeb , you can try this simple formula :
@WebWeb，你可以试试这个简单的公式：
$(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');
};
})
It is basically checking if the windows scroll position is higher than that of the elements offset from the top of the document(plus the element's height) . It is an age-old formula.
它基本上是检查窗口滚动位置是否高于从文档顶部偏移的元素（加上元素的高度）。这是一个古老的公式。
If you are lazy like me though, you can go for waypoints.jsan amazing library.
如果你像我一样懒惰，你可以选择waypoints.js一个很棒的库。
回答by Gautam Jha
no need to wonder about it... just use it
无需怀疑它......只需使用它
download animate.css and implement this in
下载 animate.css 并在
<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>
try this code...
试试这个代码...
(these classes can be used)
（可以使用这些类）
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
回答by Usman Arshad
You can try wow.jsit's quick and simple for integrate animation on scroll when element is visible on page. I create simple demo.
您可以尝试wow.js当元素在页面上可见时，它可以快速简单地在滚动上集成动画。我创建了简单的演示。
<!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>回答by Hassen Ch.
If there is anyone wants to use this for an animation that should run when you open the page, hover it, when you scroll and run again when you scroll back, here is how I solved it.
如果有人想将其用于打开页面时应运行的动画，请将其悬停，滚动时再次运行，然后向后滚动，这是我解决的方法。
I used what @robert used and added some refinements.
我使用了@robert 使用的内容并添加了一些改进。
I made this fiddle for this https://jsfiddle.net/hassench/rre4qxhf/
我为此https://jsfiddle.net/hassench/rre4qxhf/制作了这个小提琴
So there you go:
所以你去：
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回答by Sándor Zuboly
$(window).scroll(function(event) {
if ($(".container").offset().top < $(window).scrollTop() + $(window).outerHeight()) {
$('.animation').addClass('triggerAnim');
}
else {
$('.animation').removeClass('triggerAnim');
}
});.animation {
width: 50%;
float: left;
position: relative;
/*I took out from here to pass it to .triggerAnim*/
-webkit-animation-duration: 4s;
-webkit-animation-iteration-count: 3;
-webkit-animation-fill-mode: forwards;
/*I also took out from here (for the same purpose).*/
animation-duration: 4s;
animation-iteration-count: 1;
animation-fill-mode: forwards;
}
/*We also have to add the followings to call it "animation". Sure it could be "transition" too, but that won't be the thing.*/
@keyframes test{
0%{
opacity: 0;
transform: scale(0.3) translate3d(0,0,0);
}
50%{
opacity: 0.9;
transform: scale(1.1);
}
80%{
opacity: 1;
transform: scale(0.89);
}
100%{
opacity: 1;
transform: scale(1) translate3d(0,0,0);
}
}
/*The most important part.*/
.triggerAnim{
-webkit-animation-name: test;
animation-name: test;
}
/*To see things easier.*/
.content-to-scroll{
color: grey;
} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- the above is needed for the triggering to work -->
<div class="content-to-scroll"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris feugiat dolor vel quam consectetur, nec auctor metus faucibus. Integer suscipit urna et quam auctor efficitur. Donec luctus suscipit vestibulum. Nulla ultrices dapibus orci, id pharetra mauris tincidunt in. Proin ac luctus sem. Duis sit amet justo magna. Proin venenatis sapien urna, sit amet varius odio ullamcorper non. In viverra viverra dolor at venenatis. Morbi justo ex, feugiat facilisis quam id, tincidunt ullamcorper magna. Cras convallis elit in consectetur auctor. Sed gravida quam ac ornare vehicula. Pellentesque nec metus vitae purus blandit fringilla.
Nulla sem felis, dignissim at diam in, ornare mollis turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel tellus id metus porttitor malesuada sit amet non velit. Vestibulum vehicula et leo a pulvinar. Maecenas tristique convallis efficitur. Nam sed euismod eros. Cras pretium molestie laoreet. Suspendisse at placerat sem. Duis in magna eu mauris pharetra sagittis. Integer ac sem eleifend, dictum lorem at, faucibus sem. Integer efficitur sapien nunc, nec luctus dolor maximus interdum. Proin finibus odio eget orci mattis, vehicula tincidunt tortor imperdiet.
Cras suscipit sapien nisl, sit amet mattis nulla lobortis eu. In hac habitasse platea dictumst. Vestibulum hendrerit quis dui bibendum lobortis. Pellentesque eget sapien lorem. Vivamus nunc elit, laoreet vitae tortor non, mattis cursus enim. Phasellus vehicula facilisis ante id suscipit. Donec tempus, neque vitae placerat vestibulum, eros tortor malesuada libero, vitae hendrerit nibh tortor sed dolor. In suscipit tincidunt felis quis fermentum. Curabitur at ultricies purus, ac ultricies leo. Quisque accumsan augue ac tortor fringilla, volutpat facilisis ligula bibendum. Curabitur velit justo, ultricies eget lectus id, mattis convallis erat. Morbi vitae elit ut leo fringilla faucibus in ut neque. Proin vulputate magna massa, ut tristique orci ultrices sed.
Mauris at volutpat nunc, at tristique augue. Curabitur ac consequat eros. Nullam volutpat vulputate velit eu semper. Morbi bibendum turpis nisl, laoreet tincidunt turpis eleifend sed. Cras maximus ante eu est aliquam gravida. Morbi consectetur porta auctor. Mauris lobortis consequat lorem, tincidunt ultricies elit varius eget. Integer efficitur non purus sit amet condimentum. Morbi sodales metus eu aliquet ullamcorper. Pellentesque at mollis ligula, a consequat justo. Ut aliquet mollis mi quis feugiat. Vivamus iaculis, lorem id feugiat mattis, leo felis ultricies tortor, et scelerisque nisi ligula a metus. Duis tincidunt, mi id faucibus rhoncus, nibh urna fringilla sapien, ac faucibus neque justo eget odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras sit amet molestie sem. Maecenas sed laoreet elit, in blandit sem.
Morbi venenatis porttitor consequat. Maecenas sodales arcu non neque ullamcorper, et facilisis diam auctor. Nulla lobortis, dui sed viverra venenatis, nisi sapien cursus ante, ac egestas tortor erat et justo. Quisque vel scelerisque diam. Maecenas ac lectus et odio suscipit aliquet quis a metus. In augue purus, rhoncus eu facilisis quis, pretium et risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dictum et nisi vel blandit. Fusce nec metus nec lorem imperdiet pharetra at eu enim. Curabitur mattis, nunc quis sagittis ornare, tortor ipsum dapibus lectus, a sagittis tortor ligula eu arcu. Duis quis velit non sem congue sollicitudin vitae a nunc. In vitae ligula eleifend erat fringilla egestas. Aliquam feugiat eleifend elit, sed blandit erat eleifend faucibus. Etiam et mattis justo, eget tempor neque. Donec ac euismod diam. Sed maximus in justo quis pellentesque.
</div>
<div class="container">
<div class="animation">
Content goes here...
</div>
</div>
<div class="content-to-scroll"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris feugiat dolor vel quam consectetur, nec auctor metus faucibus. Integer suscipit urna et quam auctor efficitur. Donec luctus suscipit vestibulum. Nulla ultrices dapibus orci, id pharetra mauris tincidunt in. Proin ac luctus sem. Duis sit amet justo magna. Proin venenatis sapien urna, sit amet varius odio ullamcorper non. In viverra viverra dolor at venenatis. Morbi justo ex, feugiat facilisis quam id, tincidunt ullamcorper magna. Cras convallis elit in consectetur auctor. Sed gravida quam ac ornare vehicula. Pellentesque nec metus vitae purus blandit fringilla.
Nulla sem felis, dignissim at diam in, ornare mollis turpis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vel tellus id metus porttitor malesuada sit amet non velit. Vestibulum vehicula et leo a pulvinar. Maecenas tristique convallis efficitur. Nam sed euismod eros. Cras pretium molestie laoreet. Suspendisse at placerat sem. Duis in magna eu mauris pharetra sagittis. Integer ac sem eleifend, dictum lorem at, faucibus sem. Integer efficitur sapien nunc, nec luctus dolor maximus interdum. Proin finibus odio eget orci mattis, vehicula tincidunt tortor imperdiet.
Cras suscipit sapien nisl, sit amet mattis nulla lobortis eu. In hac habitasse platea dictumst. Vestibulum hendrerit quis dui bibendum lobortis. Pellentesque eget sapien lorem. Vivamus nunc elit, laoreet vitae tortor non, mattis cursus enim. Phasellus vehicula facilisis ante id suscipit. Donec tempus, neque vitae placerat vestibulum, eros tortor malesuada libero, vitae hendrerit nibh tortor sed dolor. In suscipit tincidunt felis quis fermentum. Curabitur at ultricies purus, ac ultricies leo. Quisque accumsan augue ac tortor fringilla, volutpat facilisis ligula bibendum. Curabitur velit justo, ultricies eget lectus id, mattis convallis erat. Morbi vitae elit ut leo fringilla faucibus in ut neque. Proin vulputate magna massa, ut tristique orci ultrices sed.
Mauris at volutpat nunc, at tristique augue. Curabitur ac consequat eros. Nullam volutpat vulputate velit eu semper. Morbi bibendum turpis nisl, laoreet tincidunt turpis eleifend sed. Cras maximus ante eu est aliquam gravida. Morbi consectetur porta auctor. Mauris lobortis consequat lorem, tincidunt ultricies elit varius eget. Integer efficitur non purus sit amet condimentum. Morbi sodales metus eu aliquet ullamcorper. Pellentesque at mollis ligula, a consequat justo. Ut aliquet mollis mi quis feugiat. Vivamus iaculis, lorem id feugiat mattis, leo felis ultricies tortor, et scelerisque nisi ligula a metus. Duis tincidunt, mi id faucibus rhoncus, nibh urna fringilla sapien, ac faucibus neque justo eget odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Cras sit amet molestie sem. Maecenas sed laoreet elit, in blandit sem.
Morbi venenatis porttitor consequat. Maecenas sodales arcu non neque ullamcorper, et facilisis diam auctor. Nulla lobortis, dui sed viverra venenatis, nisi sapien cursus ante, ac egestas tortor erat et justo. Quisque vel scelerisque diam. Maecenas ac lectus et odio suscipit aliquet quis a metus. In augue purus, rhoncus eu facilisis quis, pretium et risus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut dictum et nisi vel blandit. Fusce nec metus nec lorem imperdiet pharetra at eu enim. Curabitur mattis, nunc quis sagittis ornare, tortor ipsum dapibus lectus, a sagittis tortor ligula eu arcu. Duis quis velit non sem congue sollicitudin vitae a nunc. In vitae ligula eleifend erat fringilla egestas. Aliquam feugiat eleifend elit, sed blandit erat eleifend faucibus. Etiam et mattis justo, eget tempor neque. Donec ac euismod diam. Sed maximus in justo quis pellentesque.
</div>