Diviのスティッキーオプションを使用して画像遷移をトリガーする方法

Diviのスティッキーオプションの多様性は、スティッキーヘッダーの設定を使用するだけではありません。 これを使用して、デザインの変更をトリガーすることもできます。 たとえば、このチュートリアルでは、Diviのスティッキーオプションを使用して画像の遷移をトリガーします。 画像の遷移は、訪問者がスクロールで画像に近づくとすぐに行われます。 2つの異なる例を最初から再作成しますが、アプローチを取得すると、Diviの組み込みオプションのみを使用して独自の画像トランジションを作成できるようになります。 JSONファイルも無料でダウンロードできます！

それを手に入れよう！

プレビュー

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

デスクトップ

モバイル

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

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

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

無料でダウンロード

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

ダウンロード

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

1.一般的な手順

セクション＃1を追加

間隔

チュートリアルの最初の部分では、設計の基盤を構築します。 それが整ったら、この投稿のプレビューで2つの例を達成するために、適切な設定を適用することに集中できます。 作業中のページに新しいセクションを追加し、セクションのデザインタブに移動して、デフォルトの上下のパディングをすべて削除します。

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

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

サイジング

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

• 最大幅：1480px
• 行の配置：中央

間隔

次に、デフォルトの上下のパディングをすべて削除します。

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

Zインデックス

そして、位置設定でazインデックスを設定します。 これは、チュートリアルの後半で追加する次の行の下に行が残るようにするのに役立ちます。

• Zインデックス：1

カラムオーバーフロー

次に、列の設定を開き、オーバーフローを非表示に設定します。

• 水平オーバーフロー：非表示
• 垂直オーバーフロー：非表示

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

画像ボックスを空のままにします

この行に必要なモジュールは画像モジュールだけです。 画像ボックスは空のままにします。

背景画像

代わりに、選択した背景画像を使用してください。

• 背景画像サイズ：カバー
• 背景画像の位置：中央

間隔

画像を表示できるようにするために、さまざまな画面サイズでいくつかのカスタムパディング値を使用します。

• トップパディング：
  • デスクトップ：300px
  • タブレットと電話：150px
• ボトムパディング：
  • デスクトップ：300px
  • タブレットと電話：150px

セクション＃2を追加

間隔

前のセクションのすぐ下に別のセクションを追加します。 セクション設定を開き、間隔設定のデフォルトの上部パディングを削除します。

• トップパディング：0px

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

Zインデックス

この行にもazインデックスを追加します。

• Zインデックス：2

召喚状モジュールを列に追加

コンテンツを追加する

この行で必要なモジュールは、Call toActionモジュールのみです。 選択したコンテンツを追加します。

ボタンリンクを追加

ボタンリンクと一緒に。

背景色

次に、白い背景色を追加します。

• 背景色：#ffffff

テキスト設定

デザインタブに移動し、テキスト設定を変更します。

• テキストの配置：左
• テキストの色：暗い

タイトルテキスト設定

タイトルテキストもスタイル設定します。

• タイトルフォント：プレイフェアディスプレイ
• タイトルフォントスタイル：斜体
• タイトルテキストサイズ
  • デスクトップ：45px
  • タブレット：40px
  • 電話番号：35px
• タイトル文字の間隔：1px

本文の設定

本文だけでなく。

• 本文フォント：Karla
• ボディラインの高さ：2em

ボタンの設定

次に、ボタンのスタイルを設定します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：18px
• ボタンのテキストの色：＃000000
• グラデーションカラー1：#ffffff
• グラデーションカラー2：＃ffdc91
• グラデーションタイプ：線形
• 開始位置：50％
• 終了位置：50％

• ボタンの境界線の幅：0px
• ボタンの境界線半径：0px
• ボタンフォント：Karla
• ボタンのフォントスタイル：大文字
• 表示ボタン：はい

• ボタンアイコンの配置：左
• ボタンのホバー時にアイコンのみを表示：いいえ
• トップパディング：10px
• ボトムパディング：10px
• 左パディング：15％
• 右パディング：15％

サイジング

さまざまな画面サイズでサイズ設定も変更しています。

• 幅：
  • デスクトップ：65％
  • タブレット：80％
  • 電話番号：100％
• モジュールの配置：中央

間隔

次に、間隔設定にいくつかのカスタムマージンとパディング値を追加します。

• トップマージン：
  • デスクトップ：-150px
  • タブレット：-50px
  • 電話番号：0px
• 下マージン：50px
• トップパディング：150px
• ボトムパディング：150px

ボックスシャドウ

そして、微妙なボックスシャドウを追加してモジュール設定を完了します。

• ボックスシャドウォブラー強度：30px
• 影の色：rgba（0,0,0,0.11）

2.行にスティッキー効果を適用します

セクション＃1の行を開く

デザインの基礎ができたので、次はスティッキー効果を適用します。 この粘着性のある効果は、人々が要素をスクロールして通過するときにスタイルを変更するのに役立ちます。 スティッキー効果を追加する要素は、画像を含む最初のセクションの行です。

スティッキー効果を適用する

スティッキーの下限がセクションに設定されていることを確認することが重要です。 行の始点と終点はセクションと同じです。これにより、行が実際にスティッキーにならないようになりますが、スティッキースタイルが適用されます。 スティッキートップオフセットは、トランジションが発生し始めるポイントを決定します。 たとえば、この値がゼロの場合、遷移を開始するには、ブラウザの上部が行の上部に触れる必要があることを意味します。 スティッキートップオフセットを「300px」に設定することで、そのトランジションをより早く作成します。

• スティッキーポジション：トップに固執
• スティッキートップオフセット：300px
• スティッキーボトムリミット：セクション
• 周囲の粘着要素からのオフセット：はい
• トランジションのデフォルトスタイルとスティッキースタイル：はい

最初のセクションの上に等しいトップオフセットがあることを確認してください

スティッキートップオフセットを「300px」に設定したので、それを実現するにはページの上部にスペースが必要です。 ページの途中でこのデザインを使用している場合は、この手順について心配する必要はありません。 ただし、ページの上部でこのアプローチを使用している場合は、スティッキートップオフセットを変更するか、上部に十分なスペースを追加する必要があります。 最初のセクションに上部マージンを追加して、そのスペースを生成します。

• トップマージン：400px

3.ケンバーン効果を画像モジュールに適用します

行がスティッキーになったら、行とそのすべての子要素にスティッキースタイルを適用し始めることができます。 可能性は無限大ですが、2つの異なる例とそれらを実現する方法を紹介します。 2つの異なる例を簡単に試すことができるように、両方のセクションのクローンを1回作成し、最初のセクションの下に配置します。

例1

スティッキー行の設定

ボックスシャドウ

この投稿のプレビューで確認できた例1を再現するには、行の設定を開き、次のボックスの影の設定を適用します。

• ボックスシャドウの垂直位置：0px
• ボックスシャドウスプレッド強度：0px
• 影の色：rgba（0,0,0,0）

• スティッキー垂直位置：100px
• スティッキーシャドウカラー：＃ffdc91

遷移

[詳細設定]タブにもスムーズな移行を含めます。

• 移行時間：500ms
• 遷移速度曲線：使いやすさ

スティッキーイメージモジュールの設定

変換スケール

次に、イメージモジュールを開き、スティッキー状態で変換スケール効果を適用します。

• 両方：100％

• 両方とも粘着性：130％

遷移

モジュールの遷移設定を適宜変更して、スムーズな遷移を確保します。

• 移行時間：1200ms
• 遷移速度曲線：使いやすさ

例2

スティッキー行の設定

変換翻訳

2番目の例に移ります！ 行設定を開き、次の変換変換設定を適用します。

• 右：20％

• スティッキーライト：0％

遷移

行の遷移設定も変更します。

• 移行時間：500ms
• 遷移速度曲線：使いやすさ

スティッキーイメージモジュールの設定

フィルタ

次に、イメージモジュールを開き、デフォルトのスティッキー状態でフィルターを試してみます。

• 飽和度：0％
• 明るさ：50％

• 粘着性の飽和：100％
• 粘着性の明るさ：100％

遷移

次のように遷移設定を変更して、モジュール設定とこのチュートリアルを完了します。

• 移行時間：500ms
• 遷移速度曲線：使いやすさ

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、Diviのスティッキーオプションを使ってクリエイティブになる方法を紹介しました。 具体的には、画像の遷移をトリガーする方法を示しました。 人々が画像をスクロールするとすぐに、画像のスタイルが変化し、美しいトランジションが得られます。 2つの異なる例を扱いましたが、可能性は無限大です。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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