當網站打開時顯示緩動效果

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演示等。