Diviを使用してスクロールで画像スワップを作成する方法

インタラクティブなデザインを作成することには多くの利点があります。 それらの1つは、より多くのビジュアルコンテンツを単一のセクションに収め、訪問者がスクロールしているときにビジュアルコンテンツがどのように表示されるかを決定できるという事実です。 それは訪問者があなたのウェブサイトで持っている全体的なユーザーエクスペリエンスを高め、あなたのウェブデザインの努力を次のレベルに引き上げます。 今日のチュートリアルでは、Diviの新しいスクロール効果を使用してスクロール時に画像スワップを作成する方法を示します。 4つの異なる画像が切り替わります。 JSONファイルも無料でダウンロードできます！

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

モバイル

スクロール効果レイアウトの画像スワップを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

1.要素構造を作成します

新しい通常のセクションを追加する

作業中のページに新しい通常のセクションを追加することから始めます。

新しい行を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

サイジング

モジュールをまだ追加せずに、行の設定を開き、次のように行のサイズを変更します。

• 幅：100％
• 最大幅：100％

列1の設定

間隔

次に、列1の設定を開き、さまざまな画面サイズで間隔の値を変更します。

• トップパディング：50px（デスクトップ）、0px（タブレットと電話）
• 下部のパディング：50px（デスクトップ）、120％（タブレット）、140％（電話）

列2の設定

間隔

2番目の列にもパディングを追加します。

• トップパディング：12vw
• ボトムパディング：12vw
• 左パディング：5vw
• 右パディング：5vw

列1に画像モジュールを追加

背景が透明な画像をアップロードする

1列目の最初のテキストモジュールから始めて、モジュールを追加します。1：1の比率で、背景が透明な製品画像をアップロードします。

背景色

次に、背景設定に移動し、背景色を変更します。

• 背景色：＃b3485e

サイジング

次に、サイズ設定で[全幅を強制]オプションを有効にします。

• 全幅を強制：はい

間隔

そして、上部と下部のパディングを追加して、モジュール設定を完了します。

• トップパディング：100px
• ボトムパディング：100px

クローンイメージモジュール3x

列1の最初のイメージモジュールを完了すると、モジュール全体を3回複製できます。

画像を変更する

複製された各イメージモジュールのイメージを変更します。

背景色を変更する

そして、新しい画像を選択した背景色と一致させます。

• 背景色1：＃ffda60
• 背景色2：＃e6674d
• 背景色3：＃b4ff99

テキストモジュール＃1を列2に追加します

H2コンテンツを追加する

2番目の列に進みます。 そこで必要な最初のモジュールは、H2コンテンツを含むテキストモジュールです。

H2テキスト設定

モジュールの[デザイン]タブに移動し、H2テキスト設定を次のように変更します。

• 見出し2フォント：アントン
• 見出し2のテキストの色：＃000000
• 見出し2テキストサイズ：4vw（デスクトップ）、8vw（タブレット）、10vw（電話）
• 見出し2行の高さ：1.4em

テキストモジュール＃2を列2に追加します

コンテンツを追加する

前のテキストモジュールのすぐ下に別のテキストモジュールを追加し、選択した説明コンテンツを入力します。

テキスト設定

[デザイン]タブに移動し、テキスト設定にいくつかの変更を加えます。

• テキストフォント：Open Sans
• テキストサイズ：0.9vw（デスクトップ）、2vw（タブレット）、2.5vw（電話）
• テキスト行の高さ：2.6em

ボタンモジュールを列2に追加

コピーを追加

列2で必要な次の最後のモジュールは、ボタンモジュールです。 お好みのコピーを入力してください。

ボタンの設定

次に、それに応じてボタンのスタイルを設定します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：20px
• ボタンのテキストの色：#ffffff
• ボタンの背景色：＃000000
• ボタンの境界線の幅：0px
• ボタンの境界線半径：100px

• ボタンフォント：アントン

間隔

間隔設定にもいくつかのカスタムパディング値を追加します。

• トップパディング：50px
• ボトムパディング：50px
• 左パディング：33px
• 右パディング：33px

2.画像​​にスクロール効果を適用する

画像モジュール＃1フェードインおよびフェードアウト

両方の列のモジュールを完了したら、スクロール効果を適用します。 追加するスクロール効果は、列1の4つの画像モジュールごとに異なります。設定を微調整して、1つの画像が次々に表示されるようにしました。 最初の画像モジュールを開き、次のフェードインおよびフェードアウトスクロール効果を使用します。

• フェードインとフェードアウトを有効にする：はい
• 開始時の不透明度：100％
• 中程度の不透明度：100％（0％から39％）
• 終了不透明度：0％（40％）
• モーションエフェクトトリガー：要素の中央

画像モジュール＃2フェードインおよびフェードアウト

次に、2番目の画像を開き、フェードインとフェードアウトの設定を使用します。

• フェードインとフェードアウトを有効にする：はい
• 開始時の不透明度：0％（40％）
• 中程度の不透明度：100％（40％から49％）
• 終了不透明度：0％（50％）
• モーションエフェクトトリガー：要素の中央

画像モジュール＃3フェードインおよびフェードアウト

3番目の画像モジュールにもフェードインおよびフェードアウトスクロール効果を追加します。

• フェードインとフェードアウトを有効にする：はい
• 開始時の不透明度：0％（50％）
• 中程度の不透明度：100％（50％から59％）
• 終了不透明度：0％（60％）
• モーションエフェクトトリガー：要素の中央

画像モジュール＃4フェードインおよびフェードアウト

そして、列の最後の画像モジュールに次のフェードインおよびフェードアウトスクロール効果を追加して、スクロール効果を完成させます。

• フェードインとフェードアウトを有効にする：はい
• 開始時の不透明度：0％（60％）
• 中程度の不透明度：100％（60％から100％）
• 終了不透明度：100％

3.位置設定を最初の画像に追加し、列内のすべての画像に展開します

画像モジュール＃1に絶対位置を追加

ここで、スクロール中に画像が次々に表示されるようにするには、Diviの位置オプションを使用して画像モジュールを重ねて配置する必要があります。 最初の画像モジュールを開き、[詳細設定]タブに移動して、絶対位置を使用します。

• 位置：絶対
• 場所：左上

位置設定を列内のすべての画像に拡張

列内の各画像モジュールに位置スタイルを拡張して続行すると、完了です。

• 宛先：すべての画像
• 全体：このコラム

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

モバイル

最終的な考え

この投稿では、スクロール時に画像スワップを作成する方法を紹介しました。 この手法を使用すると、訪問者がページを下にスクロールしているときに、セクション内の複数の画像を切り替えることができます。 JSONファイルも無料でダウンロードできました！ ご不明な点がございましたら、下のコメント欄にコメントを残してください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。