Diviでユニークなテキストデザインの文字をアニメーション化する方法
公開: 2019-04-17アニメーションは、最新のWebサイトのユーザーエクスペリエンスの一般的な部分になっています。 見た目がかっこいいだけでなく、コンテンツに命を吹き込むことでユーザーを引き付ける微妙なインタラクティブ要素を追加することもできます。 Diviの組み込みアニメーション効果を使用すると、さまざまなアニメーションスタイルでページ上のほぼすべての要素をアニメーション化できます。
このチュートリアルでは、Diviでいくつかのユニークなテキストデザインの文字をアニメーション化する方法を紹介します。 個々の文字をテキストモジュールに配置することで、コンテンツを創造的な方法で際立たせるさまざまなアニメーションスタイル、長さ、および遅延を使用して、各文字のアニメーションをターゲットにすることができます。 コンテンツを構成する文字はあまりseoフレンドリーではないため、この手法は純粋に設計目的です。 ただし、アニメーションの文字を使用すると、驚くべき方法でユーザーとストーリーを共有できます。
始めましょう。
スニークピーク
レターアニメーションのデザイン例のレイアウトを無料でダウンロード
このチュートリアルの文字アニメーションデザインを手に入れるには、まず下のボタンを使用してダウンロードする必要があります。 ダウンロードにアクセスするには、以下のフォームを使用して、DiviDailyのメーリングリストに登録する必要があります。 新規加入者として、毎週月曜日にさらに多くのDiviの良さと無料のDiviレイアウトパックを受け取ります！ すでにリストに載っている場合は、下にメールアドレスを入力して[ダウンロード]をクリックしてください。 「再購読」したり、追加のメールを受信したりすることはありません。
無料でダウンロード
Diviニュースレターに参加すると、究極のDiviランディングページレイアウトパックのコピーに加えて、他のすばらしい無料のDiviリソース、ヒント、コツがたくさんメールで送信されます。 従うと、すぐにDiviマスターになります。 すでに購読している場合は、以下にメールアドレスを入力し、[ダウンロード]をクリックしてレイアウトパックにアクセスしてください。
正常にサブスクライブしました。 メールアドレスを確認してサブスクリプションを確認し、毎週無料のDiviレイアウトパックにアクセスしてください。
レイアウトをページにインポートするには、zipファイルを抽出し、jsonファイルをDiviBuilderにドラッグするだけです。
チュートリアルに行きましょう。
入門
このチュートリアルでは、必要なのはDiviだけです。 フロントエンドのDiviビルダーを使用して、最初からデザインを構築します。 開始するには、新しいページを作成し、ページにタイトルを付け、クリックを展開してDiviBuilderを使用します。 次に、「最初からビルド」オプションを選択し、クリックしてフロントエンドでビルドします。
これで、設計の準備が整いました。
文字をアニメーション化するためのレイアウトの構築
セクション、行、列の追加
先に進み、1列の行を持つ新しい通常のセクションを作成します。
テキストモジュール（白い文字が含まれます）の追加を開始する前に、セクションに暗い背景画像を追加しましょう。 セクション設定を開き、背景画像を追加します。 投資会社のランディングページの既成のレイアウトからの抽象的な背景画像を使用しています。
テキストモジュールを使用した個別のレターブロックの作成
文字にアニメーションを追加する前に、追加する文字ごとに個別のテキストモジュールを作成する必要があります。 この例では、「DiviDesign」というテキストを作成します。 このテキストフレーズには11文字のスペース（文字間のスペースを含む）が含まれているため、11個の異なるテキストモジュールを追加する必要があります。
先に進み、列にテキストモジュールを追加します。
コンテンツボックスに、テキストの最初の文字（この場合は文字「d」）を追加します。
次に、テキストデザイン設定を次のように更新します。
- テキストフォント：ルービック
- テキストフォントスタイル：TT
- テキストテキストの色：#ffffff
- テキストテキストサイズ：80px（デスクトップ）、50px（タブレット）、30px（電話）
- テキスト行の高さ：1.6em
- テキストの向き：中央
次に、次のようにアニメーションをテキストモジュールに追加します。
- アニメーションスタイル：スライド
- アニメーションの方向性：上
- アニメーション時間：600ms
- アニメーションの遅延：100ms
- アニメーションの開始不透明度：100％
テキストモジュールを複製し、文字「i」でコンテンツを更新します。 次に、次のようにアニメーションの遅延を100ミリ秒増やします。
- アニメーションの遅延：200ms
テキストモジュールを複製し、文字「v」でコンテンツを更新します。 次に、アニメーションの遅延を300msに増やします。
- アニメーションの遅延：300ms
テキストモジュールを複製し、文字「i」でコンテンツを更新します。 次に、アニメーションの遅延を400msに増やします。
- アニメーションの遅延：400ms
この次のテキストモジュールでは、空白を追加します。 テキストモジュールを複製し、次のhtmlをコンテンツボックスに追加します。
 
これのアニメーション遅延を更新する必要はありません。
次に、テキストモジュールを複製し、文字「d」でコンテンツを更新します。 これは「デザイン」という言葉の最初の文字です。 次に、アニメーションの遅延を500msに増やします。
- アニメーションの遅延：500ms
テキストモジュールを複製し、「デザイン」という単語を綴る残りの文字ごとにアニメーションの遅延を100ミリ秒増やすプロセスを続行します。
- 文字「e」：アニメーションの遅延600ms
- 文字「s」：アニメーションの遅延700ms
- 文字「i」：アニメーションの遅延800ms
- 文字「g」：アニメーションの遅延900ms
- 文字「n」：アニメーションの遅延1000ms
これまでのデザインは次のようになります。
モジュールを水平方向に整列させるためのFlexプロパティの追加
私たちが探している結果はまだ完全ではありません。 しかし、魔法のようにデザインをまとめる必要があるのは、行の列にcssの小さなスニペットを追加することだけです。 これを行うには、行の設定を開き、次のカスタムCSSを列のメイン要素に追加します。
display: flex;
display：flexプロパティは、さまざまなブラウザの幅に美しく調整される柔軟なテーブルで、すべてのモジュールを水平方向に配置します。 また、モジュールは1列の行にあるため、タブレットやモバイルデバイスでデザインが壊れることはありません。
また、カスタムのガター幅を追加して、文字の下の余白を取り除き、行に上下のパディングを追加して、文字にアニメーション化する余地を持たせる必要があります。
- 側溝幅：1
- カスタムパディング：5vw上部、5vw下部
これが最終結果です。
さまざまなアニメーションスタイルの追加
この設定により、完全にユニークな効果のための新しいアニメーションスタイルを簡単に追加できます。 これを行うには、Diviの複数選択機能を利用して、すべてのモジュールを一度に更新できます。 フロントエンドで、Shiftキーを押しながら、最初と最後のテキストモジュールをクリックします。 次に、選択したモジュールの1つの設定を開きます。
これにより、要素設定モーダルが開き、選択したすべてのモジュールの設定を更新できるようになります。 各文字のカスケード効果を維持したいので、アニメーションの遅延を変更したくありません。 ただし、他のアニメーションオプションをさまざまな方法で更新して、完全にユニークな結果を作成することができます。
前の例を維持できるように、新しいアニメーションをテストする前にセクションを複製することをお勧めします。
ここにいくつかの例があります。
逆ズームテキストアニメーション
逆ズーム効果で文字をアニメーション化するには、要素設定（すべてのモジュールの設定）を次のように更新します。
- アニメーションスタイル：ズーム
- アニメーションの方向性：中央
- アニメーション強度：200％
これが最終結果です。
ローリングウェーブテキストアニメーション
ローリングウェーブ効果で文字をアニメーション化するには、要素設定（すべてのモジュールの設定）を次のように更新します。
- アニメーションスタイル：回転
- アニメーションの方向性：上
- アニメーション強度：100％
これが最終結果です。
ドミノテキストアニメーション
ドミノ効果でテキストをアニメーション化するには、要素設定（すべてのモジュールの設定）を次のように更新します。
- アニメーションスタイル：フリップ
- アニメーションの方向：左
- アニメーション強度：100％
これが最終結果です。
スタンドアップテキストアニメーション
ドミノ効果でテキストをアニメーション化するには、要素設定（すべてのモジュールの設定）を次のように更新します。
- アニメーションスタイル：折り
- アニメーションの方向性：上
- アニメーション強度：100％
次に、行設定の下のメイン列要素に次のcssを追加して、パースペクティブを追加して3Dデザイン要素を作成します。
メイン列要素CSS：
perspective: 1000px;
これが最終結果です。
アニメーションの方向の組み合わせを使用して文字をアニメーション化する
よりクリエイティブになりたい場合は、アニメーション効果の組み合わせを使用して文字をアニメーション化できます。 この例では、スライドスタイルにアニメーションの方向と強度の組み合わせを使用します。 これにより、完全にユニークなプレゼンテーションが可能になります。
これがその方法です。
まず、以前に作成したセクションの1つを複製して、設計プロセスをすぐに開始できるようにします。
次に、最初の4つのテキストモジュールを削除して、「design」というテキストのみが表示されるようにします。
セクション設定
次に、アニメーションの一部の文字をセクションビューポートの外側から開始する必要があるため、次のようにcssの小さなスニペットをセクション設定に追加する必要があります。
overflow: hidden;
これにより、セクションに入るまで文字が非表示になります。
行設定
ここで、テキストモジュール（文字）を中央に配置するために、次のcssを行設定に追加する必要があります。
display:flex; justify-content: center;
テキストモジュールの共通設定
複数選択を使用して、6つのテキストモジュールすべてを次の要素設定で更新します。
- カスタムマージン：左3％、右3％
- ボーダー幅：1px
- ボーダーカラー：#ffffff
- アニメーションスタイル：スライド
- アニメーション時間：2000ms
- アニメーションの遅延：100ms
- アニメーション強度：300％
これにより、すべてのテキストモジュールに共通する基本的なアニメーション設定が処理されます。 これで、それらのアニメーション設定を個別に微調整できます。
テキストモジュールの個別設定
この時点で、個々のテキストモジュールの設定を微調整して、それぞれのアニメーションの方向を変更することができます。 これにより、完全にユニークな方法で文字をアニメーション化できます。 文字ごとに、アニメーションの方向と強度を次のように更新します。
- 文字D
アニメーションの方向性：上 - 手紙E
アニメーションの方向：下 - 文字S
アニメーションの方向：左
アニメーション強度：80％ - 手紙I
アニメーションの方向性：右
アニメーション強度：80％ - 文字G
アニメーションの方向：下 - 文字N
アニメーションの方向性：上
これが最終的なデザインです。
そして、これがモバイルでどのように見えるかです。
最終的な考え
適切に設定すれば、Diviには文字をアニメーション化する方法がたくさんあると言っても過言ではありません。 そして、これらの例を作成するときに、アニメーション設定をいじくり回すのをやめるのはかなり難しいと言わざるを得ません。 試すことができるバリエーションはたくさんあります！ とにかく、これがあなたの次のプロジェクトのためにあなたに少しのインスピレーションを与えることを願っています。 どちらかといえば、あなたはそれを楽しむためだけにそれを構築したいかもしれません。
コメントでお返事をお待ちしております。
乾杯！