javascript - ラップトップの蓋が開く効果

Question

MacBook が WhitePage ( http://whitepagehq.com ) のホームページで開く方法が気に入っています。同様の効果を作りたいと思います。

これは、CSS アニメーション、JQuery、またはその両方を使用して作成されていますか? インスペクタからはわかりません。似たようなアニメをどこかで見たことがありますか？

どうすれば私のウェブサイト用にこのようなものを作ることができますか?

Answer 1

次の 2 つのイメージがあります。

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

アニメーションではlaptop-open.png、ドキュメントの準備ができたときに画像の高さを変更するだけです。

これは jQuery を使用して行われます (メイン ページの 126 行目から):

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);

Answer 2

このコードは jQuery.animate() メソッドによって行われ、インライン js スクリプトで見つけることができます。(ソースを表示 -> 126 行目)。基本的に、それらは「閉じた」画像と同時に「開いた」画像の高さを変化させます。開いた画像が拡大し、ふたの閉じた部分が上に移動します。

Answer 3

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);