筆記本電腦開蓋效果

I 愛 MacBook在WhitePage（http://whitepagehq.com）主頁上打開的方式。我想創建一個類似的效果。筆記本電腦開蓋效果

這是使用CSS Animation，JQuery還是兩者創建的？我似乎無法從督察身上找出答案。你在別的地方看過類似的動畫嗎？

我該如何爲我的網站製作這樣的東西？

2013-03-28 17andLearning

正如別人所說，他們只是改變圖片的高度。如果你問我一個小問題，但由於蓋子沒有完全打開，這並不重要。如果你想製作一個蓋子完全打開的動畫，請查看css變換：http://www.w3schools.com/cssref/css3_pr_transform.asp – lordvlad 2013-03-28 10:43:46

有兩個圖像：

<img src="lib/img/laptop-closed.png" class="lid-closed"/> 
<img src="lib/img/laptop-open.png?1" class="lid-open"/>

動畫只是涉及到更改對文件準備好laptop-open.png圖像的高度。

setTimeout(function() { 
    $('.lid-closed').animate({ 
     top:10, 
     height:9, 
     width:840 
    }, { 
     easing:'linear', 
     duration:500 
    }); 

    $('.lid-open').animate({ 
     height:207 
    }, { 
     easing:'easeOutQuad', 
     duration:1000 
    }); 
}, 1000);

來源

2013-03-28 10:34:29

他們使用jQuery動畫打開筆記本電腦圖像的高度：

setTimeout(function(){ 
    $('.lid-closed').animate({ 
     top: 10, 
     height: 9, 
     width: 840 
    }, 
    { 
     easing: 'linear', 
     duration: 500 
    });$('.lid-open').animate({ 
     height: 207 
    }, 
    { 
     easing: 'easeOutQuad', 
     duration: 1000 
    }); 
}, 
1000);

來源

2013-03-28 10:35:50 James

此代碼是

這是使用jQuery（主頁面內管線126）完成通過jQuery.animate（）方法完成，你可以在他們的內聯js腳本中找到它。（查看源代碼 - >第126行）。基本上，他們在「封閉」圖像的同時改變了「開放」圖像的高度。打開的圖像膨脹，蓋子的封閉部分向上移動。

來源

2013-03-28 10:46:51

筆記本電腦開蓋效果

回答

相關問題