Diviでアニメーションモバイルスプリットコンテンツヒーローセクションを作成する方法
公開: 2019-04-01目立つヒーローセクションを作成することは非常に重要です。 また、目立つだけでなく、そこにある行動の呼びかけを強化する複数の要素に分割する必要があります。 わかりやすい構造のスプリットコンテンツヒーローセクションは、それらを非常に人気があり、さまざまな種類のWebサイトで頻繁に使用されています。
また、デスクトップ用に分割コンテンツのヒーローセクションを作成するのは簡単ですが、小さい画面サイズ用に作成するのは簡単ではない場合があります。 そこで、このチュートリアルが役に立ちます。 モバイルだけでなく、さまざまな画面サイズで見栄えのする、インタラクティブ性の高いモバイル分割ヒーローセクションを再現します。 また、いくつかの優れたアニメーションを組み合わせて、デザインスタイルを2019年に完全に一致させています。 このチュートリアルが、独自のモバイルスプリットコンテンツヒーローセクションを作成するきっかけになることを願っています。
それを手に入れよう！
プレビュー
チュートリアルに入る前に、さまざまな画面サイズでの結果を見てみましょう。
モバイル
デスクトップ
再作成を始めましょう！
新しいセクションを追加
間隔
新しいページを作成するか、既存のページを開くことから始めます。 新しい通常のセクションを追加し、間隔の設定に移動して、デフォルトの上部と下部のパディングをすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
新しい行を追加
カラム構造
次の列構造を使用して、新しい行を追加して続行します。
背景色
モジュールをまだ追加せずに、行設定を開き、完全に黒の背景色を追加します。
- 背景色：＃000000
列1の背景色
最初の列にも黒の背景色を追加します。
- 列1の背景色：＃000000
列2の背景色
2列目も同じです。
- 列2の背景色：＃000000
サイジング
次に、サイズ設定に移動し、行とその列が画面の幅全体を占めるようにします。
- この行を全幅にする：はい
- カスタムガター幅を使用：はい
- 側溝幅：1
- 列の高さを等しくする：はい
間隔
また、行のデフォルトの上部と下部のパディングもすべて削除します。
- トップパディング：0px
- ボトムパディング：0px
- 右パディング：1vw
画面
大事なことを言い忘れましたが、小さい画面サイズでも両方の列が隣り合って表示されるようにします。 これを行うには、行の[詳細設定]タブにCSSコードを1行追加する必要があります。
display: flex;
列1に画像モジュールを追加
画像ボックスを空のままにします
必要なすべての異なるモジュールを追加する時が来ました！ 最初の列の画像モジュールから始めます。 画像を画像ボックスにアップロードする代わりに、次の手順で画像を背景設定にアップロードします。 これにより、画像がどのように配置され、行内でどのくらいのスペースを占めるかを試すことができます。
背景色を追加する
画像モジュールの背景設定に移動し、背景色を追加します。 次のステップでは、この背景色とブレンド効果を使用して背景画像を組み合わせて、画像を暗くします。
- 背景色：＃686868
背景画像を追加する
選択した背景画像を追加し、それに応じて背景設定を変更します。
- 背景画像サイズ：カバー
- 背景画像の位置：中央
- 背景画像の繰り返し：繰り返しなし
- 背景画像のブレンド：乗算
サイジング
作業中の行に同じサイズの2つの列を使用しましたが、結果はそのようには見えません。 追加する各モジュールのサイズを手動で変更して、異なる列構造を使用しているように見せます。 （別の列構造を選択するのではなく）これを行う理由は、小さい画面サイズでもすべてが見栄えがよく、応答性が高いようにするためです。 イメージモジュールのサイズ設定に移動し、幅を変更します。
- 幅：88％
- モジュールの配置：左
間隔
次に、間隔設定で画像のサイズを決定します。 また、これらの値にビューポートユニットを使用して、すべての画面サイズでデザインが完全に応答するようにしています。
- トップパディング：26.3vw（デスクトップ）、48vw（タブレット）、72vw（電話）
- ボトムパディング：26.3vw（デスクトップ）、48vw（タブレット）、72vw（電話）
アニメーション
最後になりましたが、画像モジュールにスライドアニメーションを追加します。 アニメーションを適用すると、画像が最初の列に入った瞬間からのみ表示され始めることがわかります。 2番目の列の背景色は、左にスライドしている間、画像モジュールの上に残ります。
- アニメーションスタイル：スライド
- アニメーションの繰り返し：1回
- アニメーションの方向：左
- アニメーション時間：1450ms
- アニメーション強度：60％
- アニメーションの開始不透明度：100％
ボタンモジュールを列1に追加
コピーを追加
列1で次に必要なモジュールは、ボタンモジュールです。 お好みのコピーを入力してください。
ボタンの設定
次に、[デザイン]タブに移動し、ボタンの設定を変更します。
- ボタンにカスタムスタイルを使用する：はい
- ボタンのテキストサイズ：1.5vw（デスクトップ）、2.5vw（タブレット）、4vw（電話）
- ボタンのテキストの色：#ffffff
- ボタンの背景色：＃e02b20
- ボタンの境界線の幅：0px
- ボタンの境界線半径：1px
- ボタンフォント：ポピン
- フォントの太さ：重い
間隔
間隔の値も変更します。
- トップマージン：-3.3vw（デスクトップ）、-6vw（タブレット）、-9.1vw（電話）
- 左パディング：8vw
- 右パディング：8vw
ボックスシャドウ
そして、微妙なボックスシャドウを追加して、ページに奥行きを作成します。
- ボックスシャドウブラー強度：20px
- 影の色：rgba（0,0,0,0.27）
テキストモジュール＃1を列2に追加します
H1コンテンツを追加する
2列目へ！ 必要な最初のモジュールはテキストモジュールです。 選択したH1コンテンツをいくつか追加します。
H1テキスト設定
次に、[デザイン]タブに移動し、H1テキスト設定を変更します。
- 見出しフォント：ポピン
- 見出しのテキストの色：#ffffff
- 見出しのテキストサイズ：4vw（デスクトップ）、5vw（タブレット）、6vw（電話）
間隔
間隔の値も変更します。
- トップマージン：12vw
- 左マージン：-20vw
- 右マージン：17vw（デスクトップ）、15vw（タブレット）、1vw（電話）
アニメーション
そして、微妙なアニメーションを追加します。
- アニメーションスタイル：スライド
- アニメーションの繰り返し：1回
- アニメーションの方向：下
- アニメーション時間：1450ms
- アニメーション強度：10％
- アニメーションの開始不透明度：100％
Dividerモジュールを列2に追加します
可視性
2番目の列で必要な次のモジュールはDividerモジュールです。 [仕切りを表示]オプションが有効になっていることを確認してください。
- 仕切りを表示：はい
色
次に、[デザイン]タブに移動し、仕切りの色を変更します。
- 色：＃e02b20
アニメーション
次に、Dividerモジュールにアニメーションを追加します。
- アニメーションスタイル：スライド
- アニメーションの繰り返し：1回
- アニメーションの方向性：右
- アニメーション時間：1450ms
- アニメーション強度：83％
- アニメーションの開始不透明度：100％
テキストモジュール＃2を列2に追加します
コンテンツを追加する
2番目の列に必要な次の最後のモジュールに進みます。 選択した説明を追加します。
テキスト設定
次に、[デザイン]タブのテキスト設定に移動し、それに応じていくつかの変更を加えます。
- テキストフォント：ポピンズ
- テキストフォントの太さ：軽い
- テキストの色：＃919191
- テキストサイズ：0.7vw（デスクトップ）、1.8vw（タブレット）、2.2vw（電話）
- テキスト文字の間隔：0.1vw
- テキスト行の高さ：2.2em
間隔
間隔の値も変更します。
- トップマージン：9vw（デスクトップ）、19vw（タブレット）、23vw（電話）
- 下マージン：12vw（デスクトップ）、19vw（タブレット）、23vw（電話）
- 左マージン：-3vw
- 右マージン：20vw（デスクトップ）、6vw（タブレット）、3vw（電話）
アニメーション
最後になりましたが、モジュールにフェードアニメーションを追加すれば、完了です。
- アニメーションスタイル：フェード
- アニメーションの繰り返し：1回
- アニメーション時間：1450ms
- アニメーションの遅延：1000ms
- アニメーションの開始不透明度：0％
プレビュー
すべての手順を完了したので、さまざまな画面サイズでの結果を最後に見てみましょう。
モバイル
デスクトップ
最終的な考え
この投稿では、Diviを使用して見事なスプリットコンテンツヒーローセクションを作成する方法を紹介しました。 分割コンテンツのヒーローセクションは非常に人気があり、Webで頻繁に使用されますが、応答性が高いことを確認することも重要です。 このチュートリアルが、今後構築するWebサイトのモバイルスプリットコンテンツヒーローセクションの作成に役立つことを願っています。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！