Diviで見出しに追加できる3つの簡単なスクロールモーションエフェクト

Diviの新しいスクロール効果は、作成するページに多くの新しいデザインの可能性をもたらします。 カスタマイズされたスクロール効果を各コンテナに追加し、それに応じて効果を同期させることができます。 このデザインの自由度は、特定のコンテンツをエレガントな方法で簡単に強調するのに役立ちます。 このチュートリアルでは、見出しにスクロールモーション効果を追加する方法を示します。 そうすれば、見出しに特に重点を置き、訪問者の関与を維持できます。 JSONファイルも無料でダウンロードできます！

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

プレビュー

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

例1

デスクトップ

モバイル

例2

デスクトップ

モバイル

例3

デスクトップ

モバイル

スクロールモーションエフェクトセクションのレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

ダウンロード

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

1.新規または既存のページでヒーローセクションのデザインを作成する

新しいセクションを追加

背景色

作業中のページに新しいセクションを追加することから始めます。 セクション設定を開き、背景色を白に変更します。

• 背景色：#FFFFFF

間隔

デザインタブに移動し、間隔の値も変更します。

• トップパディング：15vw（デスクトップ）、20vw（タブレット）、25vw（電話）
• ボトムパディング：0vw

オーバーフロー

また、スクロール効果によって水平スクロールバーが表示されないようにするために、セクションのオーバーフローも非表示にします。

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

行＃1を追加

カラム構造

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

サイジング

モジュールをまだ追加せずに、行設定を開き、サイズ設定で幅と最大幅を変更します。

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

間隔

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

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

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

H1コンテンツを追加する

この行に必要な唯一のモジュールは、H1コンテンツを含むテキストモジュールです。

H1テキスト設定

モジュールのH1テキスト設定を適宜変更します。

• 見出しフォント：プレイフェアディスプレイ
• 見出しフォントの太さ：太字
• 見出しテキストの配置：中央
• 見出しのテキストの色：＃000000
• 見出しのテキストサイズ：6vw

行＃2を追加

カラム構造

次に、次の列構造を使用して別の行を追加します。

グラデーションの背景

モジュールをまだ追加せずに、行設定を開き、グラデーションの背景を使用します。

• 色1：＃444444
• 色2：＃000000
• グラデーションタイプ：線形
• 勾配方向：237度

サイジング

行のサイズ設定も変更します。

• カスタムガター幅を使用：はい
• 側溝幅：1
• 幅：100％
• 最大幅：100％

間隔

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

• トップパディング：0vw
• 下部のパディング：10vw（デスクトップ）、15vw（タブレット）、20vw（電話）

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

コンテンツを追加する

この行で必要な最初のモジュールは、いくつかのコンテンツを含むテキストモジュールです。

テキスト設定

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

• テキストフォント：プレイフェアディスプレイ
• テキストの色：#dddddd
• テキストサイズ：6vw
• テキスト行の高さ：1em
• テキストシャドウブラー強度：0.29em
• テキストの影の色：#ffffff
• テキストの配置：中央

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

コンテンツを追加する

次に、選択した説明コンテンツを含む別のテキストモジュールを追加します。

テキスト設定

モジュールのテキスト設定を次のように変更します。

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

サイジング

サイズ設定も変更します。

• 幅：40％（デスクトップ）、90％（タブレットと電話）
• モジュールの配置：中央

間隔

また、さまざまな画面サイズで上下の余白を含めます。

• トップマージン：10vw（デスクトップ）、15vw（タブレット）、20vw（電話）
• 下マージン：3vw（デスクトップ）、8vw（タブレット）、13vw（電話）

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

コピーを追加

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

配置

デザインタブでボタンの配置を変更して続行します。

• ボタンの配置：中央

ボタンの設定

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

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：0.8vw（デスクトップ）、1.5vw（タブレット）、2.5vw（電話）
• ボタンのテキストの色：#ffffff
• ボタンの境界線の色：#ffffff
• ボタンの境界線半径：1px
• ボタンフォント：Sansを開く
• ボタンのフォントの太さ：太字
• ボタンのフォントスタイル：大文字

間隔

また、さまざまな画面サイズにまたがるカスタムパディング値をいくつか含めます。

• トップパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• 下部のパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• 左パディング：2.5vw（デスクトップ）、5vw（タブレット）、8vw（電話）
• 右パディング：2.5vw（デスクトップ）、5vw（タブレット）、8vw（電話）

2.スクロール効果を適用します

例1

テキストモジュール＃1

水平方向の動き

ヒーローセクションの全体的なルックアンドフィールを設計したので、次はさまざまなスクロールモーションエフェクトをコピーに適用します。 最初の例を再現するには、最初のテキストモジュールを開き、次の水平方向のモーションを使用します。

• 水平方向の動きを有効にする：はい
• 開始オフセット：0
• ミッドオフセット：0
  • 0％– 80％（デスクトップ）
  • 0％– 95％（タブレットと電話）
• 終了オフセット：-10

フェードインとフェードアウト

フェードインとフェードアウトの効果も追加します。

• フェードインとフェードアウトを有効にする：はい
• 開始時の不透明度：100％
• 中程度の不透明度：100％
  • 0％– 70％（デスクトップ）
  • 0％– 95％（タブレットと電話）
• 終了不透明度：0％

テキストモジュール＃2

水平方向の動き

次に、セクションの2番目のテキストモジュールを開き、次の水平方向のモーションを適用します。

• 水平方向の動きを有効にする：はい
• 開始オフセット：10
• ミッドオフセット：0
  • 10％– 70％（デスクトップ）
  • 10％– 95％（タブレットと電話）
• 終了オフセット：10

フェードインとフェードアウト

一致するフェードインおよびフェードアウト効果とともに：

• フェードインとフェードアウトを有効にする：はい
• 開始時の不透明度：0％
• 中程度の不透明度：100％
  • 35％– 60％（デスクトップ）
  • 35％– 95％（タブレットと電話）
• 終了不透明度：0％

例2

テキストモジュール＃1

垂直運動

代わりに、2番目のスクロールモーションエフェクトを再現しますか？ セクションの最初のテキストモジュールを開き、次の垂直方向のモーションを追加します。

• 垂直モーションを有効にする：はい
• 開始オフセット：0
• ミッドオフセット：0
  • 90％（デスクトップ）
  • 95％（タブレットと電話）
• 終了オフセット：-8

上下のスケーリング

スケールアップとスケールダウンの効果も追加します。

• スケールアップとスケールダウンを有効にする：はい
• 開始スケール：20％
• ミッドスケール：100％
  • 20％〜80％（デスクトップ）
  • 20％〜95％（タブレットと電話）
• 終了スケール：20％

テキストモジュール＃2

垂直運動

次に、2番目のテキストモジュールを開き、次の垂直モーション設定を使用します。

• 垂直モーションを有効にする：はい
• 開始オフセット：0
• ミッドオフセット：0
  • 15％– 70％（デスクトップ）
  • 15％– 90％（タブレットと電話）
• 終了オフセット：-8

上下のスケーリング

次に、スケールアップとスケールダウンの効果を追加します。

• スケールアップとスケールダウンを有効にする：はい
• 開始スケール：0％
• ミッドスケール：100％
  • 30％– 70％（デスクトップ）
  • 30％– 90％（タブレットと電話）
• エンディングスケール：100％

ぼかし

そして、セクションの2番目のテキストモジュールにぼかし効果を追加して、スクロール効果を完成させます。

• ぼかしを有効にする：はい
• 開始ブラー：10px
• ミッドブラー：0px
  • 40％– 73％（デスクトップ）
  • 40％– 95％（タブレットと電話）
• エンディングブラー：100px

例3

テキストモジュール＃1

水平方向の動き

最後になりましたが、3番目のスクロールモーションエフェクトを再現する方法を紹介します。 セクションの最初のテキストモジュールを開き、水平方向のモーション効果を追加します。

• 水平方向の動きを有効にする：はい
• 開始オフセット：0
• ミッドオフセット：0
  • 0％– 90％
• 終了オフセット：10

フェードインとフェードアウト

このモジュールにもフェードインおよびフェードアウト効果を使用します。

• フェードインとフェードアウトを有効にする：はい
• 開始時の不透明度：100％
• 中程度の不透明度：100％
  • 0％– 90％（デスクトップ）
  • 0％– 95％（タブレットと電話）
• 終了不透明度：0％

回転

また、回転効果も適用します。

• 回転を有効にする：はい
• 先発投手：0°
• 中回転：0°
  • 0％– 90％（デスクトップ）
  • 0％– 95％（タブレットと電話）
• 終了回転：90°

テキストモジュール＃2

水平方向の動き

次に、セクションの2番目のテキストモジュールを開き、次の水平方向のモーション設定を適用します。

• 水平方向の動きを有効にする：はい
• 開始オフセット：0
• ミッドオフセット：0
  • 0％– 90％
• 終了オフセット：-10

フェードインとフェードアウト

フェードインおよびフェードアウトのスクロールモーションエフェクトを使用して続行します。

• フェードインとフェードアウトを有効にする：はい
• 開始時の不透明度：100％
• 中程度の不透明度：100％
  • 0％– 80％（デスクトップ）
  • 0％– 95％（タブレットと電話）
• 終了不透明度：0％

回転

また、回転スクロール効果も追加して、モジュールの設定を完了します。

• 回転を有効にする：はい
• 先発投手：0°
• 中回転：0°
  • 0％– 80％（デスクトップ）
  • 0％– 90％（タブレットと電話）
• 終了回転：-90°

プレビュー

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

例1

デスクトップ

モバイル

例2

デスクトップ

モバイル

例3

デスクトップ

モバイル

最終的な考え

この投稿では、Diviの新しいスクロール効果を使用して、見出しにスクロールモーション効果を追加する方法を紹介しました。 3つの異なる例を扱いましたが、可能性は本当に無限大です。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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