0
基本的には、ユーザーがクラスを追加してスクロールした後、このボックスアニメーションをトリガーしたいと思います。スクロールでアニメーションをトリガーする
これは私にとってはうまくいかないようですが、根本的に何か間違っていると思います。以下は私の現在のコードですが、誰かが私が間違っていることを指摘してくれますか?ありがとう!さらに
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;
}
のjQuery/JS
$(function() {
var boxDraw = $(".box");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 400) {
box.addClass("draw");
}
});
});
、どのようにそれが可能かもしれませんスクロール値ではなく、ページ内の特定のポイントの後にアニメーションをトリガーしますか?どんな助けもありがとう。
です。チェックしたい要素のoffsetTopをチェックして、現在のscrollTopと比較することができます。特定の要素が見えているときにアニメーションをトリガーしたい場合はスクロール値で終わります。また、 'var boxDraw = $("。box ");'を定義しますが、 'boxDraw'ではなく' box'にクラスを適用します。 – Capsule