0

ねえ、私が一緒に働いているデザイナーは、このサイトの効果を取り入れたいと思っています:

https://snipcart.com/

特に、「仕組み」と書かれている部分を下にスクロールすると、非表示になっているのに表示されます。

それがどのように行われたかはわかりませんが、いくつかのドキュメント手法などを探してみましたが、そのアニメーションを取得する方法についての幅広い選択肢はありません. 親切な魂が私を正しい方向に導くことができますか?

ありがとう

4

3 に答える 3

1

効果を作成するのはそれほど難しくありません。

私がやった方法：

1-要素はcssで隠されています

#element{
    opacity: 0;
}

2-jquery関数は、ページスクロールでページがどれだけスクロールされたかをチェックします

$(window).scroll(function(){
    var elemPosition = $('#element').offset().top,
        scrollPosition = $(window).scrollTop();

    //Checks if a little higher than element position (you can change 100 for whatever you want)
    if(scrollPosition - 100 > elemPosition){ 
        $('#element').animate({
            opacity: 1
        }, 500); //OR the animation you want
    }  

});

それはすべての基本です。次に、css で開始状態を設定し、jquery で別のものにアニメーション化できます。

于 2013-08-12T19:25:39.183 に答える
0

コードのハッキングから、TweenJS と Tiny Scroll を使用しています。

http://www.baijs.nl/tinyscrollbar/

http://createjs.com/#!/TweenJS

于 2013-08-12T20:32:30.507 に答える