当网站打开时显示缓动效果

Question

如何在页面打开时显示缓动效果，从左侧打开？像这样的网站：http://focuslabllc.com/

Answer 1

您可以最初隐藏您的内容（使用CSS），然后，一旦页面内容被加载，使用javascript来触发/运行缓动操作来使事情可见。或者，你可以从没有内容开始，用JavaScript来构建页面内容，并用你想要的缓动来显示它。

Answer 2

您可以使用JQuery动画或YUI转换来实现此目的。隐藏div并显示它或者将宽度设置为0，然后在特定持续时间内将其设置为最大值。

Answer 3

我会使用CSS转换。看看我创建http://jsfiddle.net/ZL9m7/1/

相对CSS的例子作为

.container { 
    opacity: 0.1; 
    transition: opacity 1s linear; 
    -webkit-transition: opacity 1s linear; /* Play with timing functions */ 
    -moz-transition: opacity 1s linear; 
    -o-transition: opacity 1s linear; 
} 

.container-ease-in { 
    opacity: 1; 
} 

和微小的JavaScript触发器是简单的（jQuery的为舒适）：

$(function() { 
    $('.container').addClass('container-ease-in'); 
}); 

Answer 4

像dfsq-回答动画将由js（这时没有jquery）触发一个类（此时没有jquery）：

window.onload = function() { 
    var oElement = document.getElementById('content'); 
    oElement.className = oElement.className + ' start_animation'; 
}; 

而CSS支持的变化幅度和过渡（-duration）不透明度：

#content { 
    ... 
    /* starting status */ 
    margin: 10px 200px 10px 0px; 
    opacity: 0; 
    /* now set the animation duration */ 
    transition-duration: 1s; 
    -moz-transition-duration: 1s; 
    -webkit-transition-duration: 1s; 
    -o-transition-duration: 1s; 
} 

#content.start_animation { 
    margin: 10px 100px;  /* change horizontal margins */ 
    opacity: 1;    /* change opacity   */ 
} 

也看到这个example。

Answer 5

这是为您所引用的网站编写js的家伙。我使用CSS作为一个选项，但最终只用了jQuery 100％。我将很快发布关于我们新网站改版的一些开发方面的博客文章，然后我将讨论我们如何做到这一点。它将包括一些jsFiddle演示等。