スクロール上のコピーをDiviの位置設定とスクロール効果とブレンドする方法
公開: 2021-09-08Diviの組み込み機能をクリエイティブに使用する方法は、ページデザインに違いをもたらす可能性があります。 たとえば、Diviのスクロール効果を使用すると、スクロールで美しいインタラクションを作成できます。 本日、Diviの組み込みスクロール効果を使用して実行できることのリストに別のチュートリアルを追加します。 具体的には、コピーとスクロールをブレンドする方法を紹介します。 一見すると、コピーは添付の画像の下に配置されます。 ただし、特定のポイントまでスクロールするとすぐに、コピーが製品画像の上に表示され、画像とのブレンドが開始されます。 これは、楽に見える目を引く効果につながります。 レイアウトJSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
レイアウトを無料でダウンロード
無料のレイアウトを手に入れるには、まず下のボタンを使用してそれらをダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
再作成を始めましょう！
2xプレースホルダーセクションを追加
新しいセクションを追加
作業中のページにプレースホルダーセクションを追加することから始めます。
サイジング
セクション設定を開き、サイズ設定で高さを変更します。
- 高さ：50vh
クローンセクション
セクションのクローンを1回作成します。 これにより、ページに2つのプレースホルダーセクションが残ります。 これらのプレースホルダーセクションは、チュートリアルを終えた後の最終的な効果を確認するのに役立ちます。 ライブWebサイトでは、プレースホルダーセクションは、ページ全体で使用する通常のセクションに置き換えられます。
プレースホルダーセクション間に新しいセクションを追加する
プレースホルダーセクションを配置したら、プレースホルダーセクションの間に新しいセクションを追加します。
背景色
セクション設定を開き、白い背景色を使用します。
- 背景色：#ffffff
間隔
セクションの[デザイン]タブに移動し、それに応じて上部と下部のパディング値を変更します。
- トップパディング：10vh
- ボトムパディング：10vh
行＃1を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、サイズ設定に移動して、幅と最大幅の値を変更します。
- 幅：100％
- 最大幅：100％
列にテキストモジュールを追加
コピーを追加
この行に必要な唯一のモジュールはテキストモジュールです。 選択したコピーをいくつか追加します。
テキスト設定
モジュールの[デザイン]タブに移動し、それに応じてテキスト設定を変更します。
- テキストフォント：Montserrat
- テキストフォントの太さ：超太字
- テキストフォントスタイル：大文字
- テキストの色：＃fff2ea
- テキストサイズ：11vw
- テキスト行の高さ：1em
- テキストの配置：中央
行＃2を追加
カラム構造
次の列構造を使用して、セクションに別の行を追加します。
サイジング
モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を変更します。
- カスタムガター幅を使用：はい
- 側溝幅：2
- 幅：90％
- 行の配置：中央
画像モジュールを列に追加
画像をアップロード
行の列に画像モジュールを追加します。 お好みの画像をアップロードしてください。
配置
モジュールの[デザイン]タブに移動し、それに応じて画像の配置を変更します。
- 画像の配置：中央
サイジング
次に、サイズ設定に移動し、モジュールに全幅を強制します。
- 全幅を強制：はい
ボタンモジュールを列に追加
コピーを追加
列に追加する次の最後のモジュールはボタンモジュールです。 お好みのコピーを使用してください。
ボタンの配置
デザインタブに移動し、ボタンの配置を変更します。
- ボタンの配置：中央
ボタンの設定
次に、ボタンのスタイルを次のように設定します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：16px
- ボタンのテキストの色：＃000000
- ボタンの背景色：#ffffff
- ボタンの境界線の幅：0px
- ボタンの文字間隔：2px
- ボタンフォント：Montserrat
- ボタンのフォントの太さ：太字
- ボタンのフォントスタイル：大文字
間隔
間隔設定でもいくつかのカスタムパディング値を使用します。
- トップパディング：20px
- ボトムパディング：20px
- 左パディング：5％
- 右パディング：5％
行＃1に絶対ポジショニングを追加
2番目の行が完了したら、行＃1に戻ります。 行の設定を開き、[詳細設定]タブに移動して、セクションを絶対に変更します。 これを行うことにより、行とその中のテキストモジュールは、画像モジュールを含む行の下に配置されます。
- 位置：絶対
- 場所：センター
行＃1のクローンを作成し、行＃2の下に複製を配置します
テキストモジュールを画像の上に表示できるようにするには、zインデックス値が高い別の行が必要です。 最初の行のクローンを作成し、複製を2番目の行の下に配置します。
行＃3に効果を適用する
Zインデックスを増やす
重複する行を開き、[詳細設定]タブでzインデックスを変更します。
- Zインデックス：12
テキストの色を変更する
行のテキストモジュールを開き、テキストの色を変更します。
- テキストの色：＃1e1e1e
行にブレンドモードを適用する
次に、行設定を開き、フィルター設定でブレンドモードを変更します。
- ブレンドモード：オーバーレイ
行＃3のテキストモジュールでスクロール効果を使用する
フェードイン＆フェードアウト効果を追加
テキストモジュールをもう一度開き、スクロールエフェクトに移動して、フェードインおよびフェードアウトエフェクトを有効にして、チュートリアルを完了します。 それでおしまい！
- フェードインとフェードアウトを有効にする：はい
- 開始時の不透明度：0％
- 中程度の不透明度：0％（26％）
- 終了不透明度：100％（28％）
- モーションエフェクトトリガー：要素の中央
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Diviに組み込まれているスクロール効果を使ってクリエイティブになる方法を紹介しました。 具体的には、コピーとスクロールをブレンドする方法を示しました。 最初は、コピーが画像の下にあるように見えます。 スクロールすると、コピーが画像の上に表示され、画像とブレンドされます。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。