Diviでスクロール時に変化するテキストと画像を作成する方法
公開: 2020-07-17Diviスクロール効果は、興味深いレイアウトを作成するのに最適です。 この機能がリリースされて以来、かなりの数を公開しています。 このチュートリアルでは、スクロール時に変化するテキストと画像を使用してレイアウトを作成する方法を示します。 このデザインは、サービスページまたは必要な任意のタイプのページに使用できます。 スクロール効果が脚光を浴びるように、クリーンでシンプルに保ちました。
レイアウトをJSONファイルとしてダウンロードするか、独自のDiviWebサイトで再作成できます。
始めましょう。
プレビュー
始める前に、さまざまな画面サイズのレイアウトを見てみましょう。
デスクトップ
モバイル
スクロールセクションで変化するテキストと画像を無料でダウンロード
スクロールすると変化するテキストと画像のある無料セクションに手を置くには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
スクロール時に変化するテキストと画像でセクションを再作成
新しいセクションを追加
バックグラウンド
デザインの再作成を開始するには、新規または既存のページに新しいセクションを追加します。 上記のダウンロードで提供した背景画像を追加します。
- 背景画像：ボックスとドットのデザイン
- デスクトップ：画像1
- タブレット：画像2
- 電話：画像3
- 画像サイズ：表紙
- 背景画像の繰り返し：繰り返しY（垂直）
間隔
セクションに間隔を追加します。
- 上下のパディング：30％
可視性
オーバーフローも非表示にします。
- 水平および垂直オーバーフロー：非表示
新しい行を追加
可視性
次に、最初の行を追加し、[詳細設定]タブで表示設定を調整します。
- 水平：非表示
- 垂直オーバーフロー：デフォルト
テキストモジュールを追加
文章
タイトルの最初のテキストモジュールを追加します。 選択したH1コンテンツをいくつか挿入します。
- 本文：H1コンテンツ–制作チーム
見出しテキスト
[デザイン]タブに移動し、見出しテキストのスタイルを設定します。
- 見出しレベル：H1
- フォント：Fredoke One
- 重量：太字
- カラー：ブラック
- サイズ
- デスクトップ：100px
- タブレット：75px
- 電話番号：33px
- 文字間隔
- デスクトップ：4px
- タブレット：3px
- 電話番号：2px
サイジング
次に、幅を調整します。
- 幅：100％
新しい行を追加
サイジング
次に、2行目を追加し、それに応じてサイズ設定を調整します。
- 幅：80％
- 最大幅：1000px
可視性
オーバーフローも非表示にします。
- 水平および垂直オーバーフロー：非表示
最初のテキストモジュールを追加する
文章
別のテキストモジュールを追加します。 今回は、お好みのH2コンテンツを入力してください。
- 本文：H2コンテンツ–セット写真
見出しテキスト
次に見出しのスタイルを設定します。
- 見出しレベル：H2
- 重量：太字
- スタイル：TT
- カラー：ブラック＃000000
- サイズ
- デスクトップ：50px
- タブレット：40px
- 電話番号：28px
- 文字間隔：3px
間隔
モジュールにもある程度の間隔を設定します。
- 上マージンと下マージン：0px
スクロール効果
次のスクロール効果を追加して、モジュール設定を完了します。
- フェードインおよびフェードアウト：有効にする
- ビューポート下部
- ポジション：42％
- 開始時の不透明度：0％
- 中程度の不透明度
- 最下位：43％
- トップポジション：53％
- 中程度の不透明度：100％
- ビューポートトップ
- ポジション：54％
- 終了不透明度：0％
テキストモジュールを2回複製する
テキストモジュールのクローンを2回作成します。
2番目のテキストモジュールを調整する
文章
新しいテキストモジュールの内容を変更します。
- 本文：H2コンテンツ–アートディレクション
ポジション
モジュールにも絶対位置決めを追加します。
- 位置：絶対
- 場所：左上
スクロール効果
次に、スクロール効果の設定を更新します。
- フェードインおよびフェードアウト：有効にする
- ビューポート下部
- ポジション：56％
- 開始時の不透明度：0％
- 中程度の不透明度
- 最下位：57％
- トップポジション：67％
- 中程度の不透明度：100％
- ビューポートトップ
- ポジション：68％
- 終了不透明度：0％
3番目のテキストモジュールを調整する
文章
次に、2番目のテキストモジュールの複製を調整します。 最初にコンテンツを変更します。
- 本文：H2コンテンツ–小道具とワードローブ
ポジション
次に絶対位置を追加します。
- 位置：絶対
- 場所：左上
スクロール効果
次に、スクロール効果を変更します。
- フェードインおよびフェードアウト：有効にする
- ビューポート下部
- ポジション：70％
- 開始時の不透明度：0％
- 中程度の不透明度
- 最下位：71％
- トップポジション：80％
- 中程度の不透明度：100％
- ビューポートトップ
- ポジション：81％
- 終了不透明度：0％
画像モジュールの追加
画像
次に、画像モジュールを追加します。 350 x 350pxの画像サイズの正方形の画像を使用します。
- 画像：正方形の画像350 x 350 px
配置
左揃えを設定します。
- 画像の配置：左
間隔
間隔も調整します。
- 画像の下にスペースを表示：いいえ
- 上マージン：-60px
フィルタ
次に、フィルターを追加して画像の彩度を下げます。
- 飽和度：0％
可視性
次に、[詳細設定]タブに移動し、オーバーフローを非表示に設定します。
- 水平および垂直オーバーフロー：非表示
スクロール効果
大事なことを言い忘れましたが、フェードインとフェードアウトのスクロール効果を追加します。
- フェードインおよびフェードアウト：有効にする
- ビューポート下部
- ポジション：70％
- 開始時の不透明度：0％
- 中程度の不透明度
- ポジション：71％
- 中：100％
- ビューポートトップ
- 位置：100％
- 終了不透明度：0％
召喚状モジュールの追加
文章
次のモジュールに進みます。これは、アクションモジュールの呼び出しです。 選択したコンテンツをいくつか含めます。
- タイトル：ジェイソンのアートチーム
- ボタン：ジェイソンのアートチームを予約する
- 本文：説明的な内容
リンク
次にリンクを追加します。
- リンク：あなたのリンク
バックグラウンド
デフォルトの背景色も削除します。
- 背景色を使用する：いいえ
文章
次に、配置を右に設定します。
- テキストの配置：右
見出しテキスト
見出しのテキストもスタイル設定します。
- 見出しレベル：H3
- フォント：Fredoke One
- タイトルテキストの配置：左
- 色：黒#oooooo
- サイズ
- デスクトップ：48px
- タブレット：42px
- 電話番号：33px
- 文字間隔
- デスクトップとタブレット：1px
- 電話番号：0px
- 行の高さ
- デスクトップとタブレット：1.6em
- 電話番号：1.1em
本文
次に、本文テキスト。
- フォント：Verdana
- カラー：ブラック＃000000
- サイズ：14px
- 文字間隔：0.5px
ボタン
ボタンのスタイルも調整します。
- カスタムスタイル
- テキストサイズ：17px
- テキストの色：白#ffffff
- 背景：黒＃000000
- 文字間隔：1px
- フォント：Verdana
- トップマージン：20px
- 上下のパディング：10px
- 左右のパディング：25px
ポジション
[詳細設定]タブに移動し、次のように位置設定を変更します。
- 位置：相対
- オフセット原点：左上
- 水平オフセット：25px
可視性
次に、オーバーフローを非表示にします。
- 水平および垂直オーバーフロー：非表示
スクロール効果
大事なことを言い忘れましたが、フェードインとフェードアウトのスクロール効果を有効にします。
- フェードインおよびフェードアウト：有効にする
- ビューポート下部
- ポジション：54％
- 開始時の不透明度：0％
- 中程度の不透明度
- ボトムポジション：55％
- トップポジション：80％
- 中：100％
- ビューポートトップ
- 位置：100％
- 終了不透明度：0％
2行目を複製
行とそのすべてのモジュールのクローンを作成します。
最初のテキストモジュールを調整する
文章
次に、複製されたテキストモジュールの内容を変更します。 上から始めます。
- 本文：H2コンテンツ/プリプロダクション
文章
配置を右に変更します。
- テキストの配置：右
テキストの配置を拡張する
同じ行にあるすべての複製テキストモジュールに配置を適用します。
- テキストの配置を拡張する：この行のすべてのテキストモジュールに
2番目のテキストモジュールを調整する
文章
次に、2番目に複製されたテキストモジュールのコンテンツを更新します。
- 本文：H2コンテンツ/オンセット制作
ポジション
位置設定でも場所を変更します。
- 場所：右上
3番目のテキストモジュールを調整する
文章
次に、3番目に複製されたテキストモジュールの内容を変更します。
- 本文：H2コンテンツ/チーム間の調整
ポジション
位置設定でも場所を変更します。
- 場所：右上
新しい画像モジュールを調整する
画像
次に、画像モジュールの写真を変更します。
- 画像：新しい画像350 x 350px
配置
画像の配置も変更します。
- 画像の配置：右
新しい召喚状モジュールを調整する
文章
次に、召喚状モジュールを開き、すべてのコンテンツを変更します。
- タイトル：アリスの制作チーム
- ボタン：アリスの制作チームを予約する
- 本文：新しい説明コンテンツ。
リンク
リンクも変更してください。
- リンク：新しいリンク
文章
配置も変更します。
- テキストの配置：左
見出しテキスト
見出しテキストの配置も変更します。
- タイトルテキストの配置：左
本文
本文だけでなく。
- 本文の配置：左
サイジング
サイズ設定でもモジュール全体の配置を変更することを忘れないでください。
- モジュールの配置：左
ポジション
最後に、位置設定をデフォルトにリセットすれば完了です。
- 位置：デフォルトにリセット
プレビュー
最後に、さまざまな画面サイズのページレイアウトを見てみましょう。
デスクトップ
モバイル
これは、スクロールで変化するテキストと画像を含むレイアウトのまとめです。
スクロール時に変化するテキストと画像の再作成が完了しました。 Diviに組み込まれているスクロール効果のおかげで、この効果を実現することができました。 このレイアウトは、サービスページ、概要ページ、チームに会うページなど、好きなものに使用できます。 提供されている背景を使用するか、背景を白のままにします。
コメントであなたの考えを教えてください！