タイトルは、ホームページの最も重要な部分のXNUMXつです。 これは通常、最初に目にするものであり、したがって第一印象を決定するものです。 他の第一印象のように、あなたはそれが良いものであることを望みます。 タイトルをクリエイティブに表現する方法をお探しの場合は、このチュートリアルをお楽しみください。タイトルにCSSテキストブロックアニメーションを追加する方法を紹介します。また、レイアウトJSONファイルを無料でダウンロードすることもできます。
概要
チュートリアルに入る前に、さまざまな画面サイズでの結果を見てみましょう。
設計を始めましょう
セクション＃1を追加
グラデーションの背景
新しいページまたは作業中のページに通常のセクションを追加することから始めます。 セクション設定を開き、次のグラデーションの背景を適用します。
- 色1：＃f0f2b
- 色2：＃c10b1a
- 勾配タイプ：線形
- 勾配方向：63deg
スペーシング
セクションデザインタブに切り替えて、次のカスタムの上部と下部の塗りつぶし値をさまざまな画面サイズに適用します：
- 上部パディング：7vw（デスクトップ）、20vw（タブレット）、25vw（電話）
- 下部のパディング：7vw（デスク）、20vw（タブレット）、25vw（電話）
ボーダー
また、セクションに境界線を追加します。
- ボーダー幅：2vw（上、左、右）
- 下の境界線の幅：0vw
- 境界線の色：#ffffff
新しい行を追加
カラム構造
次の列構造を使用して、セクションに新しい行を追加し続けます。
サイズ剤
ラインパラメータを開き、それに応じて寸法パラメータを変更します。
- 幅：100％
- 最大幅：100％
テキストモジュールを列に追加します
H1コンテンツを追加
次に、選択したH1タイトルでテキストモジュールを追加します。
H1タイトルの各単語にDivタグを追加します
タイトルコピーのテキストタブに切り替えて、タイトルの各単語に異なるdivを追加します。 CSS IDは、単語ごとに異なる必要があります。
準備完了
で
ビルド
綺麗な
Webサイト？
H1テキスト設定
モジュール設計タブに切り替え、それに応じてH1テキスト設定を変更します。
- タイトルフォント：Work Sans
- タイトルのフォントの太さ：中
- ヘッダーテキストの色：#ffffff
- ヘッダーテキストサイズ：4vw（デスクトップ）、5vw（タブレット）、6vw（電話）
- 見出し行の高さ：1,4 em
スペーシング
次に、さまざまな画面サイズでマージン値を変更します。
- 左マージン：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（電話）
アニメーション
アニメーション設定もカスタマイズします。
- アニメーションスタイル：フリップ
- アニメーションの方向：下
- アニメーションの遅延：2000ミリ秒
- アニメーション強度：100％
- アニメーション開始の不透明度：100％
- アニメーションの速度曲線：イーズインアウト
- アニメーションの繰り返し：XNUMX回
セクション＃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（電話）
シャドーボックス
そして、微妙なボックスシャドウを適用してモジュール設定を完了します。 それでおしまい！
- ボックスシャドウブラー強度：50ピクセル
- 影の色：rgba（0,0,0,0,1）
概要
すべての手順を完了したので、さまざまな画面サイズでどのように表示されるかを最後に見てみましょう。
最終的な考え
この記事では、CSSテキストブロックアニメーションをタイトルに追加する方法を紹介しました。 タイトルが表示され、最初から読まれていることを確認することが重要です。タイトルにアニメーションを追加すると、間違いなく役立ちます。 レイアウトJSONファイルを無料でダウンロードすることもできました。 ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。
翻訳元： ElegantThemes
