Diviのスティッキーオプションを使用して視差コピートランジションを作成する方法

ページのデザインにスパイスを加えるクリエイティブな方法を探している場合は、視差効果が役立ちます。 それらは、あまり侵襲的でなくても、スクロールにその余分な相互作用をもたらします。 その視差効果をページの複数のセクションに拡張する方法を探しているなら、このチュートリアルを気に入るはずです。 今日は、Diviのスティッキーオプションを使用して視差コピートランジションを作成する方法を紹介します。 訪問者が特定のセクションを通過するとすぐに、コピーは視差の背景画像とともに下にスクロールします。これは非常にすっきりとした効果をもたらします。 行の次のセクションに到達するとすぐに、コピーは別のタイトルに置き換えられます。 私たちが目指している結果は、すべての画面サイズで見栄えがよく、JSONファイルも無料でダウンロードできます。

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

プレビュー

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

デスクトップ

モバイル

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

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

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

無料でダウンロード

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

ダウンロード

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

https://youtu.be/uZCD0__Apjk

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

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

新しいセクションを追加

作業中のページに新しいセクションを追加することから始めます。 この効果は、これから作成するレイアウトの上下にコンテンツがある場合に特に効果的です。

新しい行を追加

カラム構造

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

サイジング

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

• 列の高さを等しくする：はい
• 幅：95％
• 最大幅：100％

間隔

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

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

列の背景画像

一般的な行設定を変更したので、行内の列にもいくつかのカスタム設定を適用します。 列の設定を開くことから始めます。

背景画像をアップロードして、視差効果を有効にします。

• 視差効果を使用する：はい
• 視差法：CSS

列の間隔

次に、[デザイン]タブに移動し、カスタムの下部パディングを適用します。

• ボトムパディング：50vh

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

H2コンテンツを追加する

選択したH2コンテンツを含むテキストモジュールから始めて、モジュールを追加します。

H2テキスト設定

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

• 見出し2フォント：Montserrat
• 見出し2フォントの太さ：太字
• 見出し2フォントスタイル：大文字
• 見出し2のテキストの色：#ffffff
• 見出し2テキストサイズ：
  • デスクトップ：9vw
  • タブレット：14vw
  • 電話：15vw

フィルタ

フィルタ設定でもブレンドモードを有効にしています。

• ブレンドモード：オーバーレイ

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

コピーを追加

この列で必要な次の最後のモジュールはボタンモジュールです。 選択したコピーをいくつか追加します。

リンクを追加

次に、リンクを挿入します。

ボタンの設定

次に、モジュールの[デザイン]タブに移動し、それに応じてボタンの設定を変更します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：
  • デスクトップ：2vw
  • タブレットと電話：7vw
• ボタンのテキストの色：#ffffff
• ボタンの境界線の幅：0px
• ボタンの文字間隔：0.06vw

• ボタンフォント：Karla
• ボタンアイコンを表示：はい
• ボタンアイコンの配置：左
• ボタンのホバー時にアイコンのみを表示：いいえ

間隔

カスタムの上部と下部のパディングも追加します。

• トップパディング：8％
• ボトムパディング：8％

ポジション

そして、列の右下隅にモジュールを再配置して、モジュール設定を完了します。

• 位置：絶対
• 場所：右下

2.効果を得るために必要な手順

テキストモジュールをスティッキーにする

必要なすべての要素を使用してデザインの基盤を設定したので、視差コピーの移行を有効にします。 そのために、テキストモジュールでDiviの組み込みのスティッキーオプションを使用します。 モジュールの設定を開き、[詳細設定]タブに移動して、次のスティッキー設定を適用します。

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

テキストモジュールの間隔を変更する

ディフォルト

このモジュールでスティッキーオプションを有効にしたので、スティッキースタイルを適用できます。 デフォルトでは、モジュールは列自体の上に配置されます。 また、モジュールのテキストの色が白いため、セクションの背景色に溶け込み、テキストがまったくないように見えます。 このポジショニングを作成するために、さまざまな画面サイズで負の上部マージンを使用します。

• トップマージン：
  • デスクトップ：-10vw
  • タブレット：-14vw
  • 電話番号：-15vw

スティッキー

テキストモジュールがスティッキーになったら、再び表示されるようにします。 これを確実に行うために、この上部マージンをスティッキー状態で「0vh」に戻します。

• スティッキートップマージン：0vh

セクション間隔

また、セクションの上部と下部にいくらかのスペースが必要になるため、背景とテキストモジュールを色でマージできます。 これを行うには、セクション設定を再度開き、カスタムの上部と下部のパディングを適用します。

• トップパディング：10vh
• ボトムパディング：10vh

セクション全体を必要な回数だけクローンします

セクションの設計が完了したら、必要な回数だけクローンを作成できます。

コンテンツとリンクを変更する

重複するセクション内の各モジュールのコンテンツとリンクを変更してください。これで完了です。

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、Diviのスティッキーオプションを使ってクリエイティブになる方法を紹介しました。 より正確には、ページの複数のセクション全体に視差効果を拡張できる視差コピー遷移を作成する方法を示しました。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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