Divi＆GSAPで要素をスクロールするたびにアニメーションを再開する方法

公開: 2021-06-28

ページ上の要素をアニメーション化する場合、ビューポートに入ると、要素のアニメーションをアクティブ化することをお勧めします。 Diviの組み込みアニメーション設定では、その要素が表示されてアニメーション化されるとすぐに、ページ全体をリロードするまで静的なままになります。場合によっては、アニメーションが各ビューポートエントリで再開される、より一貫性のあるアプローチを探すことがあります。これを行うと、訪問者がWebサイトで体験することを合理化するのに役立ちます。このチュートリアルでは、Divi、GSAP、およびScrollTrigger forGSAPを使用してこれを行う方法を正確に示します。アプローチを取得すると、ページ上の任意の要素に適用できるようになります。 JSONファイルも無料でダウンロードできます！

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

プレビュー

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

デスクトップ

アニメーションを再開する

モバイル

アニメーションを再開する

レイアウトを無料でダウンロード

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

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

無料でダウンロード

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

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

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

プレースホルダーセクションを追加

デザインの作成を開始する前に、作業中のページに2つのプレースホルダーセクションを追加します。そうすれば、デザインが完成した後のスクロール体験を見ることができます。または、設定済みのページ内でデザインを使用することもできます。新しい通常のセクションを追加します。

アニメーションを再開する

サイジング

セクションの高さを次のように変更します。

高さ：100vh

アニメーションを再開する

クローンプレースホルダーセクション

次に、セクションのクローンを1回作成します。

アニメーションを再開する

プレースホルダーセクション間に新しいセクションを追加する

この投稿のプレビューで確認できたデザインを作成するために、プレースホルダーセクションの間に新しい通常のセクションを追加します。

アニメーションを再開する

行＃1を追加

カラム構造

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

アニメーションを再開する

サイジング

モジュールをまだ追加せずに、行設定を開き、[デザイン]タブに移動して、次のようにサイズ設定を変更します。

カスタムガター幅を使用：はい
側溝幅：2
幅：90％
最大幅：2080px

アニメーションを再開する

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

コンテンツを追加する

次に、最初のテキストモジュールを列に追加し、選択したコンテンツをいくつか含めます。

アニメーションを再開する

テキスト設定

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

テキストフォント：Montserrat
テキストフォントの太さ：重い
テキストフォントスタイル：大文字
テキストの色：＃f9f9f9
文字サイズ：
- デスクトップ：150px
- タブレットと電話：11vw
テキスト行の高さ：1.1em
テキストの配置：中央

アニメーションを再開する

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

H2コンテンツを追加する

前のテキストモジュールの下に別のテキストモジュールを追加し、H2コンテンツをいくつか含めます。

アニメーションを再開する

H2テキスト設定

次のようにH2テキストのスタイルを設定します。

見出し2フォント：Montserrat
見出し2テキストの配置：中央
見出し2テキストサイズ：
- デスクトップ：80px
- タブレットと電話：10vw

アニメーションを再開する

サイジング

100％の幅も追加します。

幅：100％

アニメーションを再開する

ポジション

そして、[詳細設定]タブでモジュール全体を再配置します。

位置：絶対
場所：センター

アニメーションを再開する

行＃2を追加

カラム構造

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

アニメーションを再開する

サイジング

モジュールをまだ追加せずに、行設定を開き、次のようにサイズ設定を調整します。

カスタムガター幅を使用：はい
側溝幅：2
幅：90％
最大幅：2080px

アニメーションを再開する

列1の設定

次に、列1の設定を開きます。

アニメーションを再開する

背景画像

選択した背景画像をアップロードします。

背景画像サイズ：カバー
背景画像の位置：中央

アニメーションを再開する

間隔

次に、列の間隔設定を変更します。

トップパディング：100px
ボトムパディング：
- デスクトップ：400px
- タブレットと電話：200px
左パディング：5.5％
右パディング：5.5％

アニメーションを再開する

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

H4コンテンツを追加する

次に、H4コンテンツを含むテキストモジュールを列1に追加します。

アニメーションを再開する

H4テキスト設定

それに応じてH4テキストのスタイルを設定します。

見出し4フォント：Lato
見出し4フォントの太さ：重い
見出し4フォントスタイル：大文字
見出し4テキストサイズ：13px
見出し4文字の間隔：2px

アニメーションを再開する

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

H3コンテンツを追加する

H3コンテンツを使用して、前のテキストモジュールの下に別のテキストモジュールを追加します。

アニメーションを再開する

H3テキスト設定

それに応じてH3テキスト設定を変更します。

見出し3フォント：Montserrat
見出し3テキストサイズ：36px
見出し3文字の間隔：1px
見出し3行の高さ：1.2em

アニメーションを再開する

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

説明コンテンツを追加

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

アニメーションを再開する

テキスト設定

モジュールのテキスト設定を次のように変更します。

テキストフォント：Lato
テキストの色：＃4c4c4c
テキスト文字の間隔：0.5px
テキスト行の高さ：2em

アニメーションを再開する

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

コピーを追加

この列で必要な最後のモジュールはボタンモジュールです。選択したコピーをいくつか追加します。

アニメーションを再開する

ボタンの設定

デザインタブでボタンのスタイルを設定します。

ボタンにカスタムスタイルを使用する：はい
ボタンのテキストサイズ：14px
ボタンのテキストの色：#ffffff
ボタンの背景色：＃000000
ボタンの境界線の幅：0px

アニメーションを再開する

ボタンフォント：ラト
ボタンのフォントの太さ：太字
ボタンのフォントスタイル：大文字

アニメーションを再開する

列1を再利用する

列2と3を削除します

列1とその中のすべてのモジュールを完了したら、行の残りの2つの列を削除できます。

アニメーションを再開する

列1のクローンを2回

そして、列1を2回複製して再利用します。

アニメーションを再開する

重複する列の背景画像を変更する

重複する各列の背景画像を必ず変更してください。

アニメーションを再開する

重複する列のコンテンツを変更する

モジュールの内容と一緒に。

アニメーションを再開する

列2の設定に変換変換を追加

次に、列2の設定を開き、[デザイン]タブに移動します。そこに到達したら、さまざまな画面サイズに変換変換値を追加して、設計を完成させます。

アニメーションを再開する

左：
- デスクトップ：50px
- タブレットと電話：0px

アニメーションを再開する

2.リスタートアニメーションテクニックをデザインに適用します

行＃2にCSSクラスを追加します

デザインが整ったので、アニメーションの再開テクニックに集中できます。このために、一度に複数のモジュールをターゲットにします。まず、2行目の設定を開き、次のCSSクラスを適用します。

CSSクラス：trigger-animation-row

アニメーションを再開する

行＃1にコードモジュールを追加

このチュートリアルの前のステップで追加したCSSクラスは、この行内のすべてのモジュールを一度にターゲットにするのに役立ちます。再起動アニメーションを作成するために、いくつかのJQueryコード、GSAP JavaScriptライブラリ、およびGSAP用のScrollTriggerライブラリを使用しています。このコードを追加するには、行＃1の2番目のテキストモジュールの下に新しいコードモジュールを挿入します。

アニメーションを再開する

GSAPとScrollTriggerライブラリを追加する

新しいスクリプトタグ内にGSAPライブラリとScrollTriggerライブラリを必ず追加してください。

https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js
https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js

アニメーションを再開する

新しいスクリプトタグを追加する

次に、ライブラリスクリプトタグの下に新しいスクリプトタグを追加します。

アニメーションを再開する

GSAP + ScrollTrigger関数を追加します

新しいスクリプトタグ内に、JQueryコードの次の行をコピーして貼り付けます。

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

var $module = $('.trigger-animation-row .et_pb_module');

$module.each(function(){
var $thisModule = $(this);

gsap.from($thisModule[0], {
scrollTrigger: {
trigger: this,
start: "bottom bottom",
end: "center top",
scrub: false,
repeat: -1,
toggleActions:'restart none none reset'
},
opacity: 0,
x: -100,
scale: 1.1,
duration: 2,
ease: "back"
});
});
});

このコードは、すべての行モジュールを一度にターゲットにし、訪問者がビューポートに再び入るとすぐにアニメーションを再開します。この場合のアニメーションは非常に単純で最小限です。ただし、GSAPとScrollTriggerを使用すると、任意の種類のアニメーションを作成できるため、検討する価値があります。

アニメーションを再開する

プレビュー

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

デスクトップ

アニメーションを再開する

モバイル

アニメーションを再開する

最終的な考え

この投稿では、要素がビューポートに入るとすぐにアニメーションを再開する方法を示しました。このアプローチは、訪問者がどのようにスクロールしても、一貫したエクスペリエンスを作成するのに役立ちます。 JSONファイルも無料でダウンロードできました！ご質問やご提案がございましたら、下のコメント欄にコメントを残してください。

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

Divi＆GSAPで要素をスクロールするたびにアニメーションを再開する方法

プレビュー

デスクトップ

モバイル

レイアウトを無料でダウンロード

無料でダウンロード

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

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

プレースホルダーセクションを追加

サイジング

クローンプレースホルダーセクション

プレースホルダーセクション間に新しいセクションを追加する

行＃1を追加

カラム構造

サイジング

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

コンテンツを追加する

テキスト設定

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

H2コンテンツを追加する

H2テキスト設定

サイジング

ポジション

行＃2を追加

カラム構造

サイジング

列1の設定

背景画像

間隔

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

H4コンテンツを追加する

H4テキスト設定

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

H3コンテンツを追加する

H3テキスト設定

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

説明コンテンツを追加

テキスト設定

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

コピーを追加

ボタンの設定

列1を再利用する

列2と3を削除します

列1のクローンを2回

重複する列の背景画像を変更する

重複する列のコンテンツを変更する

列2の設定に変換変換を追加

2.リスタートアニメーションテクニックをデザインに適用します

行＃2にCSSクラスを追加します

行＃1にコードモジュールを追加

GSAPとScrollTriggerライブラリを追加する

新しいスクリプトタグを追加する

GSAP + ScrollTrigger関数を追加します

プレビュー

デスクトップ

モバイル

最終的な考え

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