Diviでスティッキーバックグラウンドマスクを作成する方法
公開: 2021-07-28Diviのスティッキーオプションを使用すると、Webサイト用にさまざまなデザインを作成できます。 今日の投稿では、達成できることのリストに別のチュートリアルが追加されており、創造性を刺激するのに役立つことを願っています。 スティッキーな背景マスクを作成する方法を紹介します。このマスクは、セクションの最後までスクロールして訪問者を追跡します。 このチュートリアルでは、Diviのスティッキーオプションとフィルターブレンドモードを組み合わせます。 JSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
レイアウトを無料でダウンロード
無料のレイアウトを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
1.Diviでデザインを作成する
新しいセクションを追加
背景画像
作業中のページに新しいセクションを追加することから始めます。 選択した背景画像をアップロードします。
- 背景画像サイズ：カバー
間隔
セクションの[デザイン]タブに移動し、間隔設定のデフォルトの上下のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
オーバーフロー
次の[詳細設定]タブでセクションのオーバーフローを非表示にします。
- 水平オーバーフロー：非表示
- 垂直オーバーフロー：非表示
行＃1を追加
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
サイジング
モジュールを追加せずに、行設定を開き、それに応じてサイズ設定を変更します。
- 幅：100％
- 最大幅：100％
間隔
デフォルトの上下のパディングもすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
フィルタ
この行にブレンドモードも追加しています。 このブレンドモードは、チュートリアルの後半でマスクを作成するのに役立ちます。
- ブレンドモード：画面
Zインデックス
この行がセクションに追加する2番目の行の下にあることを確認するために、[詳細設定]タブのzインデックスを変更しています。
- Zインデックス：9
列の設定
次に、列の設定を開きます。
背景色
完全に白い背景色を使用しています。 ここで使用する他の色は、セクションの背景画像を通して表示されるため、完全に白い色を使用することが重要です。
- 背景色：#ffffff
主な要素CSS
また、[詳細設定]タブのメイン要素に高さの値を追加しています。 行をスティッキーにすると、この高さにより、列が常にセクションの背景画像全体をカバーするようになります。
height: 100vh;
行にテキストモジュールを追加
コンテンツボックスを空のままにします
行の設定が完了したら、その列にテキストモジュールを追加します。 コンテンツボックスは空のままにします。 代わりに、このモジュールを使用して、断面の背景画像の一部を表示する形状を作成しています。
背景色
ブレンドモードでセクションの背景画像の一部を表示できるようにするために、このモジュールでは暗い背景色を使用しています。
- 背景色：＃0b3835
サイジング
次に、[デザイン]タブに移動し、次のようにサイズ設定を変更します。
- 幅：
- デスクトップ：20vw
- タブレットと電話：70vw
- 身長：
- デスクトップ：30vh
- タブレットと電話：10vh
間隔
トップマージンも追加しています。
- トップマージン：3vh
国境
そして、いくつかの丸い角を含めます。
- すべてのコーナー：15px
行＃2を追加
カラム構造
次の列構造を使用して、セクションに別の行を追加して続行します。
サイジング
モジュールをまだ追加せずに、行設定を開き、サイズ設定に次の変更を加えます。
- 幅：100％
- 最大幅：100％
Zインデックス
行のzインデックスも増やします。 これにより、行のコンテンツが前の行の上に表示されたままになります。
- Zインデックス：12
行にテキストモジュールを追加
H2コンテンツを追加する
モジュールを追加するときは、選択したH2コンテンツを含む最初のテキストモジュールから始めます。
H2テキスト設定
H2テキスト設定を次のようにスタイル設定します。
- 見出し2フォント：プレイフェアディスプレイ
- 見出し2テキストの配置：中央
- 見出し2のテキストの色：＃0b3835
- 見出し2テキストサイズ：
- デスクトップ：150px
- タブレットと電話：45px
- 見出し2行の高さ：1.2em
サイジング
次に、サイズ設定に移動し、次の設定を適用します。
- 最大幅：980px
- モジュールの配置：中央
間隔
負のトップマージンも含めます。
ボタンモジュールを行に追加
コピーを追加
この行で必要な次の最後のモジュールはボタンモジュールです。 選択したコピーをいくつか追加します。
ボタンの配置
モジュールのデザインタブに移動し、ボタンの配置を変更します。
- ボタンの配置：中央
ボタンの設定
次に、ボタンの設定に移動し、次のスタイルを適用します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：15px
- ボタンのテキストの色：#ffffff
- ボタンの背景色：＃000000
- ボタンの境界線の幅：0px
- ボタンの境界線半径：100px
- ボタンフォント：Montserrat
- ボタンのフォントの太さ：半太字
- ボタンのフォントスタイル：大文字
間隔
間隔設定にもカスタムマージンとパディング値を追加しています。
- 下マージン：60vh
- トップパディング：15px
- ボトムパディング：15px
- 左パディング：40px
- 右パディング：40px
2.スティッキーエフェクトを適用する
行＃1を開く
デザインの基礎を構築したので、今度はスティッキースタイルを適用します。 最初の行の設定を開きます。
スティッキーオプションを適用する
[詳細設定]タブに移動し、次のスティッキー設定を適用します。
- スティッキーポジション：トップに固執
- スティッキーボトムリミット：セクション
- 周囲の粘着要素からのオフセット：はい
- トランジションのデフォルトスタイルとスティッキースタイル：はい
テキストモジュールスティッキーオプション
行がスティッキーになっているので、行内のテキストモジュールにスティッキースタイルを適用できます。 モジュールの設定を開きます。
スティッキーサイジング
次に、サイズ設定に移動し、次のスティッキーサイズ値を適用します。
- スティッキー幅：80vw
- 粘着性の高さ：90vh
移行期間
最後になりましたが、[詳細設定]タブに移動して、移行期間を長くしてください。 それでおしまい！
- 移行時間：500ms
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Diviのスティッキーオプションを使ってクリエイティブになる方法をもう一度紹介しました。 具体的には、Diviのフィルター設定とスティッキーオプションを組み合わせてスティッキーな背景マスクを作成する方法を示しました。 JSONファイルも無料でダウンロードできました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。