Question

在滚动到页面上的特定位置后，我花了一整天时间寻找一种简单的方法来启动动画。

我的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; }

我的HTML

<div class="container">

<div class="animation">

Content goes here...

</div>

</div>

我想知道如何在滚动到类容器时启动动画。

Answer 1

的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玩（不要忘记滚动）

Answer 2

@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');
    };

})

基本上检查窗口滚动位置是否高于偏离文档顶部的元素（加上元素的高度）。这是一个古老的公式。

<强> FIDDLE AND DEMO HERE

如果你像我一样懒，你可以去waypoints.js一个很棒的图书馆。

Answer 3

你可以尝试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>

Answer 4

无需怀疑它......只需使用它

GITHUB

下载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>

试试这段代码......

this link for more

（可以使用这些类）

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

Answer 5

如果有人想要将此功能用于打开页面时应该运行的动画，请将其悬停，当您向后滚动并再次运行时，这就是我解决它的方法

我使用了@robert使用的内容并添加了一些改进。

我为这个https://jsfiddle.net/hassench/rre4qxhf/

做了这个小提琴

所以你去了：

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

Answer 6

$(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>

滚动到时启动动画

6 个答案: