Diviを使用してスクロールでストーリーについて伝える方法
公開: 2020-02-24あなたのaboutページはあなたのウェブサイトで最も重要なページの1つです。 これにより、人々はあなたのことをよりよく知り、次のステップに進んでよいかどうかを判断できます。 アバウトページにストーリーテリングを含めるスムーズな方法を探しているなら、このチュートリアルを気に入るはずです。 Diviのスクロール効果を使用して、スクロールでスムーズなストーリーテリングトランジションを作成します。 ストーリーの一部がフェードアウトするとすぐに、別の部分がフェードインします。これにより、訪問者は興味深いストーリーを読んでいるように感じることができます。 JSONファイルも無料でダウンロードできます！
それを手に入れましょう。
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
私たちのYoutubeチャンネルを購読する
スクロールレイアウトのアバウトページストーリーを無料でダウンロード
スクロールレイアウトの無料のアバウトページストーリーを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
1.ページの最初のフルスクリーンセクションを作成します
新しいセクションを追加
背景色
アバウトページに最初のセクションを追加することから始めます。 セクション設定を開き、背景色を黒に変更します。
- 背景色：＃000000
サイジング
次に、サイズ設定に最小の高さを追加して、セクションを全画面表示にします。
- 最小高さ：100vh
2.アニメーション行を追加します
新しい行を追加
カラム構造
次に、次の列構造を使用して、セクションに新しい行を追加します。
サイジング
行設定を開き、サイズ設定を変更して、行がセクションコンテナ全体の幅を占めるようにします。
- 幅：100％
- 最大幅：100％
間隔
次に、さまざまな画面サイズに左右のパディングを追加します。
- 左パディング：20vw（デスクトップ）、10vw（タブレットと電話）
- 右パディング：20vw（デスクトップ）10vw（タブレットと電話）
アニメーション
ストーリーテリング効果を高めるために、行のフェードアニメーションも使用します。
- アニメーションスタイル：フェード
- アニメーション時間：3000ms
- アニメーション速度曲線：イーズインアウト
- アニメーションの繰り返し：1回
ポジション
最後になりましたが、位置オプションを変更して、行がセクションコンテナ内の中央に配置されるようにします。
- 位置：絶対
- 場所：センター
3.スクロール効果でタイトルを挿入します
テキストモジュール＃1を列に追加
H1コンテンツを追加する
この行に必要な唯一のモジュールは、H1コンテンツを含むテキストモジュールです。
見出し1のテキスト設定
モジュールの[デザイン]タブに移動し、H1テキスト設定を次のように変更します。
- 見出しフォント：Nunito
- 見出しフォントの太さ：半太字
- 見出しのテキストの色：#ffffff
- 見出しのテキストサイズ：7vw（デスクトップ）、9vw（タブレット）、11vw（電話）
垂直運動
微妙な垂直アニメーションも追加します。
- 垂直モーションを有効にする：はい
- 開始オフセット：0（50％）
- ミッドオフセット：10（100％）
- 終了オフセット：10
フェードインおよびフェードアウトスクロール効果
フェードインおよびフェードアウト効果とともに。
- フェードインとフェードアウトを有効にする：はい
- 開始時の不透明度：100％
- 中程度の不透明度：100％（55％）
- 終了不透明度：0％（62％）
上下のスクロール効果のスケーリング
最後になりましたが、スケールアップとスケールダウンのスクロール効果も使用します。
- スケールアップとスケールダウンを有効にする：はい
- 開始スケール：100％（40％）
- ミッドスケール：95％（74％）
- 終了スケール：90％
4.セクション全体を1回複製し、スクロール効果を使用して説明テキストを含める
コンテンツの見出しを変更してコピーする
最初のセクションを完了したら、それを完全に複製できます。 複製セクションコンテナ内のテキストモジュールを開き、H2コピーを使用します。
テキストモジュールH2テキスト設定の変更
それに応じてH2テキスト設定を変更します。
- 見出し2フォント：Nunito
- 見出し2フォントの太さ：半太字
- 見出し2のテキストの色：#ffffff
- 見出し2テキストサイズ：5vw（デスクトップ）、7vw（タブレット）、8vw（電話）
- 見出し2行の高さ：1em（デスクトップ）、1.2em（タブレットと電話）
テキストモジュール＃2を列に追加
コンテンツを追加する
次に、選択した説明コンテンツを含む別のテキストモジュールを列に追加します。
テキスト設定
テキストモジュールのテキスト設定を次のように変更します。
- テキストフォント：Open Sans
- テキストの色：#ffffff
- テキストサイズ：1vw（デスクトップ）、2.5vw（タブレット）、3vw（電話）
- テキスト行の高さ：3.1em（デスクトップ）、2.5em（タブレットと電話）
間隔
上マージンも使用します。
- トップマージン：8vw
フェードインおよびフェードアウトスクロール効果
次に、[詳細設定]タブのスクロール効果に移動し、次のフェードインおよびフェードアウト設定を使用します。
- フェードインとフェードアウトを有効にする：はい
- 開始時の不透明度：100％
- 中程度の不透明度：0％（31％）
- 終了不透明度：0％（35％）
上下のスクロール効果のスケーリング
スケールアップとスケールダウンの効果も追加します。
- スケールアップとスケールダウンを有効にする：はい
- 開始スケール：100％（40％）
- ミッドスケール：95％（74％）
- 終了スケール：90％
5.2番目のセクションを必要な回数だけクローンします
必要に応じてコンテンツを変更する
ページの2番目のセクションを完了すると、aboutページのストーリーに応じて、何度でもクローンを作成できます。 各セクションの内容を必ず変更してください。
6.CTAセクションを含む完全なページ
説明テキストモジュールの間隔を変更します
最後にCTAセクションを付けて概要ページを完成させます。 説明テキストモジュールを開き、上下の余白を変更します。
- トップマージン：4vw
- 下マージン：4vw
ボタンモジュールの追加
コピーを追加
次に、選択したコピーとともにボタンモジュールも追加します。
ボタンの設定
モジュールの[デザイン]タブに移動し、ボタンの設定を次のように変更します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：1vw（デスクトップ）、2.5vw（タブレット）、3.5vw（電話）
- ボタンのテキストの色：＃000000
- ボタンの背景色：#FFFFFF
- ボタンの境界線の幅：0px
- ボタンの境界線半径：100px
- ボタンフォント：Nunito
- ボタンのフォントの太さ：太字
間隔
さまざまな画面サイズにカスタムパディング値を追加して、ボタンモジュールの設定を完了します。
- トップパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- 下部のパディング：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
- 左パディング：3vw（デスクトップ）、6vw（タブレット）、8vw（電話）
- 右パディング：3vw（デスクトップ）、6vw（タブレット）、8vw（電話）
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Diviの組み込みのスクロール効果を使用して、aboutページでストーリーを伝える方法を紹介しました。 私たちが作成した効果により、連続したコピーをフェードインおよびフェードアウトして、訪問者にストーリーを読んでいるような印象を与えることができます。 JSONファイルも無料でダウンロードできました！ ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。