1

実際、このサイトには私が欲しいものがあります: http://www.3magine.com/our-work/

すべてのアニメーションが css3 で行われていることがわかりますが、どのようにしてアニメーションを遅らせ、コンテンツをスクロール時にのみ表示するのでしょうか?

私が理解しているように、javascriptなしでは不可能ではありませんか？

4

2 に答える 2

2

ホームページ アニメーションの作成方法に関する完全なチュートリアルは、http://www.netmagazine.com/tutorials/getting-animations-trigger-right-timeにあります。

お役に立てれば。

于 2013-05-14T01:21:21.190 に答える
1

あなたの最後の質問に答えるために、いいえ、これは厳密に CSS では達成できません (そして、なぜあなたもそれを望むのでしょうか、JS は素晴らしいです)。

このサイトでは、CSS3 と組み合わせた JS を使用して、これらのことを実現しています。

リンクされた JS ファイルを見てください。彼らはあなたが言及したウェブサイトでこれを使用しています

http://www.3magine.com/wp-content/themes/3magine/js/jquery.appear-1.1.1.modified.js (Google Code にもある jQuery 表示プラグイン)

このcssファイルと組み合わせる

http://www.3magine.com/wp-content/themes/3magine/css/animations.css

このすべての空想を達成するために。それらすべてがリンクされた後、次のコードを使用してページにすべてを実装します

if(Modernizr.csstransitions){               
                var script = document.createElement( 'script' );
                script.type = 'text/javascript';
                script.src = "http://www.3magine.com/wp-content/themes/3magine/js/jquery.appear-1.1.1.modified.js";
                $('head').append( script );
                                document.write('<link rel="stylesheet" type="text/css" href="http://www.3magine.com/wp-content/themes/3magine/css/animations.css" />');
                $(function(){

                    //rewind all animations and remove classes when they appear
                    $('.sequential').appear({
                        once:true,
                        forEachVisible:function(i,e){   if(i==0)return; $(e).addClass('delay'+i); },
                        appear:function(){      $(this).removeClass('init').removeClass('disappear');   },
                        disappear:function(){   $(this).addClass('disappear');  }
                    });
                    $('.sequentialChildren > *').each(function(ic,e){
                        //if(i==0) return;  $(e).addClass('delay'+i);
                        $(e).appear({
                            once:true,
                            forEachVisible:function(i,e){   if(ic==0)   return; $(e).addClass('delay'+ic); },
                            appear:function(){      $(this).removeClass('init').removeClass('disappear');   },
                            disappear:function(){   $(this).addClass('disappear');  }
                        });
                    });
                });
            }

通り抜けなければならないコードはたくさんありますが、理解するのはそれほど難しくありません。また、私が投稿したコードブロックの上部にあることに気付くでしょう。

if(!Modernizr.csstransitions)

Modernizr ( http://modernizr.com/ ) は、HTML5/CSS3 機能のブラウザー検出 JS ライブラリです。このサイトでは、そのライブラリを使用して、ユーザーのブラウザーが記述されているコードに準拠した機能であることを確認します。

別の人気のある CSS アニメーション ライブラリは、Animate.css http://daneden.me/animate/です。

これらすべてをチェックして、良いスタートを切る必要があります

于 2012-08-02T12:21:50.397 に答える