Diviのスクロールで動画の影を作成する方法

公開: 2020-08-05

Webデザインの世界では、通常、シャドウはPhotoshopで追加できるもの、またはCSSプロパティ（box-shadowやtext-shadowなど）と見なされます。しかし、Diviを使用すると、ボックス（またはボックスシャドウ）の外側を考えることができます。 Diviの組み込みフィルターとスクロール効果オプションを少し調整するだけで、任意の画像をリアルな影に変換できます。

このチュートリアルでは、Diviのスクロールで動画の影を作成する方法を紹介します。秘訣は、画像が変換されると、その形状を維持し、画像のリアルな影のように見えるように、一意の形状のPNG画像を見つけることです。画像/影の準備ができたら、いくつかのスクロール効果を追加して、ユーザーがスクロールするときに影を移動できます。この珍しい（まだなじみのある）効果は、サイトに新しい命を吹き込む見事なデザイン要素を追加します。

始めましょう！

スニークピーク

これは、このチュートリアルで構築するデザインの概要です。

レイアウトを無料でダウンロード

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

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

無料でダウンロード

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

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

セクションレイアウトをDiviライブラリにインポートするには、Diviライブラリに移動します。

[インポート]ボタンをクリックします。

移植性ポップアップで、[インポート]タブを選択し、コンピューターからダウンロードファイルを選択します。

次に、インポートボタンをクリックします。

divi通知ボックス

完了すると、セクションレイアウトがDiviBuilderで使用できるようになります。

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

始めるために必要なもの

コーナータブの拡張

開始するには、次のことを行う必要があります。

まだインストールしていない場合は、Diviテーマをインストールしてアクティブ化します。
WordPressで新しいページを作成し、Divi Builderを使用してフロントエンド（ビジュアルビルダー）のページを編集します。
「最初から構築」オプションを選択します。

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

パート1：断面レイアウトの設計

この最初の部分では、動画のシャドウスクロール効果を補完するクイックセクションレイアウトを設計します。

2列の行を追加します

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

divi動画の影

テキストモジュールを追加する

左側の列に、新しいテキストモジュールを追加します。これは、モックテキストコンテンツとして機能します。

divi動画の影

テキストコンテンツ

次に、本文のコンテンツ内に次のHTMLを貼り付けます。

<h2>Our Wedding</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings.</p>

divi動画の影

テキストデザイン

[デザイン]タブで、次のように設定を更新します。

テキストテキストサイズ：16px
テキスト行の高さ：2em

divi動画の影

見出し2フォント：comfortaa
見出し2のテキストの色：＃444235
見出し2テキストサイズ：60px（デスクトップ）、40px（タブレット）

divi動画の影

画像デザインアクセントを追加

テキストモジュールの下で、テキストにデザインアクセントとして機能する画像を追加します。 Holistic Healer LayoutPackの木の枝の画像を使用します。これは、後で動画の影に使用するのと同じ画像になります。

画像を追加

テキストモジュールの下に新しい画像モジュールを追加します。

divi動画の影

次に、画像をアップロードします。

divi動画の影

画像デザイン

[デザイン]タブで、フィルター設定を使用して画像の不透明度を下げます。

不透明度：20％

divi動画の影

次に、次の変換オプションを使用して、画像を左および上に移動します。

変換変換X軸：-20％
変換変換Y軸：-90％

divi動画の影

画像の位置

次に、画像に絶対位置を指定します。

位置：絶対

divi動画の影

パート2：動画シャドウの作成

左の列のモックコンテンツが完成したら、画像とそれらの動画の影の作成を開始する準備が整いました。

メイン画像を追加

右側の列に新しい画像モジュールを追加します。

divi動画の影

次に、幅が800px以上の画像をアップロードします。木の枝の動画シャドウを追加するので、外のどこかの写真を使用するのが理にかなっています。

divi動画の影

次に、次のようにモジュールの下のデフォルトの下マージンを取り出します。

マージンボトム：0px

動画シャドウの作成1

これで、最初の動画シャドウを作成する準備が整いました。基本的な考え方は、画像の透明な背景が表示されないように、PNGファイル形式の画像を使用することです。次に、フィルター効果を使用して明るさ、不透明度、ぼかしを調整し、画像を影のように変換します。 PNG画像は独特の形状をしているため、影も同じ形状を保ちます。

ホリスティックヒーラーレイアウトパックからブランチの同じPNG画像を追加することから始めましょう。

ここにあります…

divi動画の影