0

私はskrollrを使ってsvgをアニメーション化しています。ページを下に成長する何かをアニメーション化しています。コードは、次のような数百のパスで構成されています。

<path data-100="stroke-dashoffset:-129;" data-400="stroke-dashoffset:0;" id="v3" fill="none" stroke="#EEB853" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
M561.922,268.727c21,20.96,35-21.5,58-14.475c17.5,4.475,34.836,27.435,36.836,35.435" style="stroke-dasharray:6000;" />

単純化すると、次のように考えることができます。

data-100="stroke-dashoffset:-129;" data-400="stroke-dashoffset:0;"

データの後の数字は、スタイルを設定するためにユーザーが下にスクロールするピクセル数です。画面ごとに高さが異なるため、次のことを行いました。

  • 画面の高さを確認する
  • すべてのパスをループする
  • 高さに応じてデータ数のピクセルの一部を取り除きます

したがって、小さな画面では、最終的に次のようになる可能性があります

data-50="stroke-dashoffset:-129;" data-350="stroke-dashoffset:0;"

このリンクはそれを行うための最良の方法ですか? これを達成するための他のアドバイスはありますか？

4

1 に答える 1

0

@prinzhornが指摘したように、私は次のことを行うだけでそれを管理しました：

var OFFSET = ($(window).height / 5);

$(document).ready(function(){
    if($("#timeline").length > 0){
        var s = skrollr.init({
            constants: {
                screen_offset   :   OFFSET
            }
        });
    }
});

その後：

<path data-_screen_offset-100="stroke-dashoffset:-5772;" data-_screen_offset-5300="stroke-dashoffset:0;"/>

skrollr に渡されるオブジェクトのアンダースコアを忘れずに削除してください。

于 2013-08-19T20:30:36.793 に答える