GIFおよびHTML5ビデオに3D効果を追加して、Diviで独自の製品アニメーションを表示する

公開: 2019-06-20

アニメーションGIFとHTML5ビデオは、製品がWebサイトでどのように機能するかをアニメーション化するのに最適です。これらの短いアニメーションは、通常のビデオよりも簡単に消化できる方法で、訪問者に貴重な情報を伝えます。これらのタイプのGIFとHTML5ビデオの追加は、Diviを使用して非常に簡単に行うことができます。そして、少しの創造性で、ユニークな製品アニメーションに3D効果を追加できます。

このチュートリアルでは、GIFやHTML5ビデオに3D効果を追加して、Diviで独自の製品アニメーションを表示する方法を紹介します。このデザインは、注目の製品やサービスを紹介するためのクリエイティブなレイアウトを探している人に非常に適しています。これを行うには、まず、Diviを使用してGIFとHTML5ビデオ埋め込みをページに追加する方法を理解する必要があります。次に、Diviの変換オプションを使用して、GIF（またはビデオ）を3D空間に配置および回転できるようになります。最後に、いくつかのDiviデザイン手法を使用して、これらの3DGIFやビデオに合う美しいセクションレイアウトを作成します。

始めましょう。

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。 GIFとHTML5ビデオを使用して製品アニメーションを作成する場合、デザインは似ています。

gifおよびhtml5ビデオ製品のアニメーション

GIFおよびHTML5ビデオ用の3D効果を無料でダウンロード製品アニメーションDiviレイアウト

このチュートリアルのデザインを手に入れるには、まず下のボタンを使用してデザインをダウンロードする必要があります。ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。

チュートリアルに取り掛かりましょう。

私たちのYoutubeチャンネルを購読する

短い製品アニメーションにGIFを使用する

GIFは長い間存在しています。これはおそらく、GIFの作成が簡単で、ブラウザ間で広くサポートされているためです。そして、それらは本当に短い製品アニメーションにうまく機能します。 GIFは画像であるため、他のjpgやpngと同じように、DiviImageモジュールで使用できます。これにより、Diviの組み込み設定を最大限に活用してGIFのスタイルを設定できます。ただし、GIFの長さが長く、フレームレートが高いと、ファイルサイズが非常に大きくなる可能性があることに注意してください。したがって、GIFはできるだけ短くして小さくするのが最善です。

HTML5ビデオをGIFの代替として使用する

HTML5ビデオは、特に長い製品アニメーションで人気のあるGIFの代替品になりつつあります。あなたはそれらが新しいエレガントなテーマのウェブサイトのデザインで使用されていることに気づいたかもしれません。 GIFに比べてサイズが大幅に小さいため、読み込みにかかる時間が短くなります。また、HTML5ビデオをDiviサイトに追加するのは簡単です。あなたがする必要があるのはあなたのページにビデオを埋め込むためにHTML5ビデオ要素を追加することです（WordPressでビデオショートコードを追加する方法と同様です）。非表示のコントロール、ループ、自動再生を使用してビデオをカスタマイズすることもできます。これにより、GIFのように機能する高品質のアニメーションが作成されます。さらに、埋め込みをDiviモジュールに追加する場合、Diviビルダーを使用してクリエイティブな方法でビデオのスタイルを設定することもできます。

通常のGIFよりもHTML5ビデオの使用を検討する必要がある理由の詳細については、この投稿を確認してください。

GIFとHTML5ビデオの使用についてもう少し理解できたので、Diviでそれらを使用する準備が整いました。

このチュートリアルに必要なもの

開始するには、次のものが必要です。

GIF画像
HTML5ビデオ要素の埋め込みで使用されるMP4ビデオファイル（およびそのビデオファイルへのURL）。ブラウザを最大限にサポートするために、同じビデオをwebm形式で含めることもできます（これについては後で詳しく説明します）。
Diviテーマがインストールされ、アクティブになっています
フロントエンドでゼロから構築するために作成された新しいページ（ビジュアルビルダー）

その後、Diviでデザインを開始するための空白のキャンバスが作成されます。

アニメーションGIFまたはHTML5ビデオへの3D効果の追加

gifおよびhtml5ビデオ製品のアニメーション

このチュートリアルの完全なセクションレイアウトの設計に取り掛かる前に、GIFとHTML5ビデオの両方に3D効果を追加する方法を示すのが最善だと思いました。完了したら、セクションレイアウトの残りの部分を素敵なモダンなデザインで磨きます。

とりあえず、DiviのGIFに3D効果を追加することから始めましょう。

GIFの作成

Web上でGIFを作成する方法はたくさんあります。このチュートリアルは、製品の動作をアニメーション化するGIFの作成に関するものなので、画面の一部を（スクリーンレコーダーを使用して）記録してから、ビデオファイルをGIFファイルに変換することをお勧めします。ファイルサイズと読み込み時間を制限するために、GIFをできるだけ小さく作成することを忘れないでください。 GIFが作成されると、Diviの他の画像と同じように使用できるようになります。

Snagitを使用してGIFを作成する方法を学びたい場合は、ホバーでアニメーションGIFを使用して背景画像を切り替える方法に関する投稿を確認してください。

DiviのGIFに3D効果を追加する

次に、GIFをDiviに追加して、クールな3D効果でスタイルを設定できるようにします。

開始するには、2列の行を持つ新しい通常のセクションを追加します。

gifおよびhtml5ビデオ製品のアニメーション

モジュールを追加する前に、GIFを含む列にperspectiveプロパティを追加する必要があります。これを行うには、行設定を開き、次のCSSスニペットを列1のメイン要素に追加します。

perspective: 1000px;

gifおよびhtml5ビデオ製品のアニメーション

このパースペクティブプロパティは、列内の要素にパースペクティブを追加するために必要です。 Diviの変換オプションを使用するときに3D効果を得ることができるように、要素には遠近法が必要です。理解を深めるには、遠近法と変換オプションを使用して3D写真の壁を設計する方法に関する投稿を確認してください。

次に、画像モジュールを列1に追加します。

gifおよびhtml5ビデオ製品のアニメーション

GIFを画像モジュールにアップロードします。このデザインの場合、GIFは約600px x700pxである必要があります。

gifおよびhtml5ビデオ製品のアニメーション

次に、変換オプションを使用して、3D空間でGIFを拡大縮小、回転、傾斜させます。

変換回転Y軸：8度
変換回転X軸：28度

gifおよびhtml5ビデオ製品のアニメーション

変形スキューY軸：10度
変形スキューX軸：-8度

gifおよびhtml5ビデオ製品のアニメーション

変換スケール（タブレット）：80％

gifおよびhtml5ビデオ製品のアニメーション

それでは、結果を見てみましょう。

gifおよびhtml5ビデオ製品のアニメーション

DiviのHTML5ビデオに3D効果を追加する

3D効果を追加する前に、まずHTML5ビデオを作成する必要があります。これを行う方法の手順を以下で説明します。ただし、より完全な説明が必要な場合は、HTML5ビデオを使用して小さいファイルサイズでアニメーションGIFを作成する方法に関する投稿を確認してください。

HTML5ビデオ埋め込みコードの作成

HTML5ビデオ要素の基本構造は次のとおりです。

<video>
    <source src="video.webm" type="video/webm">
    <source src="video.mp4" type="video/mp4">
</video>

このコードが何をしているのかを知るために、HTMLについて多くを知る必要はありません。 <video>要素内には、表示するビデオファイルへのパス/ URLを保持する2つの<source>要素があります。各ソース要素には、異なるファイル形式（webmおよびmp4）のビデオがあります。ブラウザを最大限にサポートするには、両方が必要です。順序も重要です。 webmビデオは、コード内のmp4ビデオの上に配置されます。これは、高品質のビデオ形式ですが、ブラウザーでのサポートが少ないためです。したがって、ブラウザがwebmビデオをサポートしている場合は、それを表示します。ただし、ブラウザがwebmビデオをサポートしていない場合は、その下のmp4ビデオ形式が使用されます。両方のビデオ形式を含める必要はありませんが、ベストプラクティスです。また、1つだけを使用する場合は、より広くサポートされているmp4形式を使用してください。

実際、Diviのビデオモジュールを使用してセルフホストビデオを表示する場合は常に、Diviはこれと同じHTML5ビデオ要素を作成してビデオを表示します。これが、ビデオモジュールでmp4とwebmの両方のビデオファイルを追加できる理由です。

独自のビデオのコードを使用するには、 src属性の後に括弧内にビデオURLを追加する必要があります。

ビデオファイルをWordPressサイトにアップロードすると、メディアライブラリからURLを取得できます。

gifおよびhtml5ビデオ製品のアニメーション

次に、 src属性の後の括弧内にビデオURLを貼り付けます。
gifおよびhtml5ビデオ製品のアニメーション

完了すると、次のようになります。

<video>
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>

次に、ビデオの表示と機能を制御するために4つの属性を追加します。このタイプのコントロールは、Diviビデオモジュールを使用する代わりにHTML5ビデオを手動で挿入する主な理由です。これらの属性には、 autoplay （ビデオが自動的に開始されるようにする）、 loop （ビデオが繰り返されるようにする）、 muted （ビデオがオーディオを再生しないようにする）、およびplaysinline （ビデオが要素の再生領域内で再生されるようにする）が含まれます。これらの属性を動画に適用するには、最初の<video>タグの角かっこ内に各属性を追加します。

これで、コードは次のようになります。

<video autoplay loop muted playsinline>
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.webm" type="video/webm">
    <source src="https://www.elegantthemes.com/blog/wp-content/uploads/2019/06/myvideo.mp4" type="video/mp4">
</video>

注：通常、HTML5ビデオにはcontrols属性を適用しcontrolsが、この場合、ビデオがGIFのように機能するように、この属性を省略します。

これで、コードを埋め込む準備ができました。

HTML5ビデオの埋め込み

HTML5ビデオをページに埋め込むために、コードモジュールを使用できます。

GIF画像モジュールをコードモジュールに置き換える前に、GIFの例を維持できるように、セクション全体を複製してみましょう。複製されたセクションで、画像モジュールを削除し、その場所にテキストモジュールを追加します。

gifおよびhtml5ビデオ製品のアニメーション

次に、HTML5ビデオ埋め込みコードをコード入力ボックスに貼り付けます。

gifおよびhtml5ビデオ製品のアニメーション

次に、画像モジュールから変換スタイルをコピーし、変換スタイルをコードモジュールに貼り付けます。または、次のように変換スタイルを更新できます。

変換回転Y軸：8度
変換回転X軸：28度
変形スキューY軸：10度
変形スキューX軸：-8度
変換スケール（タブレット）：80％

gifおよびhtml5ビデオ製品のアニメーション

GIFの作成に使用したのと同じビデオを使用しているため、デザインは非常によく似ています。ただし、ビデオのサイズはGIFのサイズよりも大幅に小さくなっています。結果は次のとおりです。

gifおよびhtml5ビデオ製品のアニメーション

断面レイアウトの設計を完了する

これで、3D GIF（またはHTML5ビデオ）が配置されました。セクションレイアウトのデザインを完成させることができます。このデザインでは、列1のHTML5ビデオのセクションを使用します。

セクションと行のカスタマイズ

セクション設定を開き、以下を更新します。

パディング：上15％、下15％

gifおよびhtml5ビデオ製品のアニメーション

次に、行の設定を開き、以下を更新します。

背景グラデーションの左の色：＃ba7fe8
背景のグラデーションの正しい色：＃4b84ff

最大高さ：300px（デスクトップ）、なし（タブレットと電話）

パディング：0px上、0px下

gifおよびhtml5ビデオ製品のアニメーション

次に、ユニークなデザイン要素の半透明の内側のボックスの影を行に与えることができます。

ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの水平位置：0px
ボックスシャドウの垂直位置：0px
ボックスシャドウスプレッド強度：40px
影の色：rgba（255,255,255,0.89）

gifおよびhtml5ビデオ製品のアニメーション

コードモジュールの配置

次に、次のようにtransform translateプロパティを調整して、ビデオ付きのコードモジュールを少し上げてみましょう。

変換変換Y軸：-20％（デスクトップ）、-7％（電話）

gifおよびhtml5ビデオ製品のアニメーション

召喚状モジュールの追加

設計を完了するために、2列目にアクションモジュールの呼び出しを追加しましょう。これは、ボタンを使用して注目製品の説明を追加するのに最適な場所です。

gifおよびhtml5ビデオ製品のアニメーション

ボタンリンクURLを追加して、ボタンを表示します。

gifおよびhtml5ビデオ製品のアニメーション

次のように設定を更新し続けます。

背景色：#ffffff
テキストの配置：左
テキストの色：暗い

gifおよびhtml5ビデオ製品のアニメーション

タイトルフォント：ラト
タイトルフォントの太さ：太字
タイトルテキストの色：＃20292f
ボディフォント：ラト
本文の色：＃6d7c90
本文サイズ：17px
ボディラインの高さ：1.8em

gifおよびhtml5ビデオ製品のアニメーション

ボタンのテキストサイズ：12px
ボタンのテキストの色：#ffffff
ボタンの背景色：＃4b84ff
ボタンの境界線の幅：0px
ボタンの境界線半径：100px
ボタンの文字間隔：2px
ボタンフォント：ラト
ボタンのフォントの太さ：重い
ボタンのフォントスタイル：TT
ボタンのパディング：上12px、下12px、左20px、右20px

gifおよびhtml5ビデオ製品のアニメーション

ボックスシャドウ：スクリーンショットを参照
ボックスシャドウの垂直位置：0px
ボックスシャドウスプレッド強度：40px
影の色：rgba（103,151,255,0.11）

gifおよびhtml5ビデオ製品のアニメーション

マージン：10％右

変換変換Y軸：-33％（デスクトップ）、-15％（電話）
変換変換X軸：-5％

gifおよびhtml5ビデオ製品のアニメーション

最終結果

デスクトップ

gifおよびhtml5ビデオ製品のアニメーション

タブレット

gifおよびhtml5ビデオ製品のアニメーション

電話

gifおよびhtml5ビデオ製品のアニメーション

最終的な考え

GIFやHTML5ビデオに3D効果を追加すると、これらの製品アニメーションに独自の表示が得られます。 Diviの変換オプション（perspectiveプロパティと組み合わせて）を使用すると、GIFやビデオに3D効果を簡単に追加できます。

そして、うまくいけば、DiviでGIFとHTML5ビデオを使用する方法についていくつかのことを学んだことでしょう。 GIFは簡単に使用できますが、ファイルサイズをWebフレンドリーに保つのは困難です。 HTML5ビデオでは、埋め込みコードを使用する必要がありますが、長いアニメーションのGIF置換として非常にうまく機能します。

次のプロジェクトで製品やサービスのアニメーションを紹介するために、このデザインを使用する新しいエキサイティングな方法を自由に探索してください。

コメントでお返事をお待ちしております。

乾杯！

GIFおよびHTML5ビデオに3D効果を追加して、Diviで独自の製品アニメーションを表示する

スニークピーク

GIFおよびHTML5ビデオ用の3D効果を無料でダウンロード製品アニメーションDiviレイアウト

無料でダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

短い製品アニメーションにGIFを使用する

HTML5ビデオをGIFの代替として使用する

このチュートリアルに必要なもの

アニメーションGIFまたはHTML5ビデオへの3D効果の追加

GIFの作成

DiviのGIFに3D効果を追加する

DiviのHTML5ビデオに3D効果を追加する

HTML5ビデオ埋め込みコードの作成

HTML5ビデオの埋め込み

断面レイアウトの設計を完了する

セクションと行のカスタマイズ

コードモジュールの配置

召喚状モジュールの追加

最終結果

デスクトップ

タブレット

電話

最終的な考え

正常にサブスクライブしました。メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。