Javascript 滚动到时启动动画

我花了一整天的时间寻找一种简单的方法，在我滚动到页面上的某个特定位置后，让我的动画开始

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

内容在这里。。。

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

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")
    }
});

---

要玩（别忘了滚动）

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

})

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

如果你像我一样懒惰，你可以去一个很棒的图书馆

当元素在页面上可见时，您可以尝试快速、简单地在滚动上集成动画。我创建了一个简单的演示

引导101模板
身体{
垫底：200px；
}
动画在可见时开始
延迟0.5秒后可见动画开始
动画在1s延迟后可见时开始
延迟2秒后可见动画开始
链接1
链接3
链接3
链接4
新的WOW（）.init（）；
不必对此感到奇怪。。。就用它吧


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

如果有人想用它制作一个动画，该动画应该在你打开页面时运行，在你滚动时悬停，然后在你向后滚动时再次运行，下面是我解决这个问题的方法

我使用了@robert使用的东西，并添加了一些改进

我为这个做了这个小提琴

那你就来了：


var$window=$（window）；
var$elem=$（“.my image container”）；
var$gotoutoffframe=false；
函数是crolledintoview（$elem，$window）{
var docViewTop=$window.scrollTop（）；
var docViewBottom=docViewTop+$window.height（）；
var elemTop=$elem.offset（）.top；
var elemBottom=elemTop+$elem.height（）；
返回（（elemBottom=docViewTop）和&$GotoutOffFrame）；
}
函数isScrolledOutView（$elem，$window）{
var docViewTop=$window.scrollTop（）；
var docViewBottom=docViewTop+$window.height（）；
var elemTop=$elem.offset（）.top；
var elemBottom=elemTop+$elem.height（）；
返回（（elemBottom
.my image container{
顶部：50px；
最大宽度：22%；
}
.我的图像容器：悬停{
动画：摇动0.82秒三次贝塞尔（0.36,0.07,0.19,0.97）两者；
变换：translate3d（0,0,0）；
背面可见性：隐藏；
透视图：1000px；
}
.我的图像容器.我的图像{
动画：摇动0.82秒三次贝塞尔（0.36,0.07,0.19,0.97）两者；
-moz动画延迟：1s；
-webkit动画延迟：1s；
-o-动画-延迟：1s；
动画延迟：1s；
变换：translate3d（0,0,0）；
背面可见性：隐藏；
透视图：1000px；
宽度：100%；
}
.制作动画{
动画：摇动0.82秒三次贝塞尔（0.36,0.07,0.19,0.97）两者；
-moz动画延迟：0.5s；
-webkit动画延迟：0.5s；
-o-动画-延迟：0.5s；
动画延迟：0.5s；
变换：translate3d（0,0,0）；
背面可见性：隐藏；
透视图：1000px；
}
@关键帧抖动{
10%,
90% {
转换：translate3d（-1px，0，0）；
}
20%,
80% {
变换：translate3d（2px，0，0）；
}
30%,
50%,
70% {
变换：translate3d（-4px，0，0）；
}
40%,
60% {
变换：translate3d（4px，0，0）；
}
}

首次打开页面时，动画将运行，

当您将其悬停时，

当你向外滚动时，你就会进入


向下滚动，然后向上滚动




































向上滚动
$（窗口）。滚动（函数（事件）{
if（$（“.container”）.offset（）.top<$（窗口）.scrollTop（）+$（窗口）.outerHeight（））{
$（'.animation'）.addClass（'triggerAnim'）；
} 
否则{
$（'.animation'）.removeClass（'triggerAnim'）；
}
});
。动画{
宽度：50%；
浮动：左；
位置：相对位置；
/*我从这里拿出来给triggerAnim*/
-webkit动画持续时间：4s；
-webkit动画迭代次数：3次；
-webkit动画填充模式：正向；
/*我也从这里取出了（出于同样的目的）*/
动画持续时间：4s；
动画迭代次数：1；
动画填充模式：正向；
}
/*我们还必须添加以下内容，称之为“动画”。当然，这也可能是“过渡”，但这不是问题所在*/
@关键帧测试{
0%{
不透明度：0；
变换：缩放（0.3）平移3D（0,0,0）；
}
50%{
不透明度：0.9；
转换：比例（1.1）；
}
80%{
不透明度：1；
变换：比例（0.89）；
}
100%{
不透明度：1；
变换：缩放（1）平移3D（0,0,0）；
}
}
/*最重要的部分。*/
三叉戟{
-webkit动画名称：test；
动画名称：测试；
}
/*让事情更容易看*/
。要滚动的内容{
颜色：灰色；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。Mauris feugiat dolor vel quam Concertetur，nec拍卖人metus faucibus。整数的使用效率。前庭背侧背侧背侧背侧背侧背侧背侧背侧背侧背侧背侧背侧背侧背侧背侧背侧背侧背侧背侧背侧背侧背侧背侧背侧背侧背侧背侧背侧背侧前庭。这是一只乌龟，它的名字叫毛里斯·廷西登（pharetra mauris tincidunt）。Proin ac luctus sem。两人坐在一起。在乌尔纳的威尼斯人身上，坐着的是奥迪奥·乌拉姆科珀的葡萄品种。在维韦拉，维韦拉·多洛在维尼纳提斯。Morbi justo ex，宗族设施，马格纳大学。康瓦利斯精英在圣殿拍卖行。Sed孕妇码头或车辆。佩朗茨克公司的主要业务是健康长寿。
奥纳雷莫州迪亚姆的纳拉·塞姆·费利斯（Nulla sem felis），达官贵人
$(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');
    };

})

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

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