輕微的背景縮放DOM負載？

Question

如何重現此網站上的效果：

https://shop.stripe.com/

我的意思是等待DOM來顯示什麼，然後有背景圖像縮小爲1秒之前完全加載。很酷。

Answer 1

它使用不同的轉換和變換完成。演示：http://jsfiddle.net/lotusgodkk/eHAuh/2/

關鍵是在document.ready

HTML添加/刪除類：

<div id="DIV_1" class="scaled"></div> 

JS：

$(document).ready(function() { 
    $('#DIV_1').attr('class', 'animatable'); 
    setTimeout(function() { 
     $('#DIV_1').removeClass('animatable'); 
    }, 1000) 
}); 

CSS：

#DIV_1 { 
    background-position: 50% 50%; 
    bottom: 0px; 
    height: 472px; 
    left: 0px; 
    position: absolute; 
    right: 0px; 
    top: 0px; 
    width: 600px; 
    z-index: 1; 
    background: rgba(0, 0, 0, 0) url(https://shop.stripe.com/assets/images/showcase/thairu-kat.jpg) no-repeat scroll 50% 50%/cover padding-box border-box; 
    font: normal normal normal 16px/normal Helvetica, Arial, sans-serif; 
    zoom:1.1; 
    background-size:cover; 
} 
/*#DIV_1*/ 
.animatable { 
    -webkit-transition:all 750ms ease-out; 
    transition:all 750ms ease-out; 
} 
.scaled { 
    -webkit-transform:scale(1.02); 
    transform:scale(1.02); 
} 

Answer 2

您也可以使用純JavaScript做到這一點很容易：

CSS：

#blackdiv { background: black; color: white; position: fixed; width: 100%; height: 100%; } 

HTML：

<div id="blackdiv"></div> 
<div>page content</div> 

JS：

window.onload = function(){ 
    var blackdiv = document.getElementById('blackdiv'); 
    blackdiv.style.opacity = 1; 
    doIt(); 
}; 

var doIt = function(){ 
    if(blackdiv.style.opacity > 0){ 
     console.log(blackdiv.style.opacity); 
     blackdiv.style.opacity -= .1; 
     setTimeout("doIt()", 100); 
    } 
} 

Check jsFiddle