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 很棒）。

本站使用一些 JS 结合 CSS3 来完成这些事情。

查看链接的 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 回答