[英]Trigger Animation on Scroll
基本上我想在用户通过添加 class 向下滚动后触发此框 animation。
似乎无法为我工作,我可能做的事情根本上是错误的。 下面是我当前的代码,任何人都可以指点我做错了什么吗? 谢谢!
HTML
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="600px" height="600px" viewBox="0 0 600 600" enable-background="new 0 0 600 600" xml:space="preserve">
<rect class="box" x="147.297" y="237.162" fill="#FFFFFF" stroke="#000000" stroke-width="8" stroke-miterlimit="10" width="305.405" height="125.676"/>
</svg>
CSS
@keyframes offset{
100%{
stroke-dashoffset:0;
}
}
.box{
stroke:transparent;
}
.box.draw{
stroke:#202020;
stroke-width:5;
stroke-dasharray:910;
stroke-dashoffset:910;
animation: offset 5s linear forwards;
}
查询/JS
$(function() {
var boxDraw = $(".box");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 400) {
box.addClass("draw");
}
});
});
此外,如何在页面中的某个点之后触发 animation 而不是滚动值? 任何帮助,将不胜感激。
@Capsule已经解决了。 您正确的JS代码:
$(function() {
var boxDraw = $(".box");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 400) {
boxDraw.addClass("draw");
}
});
});
要在查看某个元素时触发滚动, @ Capsule再次指出了这一点,但这是代码
$(function() {
var boxDraw = $(".box");
var boxDrawTop = boxDraw.offset().top;
var windowHeight = $(window).height();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
// let's fire up animation when .box is in view
if ( scroll >= ( boxDrawTop - windowHeight )) {
boxDraw.addClass("draw");
}
});
});
搜索 js lib wow.js(在此处搜索引擎文本以获取最少的内容...)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.