Diviで絶対位置画像モジュールをズームアウト視差背景として使用する方法
公開: 2020-04-23セクションで背景画像を使用する場合、その画像をすぐにスタイル設定する方法がいくつかあります。 ブレンドモード、グラデーションの背景オーバーレイを使用して、視差効果を有効にすることができます。 現在、Diviの新しいスクロール効果を使用すると、アニメーションをさらに一歩進めて、ズームアウト効果と視差効果を美しく組み合わせて、Webデザインの別の種類の次元を拡大できます。 これを行うには、絶対位置の画像モジュールとビューポート幅の単位を使用します。 このチュートリアルでは、無料でダウンロードできる美しいケーススタディのCTAデザインを再現することにより、プロセスをガイドします。
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
絶対位置画像モジュールのレイアウトを無料でダウンロード
無料の絶対配置画像モジュールレイアウトに手を置くには、最初に下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
再作成を始めましょう！
新しいセクションを追加
背景色
作業中のページに新しいセクションを追加することから始めます。 セクション設定を開き、背景色を変更します。
- 背景色：＃000000
サイジング
セクションの[デザイン]タブに移動し、サイズ設定で幅を変更します。
- 幅：95％
- セクションの配置：中央
間隔
いくつかのカスタム間隔値も追加します。
- トップマージン：5％
- 下マージン：5％
- トップパディング：0px
- ボトムパディング：0px
オーバーフロー
また、セクションのオーバーフローを非表示にしてください。 これは、チュートリアルを機能させるための重要なステップです。 オーバーフローを非表示にすることで、セクションコンテナを超えるものがないことを確認します。
- 水平オーバーフロー：非表示
- 垂直オーバーフロー：非表示
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 幅：100％
- 最大幅：100％
間隔
次に、デフォルトの上下のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
テキストモジュール＃1を列に追加
H2コンテンツを追加する
次に、選択したH2コンテンツを含む最初のテキストモジュールを追加します。
H2テキスト設定
モジュールの[デザイン]タブに移動し、それに応じてH2テキスト設定を変更します。
- 見出し2フォント：Lato
- 見出し2フォントの太さ：軽い
- 見出し2のテキストの色：#ffffff
- 見出し2テキストサイズ：4vw（デスクトップ）、8vw（タブレットと電話）
- 見出し2文字の間隔：1px
間隔
カスタム間隔の値もいくつか追加します。
- トップマージン：25vw（デスクトップ）、50vw（タブレットと電話）
- 左マージン：5％
- 右マージン：5％
テキストモジュール＃2を列に追加
コンテンツを追加する
次に必要なモジュールは、別のテキストモジュールです。 選択した説明コンテンツを追加します。
テキスト設定
モジュールの[デザイン]タブに移動し、次のようにテキスト設定を変更します。
- テキストフォント：Lato
- テキストの色：#ffffff
- テキストサイズ：0.8vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- テキスト行の高さ：2.1em
サイジング
次に、さまざまな画面サイズの幅を変更します。
- 幅：800px（デスクトップ）、80％（タブレット）、90％（電話）
間隔
そして、間隔設定にいくつかのカスタムマージン値を追加して、モジュール設定を完了します。
- トップマージン：2％
- 下マージン：2％
- 左マージン：5％
- 右マージン：5％
ボタンモジュールを列に追加
コピーを追加
次のモジュールであるボタンモジュールに進みます。 選択したコピーをいくつか追加します。
ボタンの設定
次に、[デザイン]タブに移動し、それに応じてボタンのスタイルを設定します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：1.5vw（デスクトップ）、2.5vw（タブレット）、3vw（電話）
- ボタンのテキストの色：#ffffff
- グラデーションカラー1：rgba（255,255,255,0）
- グラデーションカラー2：#ffffff
- グラデーションタイプ：線形
- 開始位置：98％
- 終了位置：98％
- ボタンの境界線の幅：0px
- ボタンフォント：ラト
- ボタンのフォントの太さ：重い
- ボタンアイコンを表示：はい
- ボタンアイコンの配置：左
- ボタンのホバー時にアイコンのみを表示：いいえ
間隔
さまざまな画面サイズでいくつかのカスタム間隔値も使用しています。
- 下マージン：7vw（デスクトップ）、20vw（タブレット）、25vw（電話）
- 左マージン：5％
- 右マージン：5％
列の先頭に画像モジュールを追加
行の列の最初の3つのモジュールを完了したら、絶対位置の画像モジュールを追加して、ズームアウトした背景画像として使用します。 そのための最初のステップは、列の上部に新しい画像モジュールを追加することです。
画像ボックスを空のままにします
画像ボックスは空のままにします。
背景画像
代わりに視差の背景画像を使用してください。 任意の画像を使用できますが、まったく同じ結果を再現したい場合は、このチュートリアルの最初にあるフォルダーをダウンロードすることで、このチュートリアルで使用された画像を見つけることができます。
- 視差効果を使用する：はい
- 視差法：CSS
サイジング
モジュールのデザインタブに移動し、全幅を強制します。
- 全幅を強制：はい
間隔
さまざまな画面サイズにカスタムの上部と下部のパディングも追加します。
- トップパディング：27vw（デスクトップ）、54vw（タブレット）、68vw（電話）
- 下部のパディング：27vw（デスクトップ）、54vw（タブレット）、68vw（電話）
ポジション
ここで、モジュールが列内のコンテナスペースを占有しないようにするために、モジュール全体を[詳細設定]タブに再配置します。
- 位置：絶対
- 場所：左上
上下のスクロール効果のスケーリング
そして、スケールアップとスケールダウンのスクロール効果を追加して、モジュールの設定を完了します。
- スケールアップとスケールダウンを有効にする：はい
- 開始スケール：150％（30％）
- ミッドスケール：150％（45％）
- 終了スケール：100％（55％）
- モーションエフェクトトリガー：要素の中央
セクション全体を必要な回数だけクローンします
最初のセクションを完了したら、必要な回数だけクローンを作成できます。
重複するセクションごとにコピーを変更する
複製ごとに必ずコピーを変更してください。
重複するセクションごとに画像モジュールの背景画像を変更する
画像モジュールの背景画像と一緒に、これで完了です。
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Diviの新しいスクロール効果を使ってクリエイティブになる方法を紹介しました。 具体的には、視差の背景とともに絶対位置の画像モジュールを使用して、美しいセクションのズームアウト効果を作成しました。 このチュートリアルには、無料でダウンロードできる美しいケーススタディのCTAレイアウトが付属しています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。