wordpress - ドロップボックスはどのようにランディングページを作成しましたか？

Question

DropBoxをエミュレートするランディングページを作成しようとしています（ワードプレスで）。背景ボックスに重なっている再生ボタンをクリックしてビデオに変える効果をどのように達成したのだろうか？

ソースから、彼らはJWプレーヤーを使用していることがわかりますが、これをどこから始めればよいのかわかりません。これを可能にするスキンを購入できますか？私を正しい方向に導くためのアイデアはありがたいです。

ありがとう

Answer 1

jqueryとcssで簡単にできます。最初に、両方の div をページの中央に絶対配置して、一方が他方の上に表示されるようにしてから、ビデオ div css を「display:none;」に設定します。次に、jquery を使用してビデオを表示し、クリック時に再生ボタンを非表示にできます。次のようになります。

$(function(){
    $('#play-btn').click(function(){
        $('#play-btn').hide();
        $('#video').show();
    });
});

簡単にできました。それらは中央に配置する必要はなく、上下に配置する必要があることに注意してください...