Letterize.jsとAnime.jsを使用してDivi内に高度なテキストアニメーションを追加する方法

公開: 2020-09-07

Diviの組み込みアニメーションは、Webサイトにその余分なエッジを追加することになると、多くの可能性を提供します。ただし、これらのアニメーションでは、一度に1つのコンテナに1つのアニメーションを追加できます。ほとんどの場合、これで十分ですが、さらに一歩進んだプロジェクトもあります。たとえば、高度なテキストアニメーションを追加したいと思うかもしれません。このチュートリアルでは、その方法を正確に説明します。このチュートリアルは、フレームワークとしてのDiviを外部のJavascriptライブラリと組み合わせる方法を学びたい場合の大きな足がかりになります。 Diviの組み込み要素とオプションを使用してデザイン全体を作成し、letterize.jsライブラリとanime.jsライブラリを使用してテキストモジュールをターゲットにして、高度なテキストアニメーションを作成します。アプローチを理解すると、想像できるあらゆる種類の高度なテキストアニメーションを作成できるようになります。

それを手に入れよう！

プレビュー

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

デスクトップ

高度なテキストアニメーション

モバイル

高度なテキストアニメーション

高度なテキストアニメーションレイアウトを無料でダウンロード

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

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

無料でダウンロード

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

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

1.ヒーローセクションデザインを作成する

新しいセクションを追加

間隔

新しいページを作成するか、既存のページを開くことから始めます。ページ内に、新しいセクションを追加します。セクション設定を開き、さまざまな画面サイズで上部と下部のパディングを変更します。

トップパディング：180px（デスクトップ）、100px（タブレット）、50px（電話）
下部のパディング：180px（デスクトップ）、100px（タブレット）、50px（電話）

高度なテキストアニメーション

行＃1を追加

カラム構造

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

高度なテキストアニメーション

間隔

モジュールをまだ追加せずに、行設定を開き、デフォルトの下部パディングをすべて削除します。

ボトムパディング：0px

高度なテキストアニメーション

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

H1コピーを追加

この行に必要なモジュールはテキストモジュールだけです。選択したH1コンテンツをいくつか追加します。

高度なテキストアニメーション

H1テキスト設定

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

見出しフォント：Montserrat
見出しのテキストの色：rgba（232,232,232,0.41）
見出しのテキストサイズ：80px（デスクトップ）、50px（タブレット）、40px（電話）
見出し文字の間隔：-10px（デスクトップ）、-4px（タブレット）、-3px（電話）
見出し線の高さ：0.6em（デスクトップ）、0.7em（タブレット）、0.8em（電話）

高度なテキストアニメーション

行＃2を追加

カラム構造

次の列構造を使用して、前の行のすぐ下に別の行を追加します。

高度なテキストアニメーション

サイジング

行設定を開き、サイズ設定で最大幅を変更します。

最大幅：1680px

高度なテキストアニメーション

間隔

次に、すべての下マージンとパディングを削除します。

下マージン：0px
ボトムパディング：0px

高度なテキストアニメーション

画像モジュールを列に追加

イラストをアップロード

次に、画像モジュールを追加し、この投稿の冒頭でダウンロードできたフォルダーにある無料のイラストをアップロードします。

高度なテキストアニメーション

サイジング

モジュールのデザインタブに移動し、画像に全幅を強制します。

全幅を強制：はい

高度なテキストアニメーション

間隔

次に、負のボトムマージンを追加します。

下マージン：-12％

高度なテキストアニメーション

アニメーション

そして、次のアニメーション設定を追加して、モジュール設定を完了します。

アニメーションスタイル：フェード
アニメーションの遅延：3000ms

高度なテキストアニメーション

行＃3を追加

カラム構造

次の最後の行に進みます。次の列構造を使用します。

高度なテキストアニメーション

間隔

行のデザインタブに移動し、いくつかのカスタムパディング値を追加します。

トップパディング：10％
ボトムパディング：5％
左パディング：3％
右パディング：3％

高度なテキストアニメーション

ボックスシャドウ

次に、微妙なボックスシャドウを有効にします。

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

高度なテキストアニメーション

アニメーション

そして、次のアニメーションを追加して、行の設定を完了します。

アニメーションスタイル：フェード
アニメーションの遅延：3000ms

高度なテキストアニメーション

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

コンテンツを追加する

モジュールを追加する時が来ました。必要な最初のモジュールは、説明コンテンツを含むテキストモジュールです。

高度なテキストアニメーション

テキスト設定

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

テキストフォント：Lato
テキストサイズ：18px
テキスト文字の間隔：1px
テキスト行の高さ：2.7em

高度なテキストアニメーション

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

コピーを追加

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

高度なテキストアニメーション

ボタンの設定

モジュールの[デザイン]タブに移動し、ボタンの設定を次のように変更します。

ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：16px
ボタンのテキストの色：＃171cff
ボタンの境界線の幅：0px
ボタンの境界線半径：0px

高度なテキストアニメーション

ボタンフォント：Montserrat
ボタンのフォントスタイル：大文字

高度なテキストアニメーション

間隔

次に、間隔設定内に次のパディング値を適用します。

トップパディング：2％
ボトムパディング：2％
左パディング：5％
右パディング：5％

高度なテキストアニメーション

ボックスシャドウ

次のボックスシャドウを追加して、モジュール設定を完了します。

ボックスシャドウの垂直位置：5px
ボックスシャドウスプレッド強度：-2px
影の色：＃171cff

高度なテキストアニメーション

2.CSSクラスを見出しに追加します

テキストモジュール＃1を開き、[テキスト]タブをクリックします

すべてのデザイン要素が揃ったので、次は高度なテキストアニメーションを見出しに追加します。 H1コピーを含むテキストモジュールを開き、テキストタブを選択します。

高度なテキストアニメーション

CSSIDをH1タグに追加します

H1内にカスタムCSSIDを追加します。

ID =” headlineCopy”

高度なテキストアニメーション

3. Letterize＆AnimeLibariesを追加します

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

アニメーションを作成するために、letterize.jsおよびanime.jsライブラリを使用しています。これらのライブラリを追加するには、最後の行の列に新しいコードモジュールを挿入します。

高度なテキストアニメーション

両方のライブラリを追加する

次に、ライブラリに戻る次のソースを含む2つの異なるスクリプトタグを追加します。

src =” https://cdn.jsdelivr.net/gh/WojciechWKROPCE/letterize-js/lib/letterize.min.js”
src =” https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.0/anime.min.js”

高度なテキストアニメーション

4.アニメーションコードを追加します

個人レベルの手紙のアニメーション

このチュートリアルの最後の部分では、letterize.jsおよびanime.jsライブラリの一部であるアニメーションコードを追加します。この投稿のプレビューで見ることができた効果を実現するために、2種類のアニメーションを適用します。最初のアニメーションは、各文字に個別に連続して適用されます。これは、letterize.jsライブラリを使用して実現されます。このライブラリは、以下のコードの最初の部分と組み合わせて、コピー内の各文字を別々のスパン内に配置します。これらのスパンは、アニメーションプロセス全体で個別にターゲットになります。以下のコードは、スクリプトタグの間に配置してください。

jQuery(function($){
$(document).ready(function(){

var headlineCopy = new Letterize({
targets: "#headlineCopy"
});

var animation = anime.timeline({
targets: '#headlineCopy span',
delay: anime.stagger(20),
loop: false
});

animation
.add({
opacity: [0, 1],
scale: [0, 1.2, 1],
duration: 1500,
elasticity: 600,
color: '#000',
})

.add({
color: '#00FFF7',
})

.add({
color: '#D2BEFB',
})

.add({
color: '#171cff',
});

});
});

各追加関数は、アニメーションのタイムラインでアニメーションを表します。これらのアニメーションは、個々のレベルの各文字に適用されます。これらの追加関数は、必要に応じて変更したり、新しい関数を追加したり、現在の関数を削除したりできます。最後の追加関数が「;」で正しく閉じられていることを確認してください。最後に（上記のコードでわかるように）。これらの追加関数内にさまざまなCSSプロパティを追加できます。プロパティとその使用方法については、anime.jsのドキュメントの例をご覧ください。このチュートリアルでは、タイムラインがどのように機能するかを示すために意図的に複数のアニメーションを追加しましたが、独自のプロジェクトでは、より微妙なものまたはより短いものを使用することをお勧めします。

高度なテキストアニメーション

文のアニメーション

各文字を個別にターゲットとするアニメーションの最初の部分を追加したら、アニメーションの2番目の部分に進みます。この部分は、全体としてコピー全体を対象としています。アニメーションのアプローチは上記と同じです。モジュール全体をタイムラインアニメーション内に配置します。各追加関数は、そのタイムライン内の異なるアニメーションを表します。これらの追加機能を変更したり、新しい機能を追加したり、現在の機能を削除したりできます。以下の印刷画面でわかるように、スクリプトコードが終了する前にこの新しいコードを配置してください。

anime.timeline({loop: false})

.add({
targets: '#headlineCopy',
lineHeight: '1em',
delay: '1500'

})

.add({
targets: '#headlineCopy',
translateX: ['-5%', 0],
letterSpacing: '-2px',
});

高度なテキストアニメーション

SpanのカスタムCSSを追加する

ここで、文字ごとに個別のスパンを作成したので、文字が隣り合って表示されるように、各スパンの表示プロパティを変更する必要があります。そのために、CSSコードをコードモジュールに追加します。必ずスタイルタグの間にコードを配置してください。

#headlineCopy span {
display: inline-block;
}

高度なテキストアニメーション

プレビュー

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

デスクトップ

高度なテキストアニメーション

モバイル

高度なテキストアニメーション

最終的な考え

この投稿では、見出しに高度なテキストアニメーションを作成する方法を紹介しました。デザイン全体をDivi内に構築し、フレームワークをletterize.jsおよびanime.jsライブラリと組み合わせました。ご質問やご提案がございましたら、下のコメント欄にコメントを残してください！

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

Letterize.jsとAnime.jsを使用してDivi内に高度なテキストアニメーションを追加する方法

プレビュー

デスクトップ

モバイル

高度なテキストアニメーションレイアウトを無料でダウンロード

無料でダウンロード

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

1.ヒーローセクションデザインを作成する

新しいセクションを追加

間隔

行＃1を追加

カラム構造

間隔

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

H1コピーを追加

H1テキスト設定

行＃2を追加

カラム構造

サイジング

間隔

画像モジュールを列に追加

イラストをアップロード

サイジング

間隔

アニメーション

行＃3を追加

カラム構造

間隔

ボックスシャドウ

アニメーション

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

コンテンツを追加する

テキスト設定

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

コピーを追加

ボタンの設定

間隔

ボックスシャドウ

2.CSSクラスを見出しに追加します

テキストモジュール＃1を開き、[テキスト]タブをクリックします

CSSIDをH1タグに追加します

3. Letterize＆AnimeLibariesを追加します

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

両方のライブラリを追加する

4.アニメーションコードを追加します

個人レベルの手紙のアニメーション

文のアニメーション

SpanのカスタムCSSを追加する

プレビュー

デスクトップ

モバイル

最終的な考え

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