Diviを使用してCSSテキストブロックアニメーションを見出しに追加する方法

あなたの見出しはあなたのホームページの最も重要な部分の1つです。 それは通常、人々が最初に読むコピーであり、それが彼らの第一印象になります。 他の第一印象のように、あなたはそれが良いものであることを望みます。 今、あなたがあなたの見出しを紹介する創造的な方法を探しているなら、あなたはこの投稿を楽しむでしょう。 このチュートリアルでは、CSSテキストブロックアニメーションを見出しに追加する方法を示します。また、レイアウトのJSONファイルを無料でダウンロードすることもできます。

それを手に入れましょう。

プレビュー

チュートリアルに入る前に、さまざまな画面サイズでの結果を簡単に見てみましょう。

デスクトップ

モバイル

テキストブロックアニメーションレイアウトを無料でダウンロード

フリーテキストブロックのアニメーションレイアウトを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。

ファイルをダウンロードする

無料でダウンロード

Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。

ダウンロード

正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。

再作成を始めましょう！

セクション＃1を追加

グラデーションの背景

新しいページまたは作業中のページに通常のセクションを追加することから始めます。 セクション設定を開き、次のグラデーションの背景を適用します。

• 色1：＃ff0f2b
• 色2：＃c10b1a
• グラデーションタイプ：線形
• グラデーション方向：63度

間隔

セクションの[デザイン]タブに移動し、さまざまな画面サイズに次のカスタムの上部と下部のパディング値を適用します。

• トップパディング：7vw（デスクトップ）、20vw（タブレット）、25vw（電話）
• 下部のパディング：7vw（デスクトップ）、20vw（タブレット）、25vw（電話）

国境

セクションにも境界線を追加します。

• 境界線の幅：2vw（上、左、右）
• 下の境界線の幅：0vw
• ボーダーカラー：#ffffff

新しい行を追加

カラム構造

次の列構造を使用して、セクションに新しい行を追加して続行します。

サイジング

行設定を開き、それに応じてサイズ設定を変更します。

• 幅：100％
• 最大幅：100％

列にテキストモジュールを追加

H1コンテンツを追加する

次に、選択したH1見出しのテキストモジュールを追加します。

H1見出しの各単語にDivタグを追加する

見出しのコピーのテキストタブに切り替えて、見出しの各単語に異なるdivを追加します。 CSSIDは単語ごとに異なる必要があります。

<h1><div id="word-1" class="display-state">Ready</div>
<div id="word-2" class="display-state">to</div>
<div id="word-3" class="display-state">Build</div>
<div id="word-4" class="display-state">Beautiful</div>
<div id="word-5" class="display-state">Websites?</div></h1>

H1テキスト設定

モジュールの[デザイン]タブに移動し、それに応じてH1テキスト設定を変更します。

• 見出しフォント：Work Sans
• 見出しフォントの太さ：中
• 見出しのテキストの色：#ffffff
• 見出しのテキストサイズ：4vw（デスクトップ）、5vw（タブレット）、6vw（電話）
• 見出し線の高さ：1.4em

間隔

次に、さまざまな画面サイズでマージン値を変更します。

• 左マージン：20vw（デスクトップとタブレット）、15vw（電話）
• 右マージン：35vw（デスクトップ）、20vw（タブレット）、15vw（電話）

コードモジュールを列に追加

CSSコードを挿入

テキストブロックアニメーションを見出しに適用するには、CSSコードが必要です。 そのCSSコードを新しいコードモジュールに追加します。

<style>

.display-state {
display: inline !important;
}

#word-1 {
-webkit-animation: slide-right 0.5s linear 0.3s both;
	        animation: slide-right 0.5s linear 0.3s both;
}

#word-2 {
-webkit-animation: slide-right 0.5s linear 0.6s both;
	        animation: slide-right 0.5s linear 0.6s both;
}

#word-3 {
-webkit-animation: slide-right 0.5s linear 0.9s both;
	        animation: slide-right 0.5s linear 0.9s both;
}

#word-4 {
-webkit-animation: slide-right 0.5s linear 1.2s both;
	        animation: slide-right 0.5s linear 1.2s both;
}
#word-5 {
-webkit-animation: slide-right 0.5s linear 1.5s both;
	        animation: slide-right 0.5s linear 1.5s both;
}

@-webkit-keyframes slide-right {
0% {
background-color: #000;
opacity: 0.5;
color: transparent;
}

1% {
opacity: 1;
}
}

</style>

間隔

モジュールの[デザイン]タブに移動し、デフォルトの下部パディングをすべて削除します。

• 下マージン：0px

ボタンモジュールを列に追加

コピーを追加

次に必要なモジュールはボタンモジュールです。 お好みのコピーを入力してください。

ボタンの設定

モジュールの[デザイン]タブに移動し、それに応じてボタンの設定を変更します。

• ボタンにカスタムスタイルを使用する：はい
• ボタンのテキストサイズ：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• ボタンのテキストの色：#ffffff
• ボタンの背景色：＃000000
• ボタンの境界線の幅：0px

• ボタンフォント：Work Sans

間隔

次に、間隔の設定に移動し、さまざまな画面サイズにカスタムマージンとパディング値を適用します。

• トップマージン：3vw（デスクトップ）、
• 左マージン：20vw（デスクトップとタブレット）、15vw（電話）
• トップパディング：1.2vw（デスクトップ）、2vw（タブレット）、4vw（電話）
• ボトムパディング：1.2vw（デスクトップ）、2vw（タブレット）、4vw（電話）
• 左パディング：1.8vw（デスクトップ）、3vw（タブレット）、6vw（電話）
• 右パディング：1.8vw（デスクトップ）、3vw（タブレット）、6vw（電話）

アニメーション

アニメーション設定もカスタマイズします。

• アニメーションスタイル：フリップ
• アニメーションの方向：下
• アニメーションの遅延：2000ms
• アニメーション強度：100％
• アニメーションの開始不透明度：100％
• アニメーション速度曲線：イーズインアウト
• アニメーションの繰り返し：1回

セクション＃2を追加

前のセクションのすぐ下に新しい通常のセクションを追加して続行します。

間隔

セクション設定を開き、デフォルトの上部パディングを削除します。

• トップパディング：0px

新しい行を追加

カラム構造

次の列構造を使用して、新しい行を追加して続行します。

サイジング

モジュールをまだ追加せずに、行設定を開き、行がセクションコンテナの幅全体を占めるようにします。

• 幅：100％
• 最大幅：100％

列にテキストモジュールを追加

コンテンツを追加する

次に、選択した説明コンテンツを含むテキストモジュールを追加します。

背景色

白い背景色を追加します。

• 背景色：#ffffff

テキスト設定

モジュールの[デザイン]タブに移動し、それに応じてテキスト設定を変更します。

• テキストフォント：Work Sans
• テキストの色：＃9b9b9b
• テキストサイズ：1vw（デスクトップ）、2vw（タブレット）、3vw（電話）
• テキスト行の高さ：2.6em

間隔

さまざまな画面サイズにまたがるカスタム間隔値も追加します。

• 上マージン：-5vw（デスクトップ）、-20vw（タブレット）、-27vw（電話）
• 左マージン：20vw（デスクトップ）、13vw（タブレット）、8vw（電話）
• 右マージン：20vw（デスクトップ）、13vw（タブレット）、8vw（電話）
• トップパディング：5vw（デスクトップ）、7vw（タブレットと電話）
• 下部のパディング：5vw（デスクトップ）、7vw（タブレットと電話）
• 左パディング：3vw（デスクトップ）、5vw（タブレット）、6vw（電話）
• 右パディング：3vw（デスクトップ）、5vw（タブレット）、6vw（電話）

ボックスシャドウ

そして、微妙なボックスシャドウを適用してモジュール設定を完了します。 それでおしまい！

• ボックスシャドウブラー強度：50px
• 影の色：rgba（0,0,0,0.1）

プレビュー

すべての手順を完了したので、さまざまな画面サイズでの結果を最終的に見てみましょう。

デスクトップ

モバイル

最終的な考え

この投稿では、CSSテキストブロックアニメーションを見出しに追加する方法を紹介しました。 見出しが表示され、最初から読まれていることを確認することが重要です。見出しにアニメーションを追加すると、確実に役立ちます。 レイアウトのJSONファイルも無料でダウンロードできました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

Diviの詳細を知り、Diviの景品をさらに入手したい場合は、メールマガジンとYouTubeチャンネルに登録して、この無料コンテンツを最初に知って利益を得ることができるようにしてください。