Diviのスティッキーオプションを使用して、移動せずにスクロールのスタイルを変更する方法

新しいウェブサイトを構築するときにすっきりとしたデザインスタイルを求めているのであれば、ウェブサイトにさらに次元を追加する方法を見つけたいと思うでしょう。 このチュートリアルはそれについてのすべてです。 Diviのスティッキーオプションを使用して、動かずにスティッキースタイルを変更する方法を紹介します。 具体的には、訪問者がページの特定の部分をスクロールするとすぐに、その部分のスタイルは変更されますが、要素はそのまま残ります。 このタイプの効果は、ユーザーの行動に完全に焦点を合わせています。 スティッキースタイルの変更は、人々がそれをスクロールしたときにのみ発生し、美しい結果をもたらします。 このチュートリアルでは、そこに到達する方法を段階的に説明します。 アプローチを取得すると、構築するあらゆる種類のデザインで使用できるようになります。 JSONファイルも無料でダウンロードできます。

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

プレビュー

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

デスクトップ

モバイル

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

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

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

無料でダウンロード

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

ダウンロード

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

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

新しいセクションを追加

可視性

作業中のページに新しいセクションを追加することから始めます。 セクション設定を開き、[詳細設定]タブでオーバーフローを非表示にします。 これにより、水平スクロールバーが表示されなくなります。

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

新しい行を追加

カラム構造

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

サイジング

モジュールを追加せずに、行設定を開き、それに応じてサイズ設定を変更します。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 列の高さを等しくする：はい
• 幅：100％
• 最大幅：2580px

間隔

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

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

列1の設定

間隔

次に、列1の設定を開き、さまざまな画面サイズにカスタムパディング値を適用します。

• トップパディング：
  • デスクトップ：200px
  • タブレット：100px
  • 電話番号：80px
• ボトムパディング：
  • デスクトップ：200px
  • タブレット：100px
  • 電話番号：80px

Zインデックス

この列のzインデックスも増やします。 チュートリアルの後半で、列1と列2の間に水平方向のオーバーラップを作成します。列1のモジュールが列2のモジュールの上に留まるように、zインデックスを増やしています。

• Zインデックス：11

列2の設定

背景色

次に、列2に背景色を追加します。

• 背景色：＃f9f9f9

間隔

さまざまな画面サイズでいくつかのカスタムパディング値も使用します。

• トップパディング：
  • デスクトップ：200px
  • タブレット：150px
  • 電話番号：100px
• ボトムパディング：
  • デスクトップ：200px
  • タブレット：150px
  • 電話番号：100px

列3の設定

間隔

最後になりましたが、列3にもいくつかのカスタムパディング値を追加します。

• トップパディング：
  • デスクトップ：200px
  • タブレット：100px
  • 電話番号：50px
• ボトムパディング：
  • デスクトップ：200px
  • タブレット：100px
  • 電話番号：50px
• 左パディング：8％
• 右パディング：8％

列1にテキストモジュールを追加

コピーを追加

1列目のテキストモジュールから始めて、モジュールを追加します。コンテンツボックスに番号を追加します。

背景色

次に背景色を変更します。

• 背景色：#efefef

テキスト設定

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

• テキストフォント：Montserrat
• テキストの色：#ffffff
• テキストサイズ：100px
• テキスト行の高さ：1em
• テキストの配置：中央

サイジング

次に幅を変更します。

• 幅：150px

間隔

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

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

ポジション

モジュールも再配置します。

• 位置：絶対
• 場所：右下
• 水平オフセット：-5％

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

H3とH4のコピーを追加

2番目の列に進みます。 そこで、H3とH4のコピーを含むテキストモジュールを追加します。

テキスト設定

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

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

H3テキスト設定

次に、H3テキスト設定を変更します。

• 見出し3フォント：プレイフェアディスプレイ
• 見出し3テキストの配置：中央
• 見出し3テキストサイズ：
  • デスクトップ：90px
  • タブレット：70px
  • 電話番号：60px

H4テキスト設定

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

• 見出し4フォント：Montserrat
• 見出し4フォントの太さ：軽い

サイジング

次に、サイズ設定に移動し、「100％」の幅を適用します。 これは、モジュールの再配置である次のステップに役立ちます。

• 幅：100％

ポジション

[詳細設定]タブに移動し、次のように位置設定を変更して、モジュール設定を完了します。

• 位置：絶対
• 場所：左下
• 垂直オフセット：20px

列3にテキストモジュールを追加

H5と段落のコンテンツを追加する

3番目の列に進みます。 選択したH5と段落のコンテンツを含むテキストモジュールを追加します。

テキスト設定

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

• テキストフォント：Montserrat

H5テキスト設定

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

• 見出し5フォント：Montserrat
• 見出し5フォントの太さ：太字
• 見出し5テキストサイズ：
  • デスクトップとタブレット：23px
  • 電話番号：18px

2.効果を生み出すための主な変更

セクション

セクションパディングを削除する

デザインの基礎ができたので、この投稿のプレビューで見ることができたカスタムのスティッキースタイル効果の作成を開始できます。 この効果を達成するための最初のステップは、セクションの上部と下部のパディング値がゼロであることを確認することです。 これを行うと、セクションと行の両方が同じポイントで開始および終了することを保証するのに役立ちます。 これは、次の手順でスティッキーポジションを行に追加するときに重要です。 セクションの下部に制限を設定することにより、行を移動する余地を残しません。 ただし、行はその数秒間スティッキーになり、デザインで変更されたスティッキースタイルが強調表示されます。

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

行

行スティッキーを回す

行の設定を開き、行をスティッキーにします。 前のステップで述べたように、行のスティッキーの下限がセクションであることを確認することが重要です。 行の終わりとセクションの終わりの間にスペースがないため、粘着性のある列は所定の位置に留まります。

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

粘着性のある行の背景色

私たちの要素にいくつかの粘着性のあるスタイルを適用し始める時が来ました！ 行の背景色から始めます。

• 背景色：＃161616

行遷移

スムーズな移行を確実にするために、行の[詳細設定]タブで移行期間を長くします。

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

スティッキーカラム2の背景色

次に、スティッキー列2の背景色を変更します。

• 背景色：＃262626

列1のテキストモジュール

粘着性のある背景色

1列目のテキストモジュールの背景色も変更します。

• 背景色：＃ddc7b5

スティッキーテキストの色

粘着性のあるテキストの色と一緒に。

• テキストの色：＃0a0a0a

スティッキーサイジング

そして、サイズ設定でモジュールの幅を広げます。

• 幅：105％

遷移

[詳細設定]タブでモジュールの移行期間を変更することで、スムーズな移行を保証します。

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

列2のテキストモジュール

スティッキーテキストの色

次に、2列目にテキストモジュールがあります。テキストの色をスティッキーな状態で明るい色に変更します。

• テキストの色：明るい

列3のテキストモジュール

スティッキーテキストの色

3列目のテキストモジュールについても同じことが言えます。

• テキストの色：明るい

3.再利用のためのクローンセクション

スティッキースタイルの変更効果を含む最初のセクションが完了したので、クローンを作成することで、このセクションを何度でも再利用できます。

すべてのコピーを変更

重複するコピーはすべて変更してください。

最初のセクションに上マージンを追加し、最後のセクションに下マージンを追加します

最後になりましたが、最初のセクションに上部マージンを追加し、最後のセクションに下部マージンを追加します。 これにより、ユーザーがスクロールを開始する前にすぐに移行するのを防ぐことができます。 それでおしまい！

• トップマージン：200px

• 下マージン：200px

プレビュー

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

デスクトップ

モバイル

最終的な考え

この投稿では、Diviのスティッキーオプションを使ってクリエイティブになる方法を紹介しました。 具体的には、Diviスティッキーオプションを使用して、動きを追加せずにスティッキースタイルを変更しました。 ユーザーがページの特定の部分をスクロールするとすぐに、デザインのスタイルが変更され、ページの特定の部分が強調表示されます。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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