Question

实际上这个网站有我想要的：http://www.3magine.com/our-work/

我可以看到所有的动画都是用css3完成的，但它们如何延迟动画并仅在滚动时显示内容？

没有javascript，我理解并非不可能？

Answer 1

您可以在http://www.netmagazine.com/tutorials/getting-animations-trigger-right-time找到有关我们如何构建主页动画的完整教程

希望这有帮助。

Answer 2

回答你的上一个问题，不，这不能用严格的CSS来实现（你为什么也要这样，JS很棒）。

这个网站使用一些JS和CSS3来完成这些事情。

看一下链接的JS文件。他们在你提到的网站上使用它

http://www.3magine.com/wp-content/themes/3magine/js/jquery.appear-1.1.1.modified.js（jQuery出现插件也在Google Code上）

结合此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/

检查所有这些事情，你应该有一个良好的开端

延迟动画并仅在滚动时显示

2 个答案: