Diviのアニメーション設定で見出しをポップにする方法
公開: 2019-03-29あなたの見出しは通常、人々があなたのウェブサイトを訪問しているときに最初に読むものです。 本当に良い見出しを持っていることに加えて、あなたが彼らに見せているものが何であれ、人々に気づかせて実際に読んでもらうことも重要です。 見出しは通常、ヒーローセクションのサイズと中央の位置のために見過ごされることはありませんが、さらに一歩進んで文字通り見出しをポップにしたい場合は、このチュートリアルが最適です。
Diviのアニメーション設定を組み合わせて、目立つ見出しを作成し、訪問者の注意を引き付けます。 見出しを5つに分割し、フラッシュエフェクトを作成して、訪問者が動きを追跡し、共有されている内容を読みたくなるようにします。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。
デスクトップ
モバイル
再作成を始めましょう！
新しいセクションを追加
背景色
作り始めましょう！ 新しいページを作成し、それに通常のセクションを追加します。 セクション設定を開き、背景色を変更します。
- 背景色：#ededed
間隔
次に、セクションの間隔設定に移動し、カスタムの下部パディングを追加します。
- ボトムパディング：10vw
行＃1を追加
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
背景色
モジュールをまだ追加せずに、行の設定を開き、行の背景色を変更します。
- 背景色：＃c9c9c9
サイジング
次にサイズ設定に移動し、行が画面の幅全体を占めるようにします。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
間隔
行のデフォルトの上部と下部のパディングも削除します。
- トップパディング：0px
- ボトムパディング：0px
テキストモジュール＃1を追加
コンテンツを追加する
モジュールの追加を開始する時が来ました！ 最初に必要なモジュールはテキストモジュールです。 段落テキストスタイルを使用して、見出しの最初の部分をコンテンツボックスに入力します。
背景色
次に、モジュールの背景設定に移動し、背景色を追加します。
- 背景色：＃c9c9c9
テキスト設定
デザインタブのテキスト設定も変更します。
- テキストフォント：Didact Gothic
- テキストフォントの太さ：太字
- テキストの色：＃000000
- テキストサイズ：10vw
- テキスト行の高さ：0.9em
- テキストの向き：中央
間隔
そして、カスタムの上下のパディングを使用して、必要な形状を作成します。
- トップパディング：10vw
- ボトムパディング：3vw
アニメーション
最後になりましたが、アニメーションを追加します。 アニメーションの継続時間と開始時の不透明度がゼロであることを確認することが重要です。 これにより、テキストモジュールがフラッシュ効果で表示されます。
- アニメーションスタイル：フェード
- アニメーションの繰り返し：1回
- アニメーション時間：0ms
- アニメーションの遅延：1000ms
クローンテキストモジュールx4
最初のテキストモジュールの変更が完了したら、見出しの長さに応じて、モジュールを何度でも複製できます。 フラッシュ効果で表示する見出しの各部分には、個別のテキストモジュールが必要です。 この例では、4つの追加モジュールが必要です。
重複＃1を変更する
コンテンツ
最初の複製のコピーを変更します。
背景色
背景色と一緒に。
- 背景色：＃5900ff
テキストの色
テキストの色を白に変更します。
- テキストの色：#ffffff
アニメーション
また、アニメーション設定でアニメーションの遅延を増やします。 これにより、訪問者は、前のテキストモジュールが表示される前に、前のテキストモジュールを読むのに十分な時間をとることができます。
- アニメーションの遅延：1500ms
重複＃2を変更する
コンテンツ
次に、2番目の複製の内容を変更します。
背景色
背景色と一緒に。
- 背景色：＃ffb200
テキストの色
そして、テキストの色も。
- テキストの色：#ffffff
アニメーション
繰り返しになりますが、アニメーションの遅延が、前の2つのモジュールで使用されたアニメーションの遅延よりも大きいことを確認します。 人々が読むのに十分な時間を与えるために、それぞれの間に500msを残しています。
- アニメーションの遅延：2000ms
重複＃3を変更する
コンテンツ
3番目の複製の内容を変更して続行します。
アニメーション
アニメーションの遅延とともに。
- アニメーションの遅延：2500ms
重複＃4を変更する
コンテンツ
次の最後の複製に移ります。 内容を変更します。
背景色
背景色と一緒に。
- 背景色：＃000000
テキストの色
テキストの色も変更します。
- テキストの色：＃3a3a3a
アニメーション
また、アニメーション設定でアニメーションの遅延を増やします。
- アニメーションの遅延：3000ms
最初のテキストモジュールを除く各テキストモジュールに負のマージンを追加する
すべてのテキストモジュールのカスタマイズが完了したら、先に進んでオーバーラップを作成できます。 このオーバーラップを作成するために、重複するテキストモジュールのそれぞれに負の上部マージンを追加します。 つまり、最初のモジュールの後に続くすべてのモジュールが、最初のテキストモジュールの上に表示されるようにしています。
- トップマージン：-21.98vw
行の変換
変換翻訳
変換変換設定から始めて、行全体を変換して続行します。
- 下：-35vw
変換回転
変換回転値も変更します。
- 左：320度
行＃2を追加
カラム構造
2列目へ！ 見出し効果が設定されたので、残りのモジュールの追加を開始できます。 次の列構造を使用して、新しい行を追加します。
サイジング
モジュールをまだ追加せずに、行設定を開き、サイズ設定で行が画面の幅全体を占めるようにします。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
間隔
次の行のデフォルトの上部パディングを削除します。
- トップパディング：0px
タイトルテキストモジュールを列2に追加
H1コンテンツを追加する
モジュールの追加を開始する時が来ました！ 最初に必要なモジュールは、タイトルのテキストモジュールです。 選択したH1コンテンツをいくつか追加します。
H1テキスト設定
次に、[デザイン]タブに移動し、H1テキスト設定を変更します。
- 見出しフォント：Didact Gothic
- 見出しフォントの太さ：太字
- 見出しのテキストサイズ：1.8vw（デスクトップ）、3.8vw（タブレット）、4vw（電話）
間隔
間隔設定にいくつかのカスタムマージン値を追加します。
- トップマージン：-4vw
- 下マージン：2vw
- 左マージン：30vw
- 右マージン：30vw（デスクトップ）、15vw（タブレットと電話）
Dividerモジュールを列2に追加します
可視性
次に必要なモジュールはディバイダーモジュールです。 [仕切りを表示]オプションが有効になっていることを確認してください。
- 仕切りを表示：はい
色
次に、[デザイン]タブに移動し、仕切りの色を変更します。
- 色：＃000000
サイジング
サイズ設定も変更します。
- 仕切りの重量：8px
- 幅：7％
間隔
間隔の設定と一緒に。
- 下マージン：1vw
- 左マージン：30vw
説明テキストモジュールを列2に追加
コンテンツを追加する
次に必要なモジュールは、別のテキストモジュールです。 お好みのコンテンツを入力してください。
テキスト設定
次に、[デザイン]タブのテキスト設定を変更します。
- テキストサイズ：0.8vw（デスクトップ）、1.3vw（タブレット）、1.6vw（電話）
- テキスト行の高さ：2.2em
間隔
間隔設定にもいくつかのカスタムマージン値を追加します。
- 下マージン：3vw
- 左マージン：30vw
- 右マージン：30vw（デスクトップ）、15vw（タブレットと電話）
ボタンモジュールを列2に追加
ボタンの設定
次の最後のモジュールであるボタンモジュールに進みます。 選択したコピーをいくつか追加し、それに応じてボタン設定を変更します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：1vw（デスクトップ）、1.5vw（タブレット）、2vw（電話）
- ボタンの境界線の幅：0px
- ボタンフォント：ポピン
- フォントの太さ：太字
- フォントスタイル：大文字
間隔
間隔の設定に移動し、カスタムのマージンとパディングの値を追加すれば完了です。
- 左マージン：30vw
- トップパディング：1vw
- ボトムパディング：1vw
- 左パディング：3vw
- 右パディング：3vw
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。
デスクトップ
モバイル
最終的な考え
この投稿では、Diviの組み込みオプションのみを使用して見出しをポップにする方法を紹介しました。 これは、訪問者の注意を引き、独自の方法でメッセージを伝えるための優れた手法です。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！