Diviを使用してスクロールで美しい列を衝突させるヒーローセクションを作成する方法
公開: 2020-03-07Diviのスクロール効果は、作成するWebサイトに多くの新しいデザインの可能性をもたらします。 追加することを選択した微妙な相互作用は、Webサイトの全体的なルックアンドフィールを向上させるのに役立ちます。 スクロール効果を同期するとすぐに、すべてがさらに良くなります。 このチュートリアルでは、スクロールで列が衝突する美しいヒーローセクションの作成を具体的に扱います。 ヒーローセクションのデザインは、スクロールの2つの異なる列をマージします。これにより、コピーが強調されます。 JSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
コラム衝突ヒーローセクションレイアウトを無料でダウンロード
無料の列衝突ヒーローセクションレイアウトに手を置くには、最初に下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
ヒーローセクションセクションレイアウトを再作成
新しいセクションを追加
背景色
作業中のページに新しいセクションを追加することから始めます。 セクション設定を開き、背景色を変更します。
- 背景色：＃f4f2f7
間隔
すべてのセクションのデフォルトの上部と下部のパディングも削除します。
- トップパディング：0px
- ボトムパディング：0px
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、それに応じてサイズ設定を変更します。
- カスタムガター幅を使用：はい
- 側溝幅：1
- 列の高さを等しくする：はい
- 幅：100％
- 最大幅：100％
間隔
次に、デフォルトの上下のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
オーバーフロー
そして、行のオーバーフローを非表示にします。
- 水平オーバーフロー：非表示
- 垂直オーバーフロー：非表示
列1の設定
間隔
次に、列1の設定を開き、いくつかのカスタムパディング値を追加します。
- トップパディング：15vw
- ボトムパディング：10vw
- 左パディング：5vw
- 右パディング：5vw
Zインデックス
列のzインデックスも増やします。
- Zインデックス：12
列2の設定
背景画像
列2の設定を開いて続行し、選択した背景画像をアップロードします。
- 背景画像サイズ：カバー
- 背景画像の位置：中央
- 背景画像の繰り返し：繰り返しなし
- 背景画像のブレンド：通常
テキストモジュール＃1を列1に追加します
H1コンテンツを追加する
1列目の最初のテキストモジュールから始めて、モジュールを追加します。選択したH1コンテンツをいくつか追加します。
H1テキスト設定
モジュールの[デザイン]タブに移動し、それに応じてH1テキスト設定を変更します。
- 見出しフォント：Shadows Into Light
- 見出しフォントの太さ：太字
- 見出しのテキストの色：＃000000
- 見出しのテキストサイズ：6vw（デスクトップ）、11vw（タブレット）、13vw（電話）
- 見出し文字の間隔：-2px
- 見出し線の高さ：1.2em
間隔
上マージンも追加します。
- トップマージン：10vw
テキストモジュール＃2を列1に追加します
コンテンツを追加する
選択した説明コンテンツを含む別のテキストモジュールを挿入します。
テキスト設定
モジュールのテキスト設定を次のように変更します。
- テキストフォント：Open Sans
- テキストの色：＃1e1e1e
- テキストサイズ：0.9vw（デスクトップ）、1.9vw（タブレット）、3vw（電話）
- テキスト行の高さ：2.4em
間隔
また、さまざまな画面サイズにカスタムマージン値を追加します。
- トップマージン：4vw（デスクトップ）、8vw（タブレット）、12vw（電話）
- 下マージン：4vw（デスクトップ）、8vw（タブレット）、12vw（電話）
ボタンモジュールを列1に追加
コピーを追加
この列で必要な次の最後のモジュールはボタンモジュールです。 選択したコピーをいくつか追加します。
ボタンの設定
モジュールのボタン設定を次のように変更します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- ボタンのテキストの色：#ffffff
- ボタンの背景色：＃000000
- ボタンの境界線の幅：0px
- ボタンの境界線半径：100px
- ボタンフォント：Sansを開く
間隔
そして、さまざまな画面サイズにカスタムパディング値を追加して、ボタンの設定を完了します。
- トップパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- 下部のパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- 左パディング：3vw（デスクトップ）、5vw（タブレット）、7vw（電話）
- 右パディング：3vw（デスクトップ）、5vw（タブレット）、7vw（電話）
列2にテキストモジュールを追加します
コンテンツを追加する
2番目の列では、必要なモジュールはテキストモジュールのみです。 お好みのコンテンツを入力してください。
テキスト設定
モジュールの[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- テキストフォント：Shadows Into Light
- テキストの色：rgba（0,0,0,0.25）
- テキストサイズ：9vw（デスクトップ）、14vw（タブレットと電話）
- テキスト文字の間隔：-3px
- テキスト行の高さ：1em
- テキストの配置：中央（デスクトップ）、左（タブレットと電話）
間隔
いくつかのカスタムパディング値も追加します。
- トップパディング：5vw（デスクトップ）、
- ボトムパディング：60vw（タブレットと電話）
- 左パディング：5vw（タブレットと電話）
スクロールアニメーションを適用する
セクション
上下のスケーリング
すべてのモジュールが配置されたら、スクロール効果を適用します。 最初にセクション設定を開き、次のスケールアップおよびスケールダウン効果を使用します。
- 上下のスクレイリングを有効にする
- 開始スケール：100％（49％）
- ミッドスケール：
- デスクトップ：70％（100％）
- タブレットと電話：100％（100％）
- エンディングスケール：
- デスクトップ：70％
- タブレットと電話：100％
列1
水平方向の動き
列1の設定を開いて続行し、次の水平モーションエフェクトを使用します。
- 水平方向の動きを有効にする：はい
- 開始オフセット：0
- ミッドオフセット：
- デスクトップ：0（65％）
- タブレットと電話：0（93％）
- 終了オフセット：
- デスクトップ：6
- タブレットと電話：0
上下のスケーリング
列にもスケールアップおよびスケールダウン効果を適用します。
- スケールアップとスケールダウンを有効にする：はい
- 開始スケール：
- デスクトップ：10％
- タブレットと電話：100％
- ミッドスケール：
- デスクトップ：90％
- タブレットと電話：100％
- エンディングスケール：100％
列2
水平方向の動き
次に、列2の設定を開き、次の水平モーション設定を使用します。
- 水平方向の動きを有効にする：はい
- 開始オフセット：0
- ミッドオフセット：
- デスクトップ：0（53％）
- タブレットと電話：0（56％）
- 終了オフセット：
- デスクトップ：-6（53％）
- タブレットと電話：0（100％）
フェードインとフェードアウト
フェードインおよびフェードアウト効果を追加して、列の設定を完了します。
- フェードインとフェードアウトを有効にする：はい
- 開始時の不透明度：100％（47％）
- 中程度の不透明度：
- デスクトップ：0％（47％）
- タブレットと電話：100％（47％）
- 不透明度の終了：
- デスクトップ：0％
- タブレットと電話：100％
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Diviのスクロール効果をクリエイティブに使用して、列が衝突するヒーローセクションを作成する方法を紹介しました。 訪問者がスクロールするとすぐに、2つの異なる列とその要素がマージされ始めます。 これにより、コピーをさらに強調することができます。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。