Elementorでスクロールにアニメーションを追加する方法（AppleAirPodsのように）

公開: 2022-07-21

AppleやSonyがWebサイトで使用しているように、Elementorのスクロールにアニメーションを追加する方法をお探しですか？

Elementor Proには、モーションエフェクト機能を介してあらゆる種類のきちんとしたアニメーションエフェクトが含まれていますが、AppleのWebサイト（およびその他多数）に表示されるようなスクロールエフェクトで本当に魅力的な画像シーケンスを作成することはできません。 たとえば、AirPodsProページ。

Scrollsequenceプラグインを使用すると、これらのタイプの映画のようなスクロールアニメーションをElementor（無料バージョンのElementorを含む）に簡単に追加できます。

言葉で説明するのは難しいので、以下の例を確認してください（訪問者がページを下にスクロールするとアニメーションが移動します）：

Scrollsequence全般について詳しく知りたい場合は、Scrollsequenceのレビュー全体を読むことができます。

ただし、この投稿では、Scrollsequenceを使用してElementorのスクロールにアニメーションを追加する方法に特に焦点を当てます。

掘り下げましょう！

Scrollsequenceを使用してElementorでシネマティックスクロールアニメーションを作成する方法

関連する手順の概要は次のとおりです。詳細なチュートリアルを読み続けてください。

Scrollsequenceプラグインをインストールします
アニメーションを作成する
Elementorにスクロールアニメーションを追加する

1.Scrollsequenceプラグインをインストールします

まず、ElementorWebサイトにScrollsequenceプラグインをインストールすることをお勧めします。

Scrollsequenceには、WordPress.orgに無料バージョンと、より多くの機能を追加するプレミアムバージョンがあります。無料版では、最大3つのシーンとシーンごとに最大100の画像を含む基本的なアニメーションを設定できます。一方、プレミアムバージョンでは、すべての制限がなくなり、より高度なアニメーションと機能が追加されます。

Scrollsequence –シネマティックスクロールイメージアニメーションプラグイン

著者：Scrollsequence

現在のバージョン： 1.2.7

最終更新日： 2022年5月9日

scrollsequence.1.2.7.zip

98％の評価1,000以上のインストールWP5.0以上が必要

14日間の無料トライアルですべてのプレミアム機能を無料で試すこともできるので、テストするためだけに何も支払う必要はありません。

試用後にプレミアムバージョンが必要だと判断した場合は、69.99ドルからです。ただし、排他的なScrollsequenceクーポンを使用して20％節約することができます。

20％オフ

スクロールシーケンス

WPMAYOR20クーポンでScrollsequenceの独占20％割引を手に入れましょう。スクロールアニメーションを数分で作成します。

WPMAYOR20クーポンでScrollsequenceの独占20％割引を手に入れましょう。スクロールアニメーションを数分で作成します。表示を減らす

2.アニメーションを作成します

プラグインをインストールしたら、 Scrollsequence→Add New Scrollsequenceに移動して、最初のスクロールアニメーションを設定します。

各アニメーションは1つ以上のシーンで構成され、各シーンには複数の画像が順番に配置されます。プラグインは、シーケンス内のすべての画像に基づいてアニメーションを生成します。

「シーン」は、1つの完全なアニメーションシーケンスです。複数のシーンを追加する場合、ユーザーは最初のシーンのアニメーションを完全にスクロールすると、次のシーンに進みます。

ほとんどの場合、シーケンス内の画像はベースビデオに基づいて作成する必要があります。既存のビデオを一連の個別の画像に変換するには、プラグインのドキュメントにあるこれらのツールのいずれかを使用できます。最も簡単なオプションはブラウザベースのEzgifコンバータですが、専用ソフトウェアを使用すると品質が向上します。

シーンの作成と画像の追加

高レベルのアニメーションを作成したら、[シーンの追加]ボタンをクリックして最初のシーンを追加します。

これにより、アニメーションシーケンスのすべての画像をアップロードできる新しいオプションのセットが拡張されます。開発者は、スムーズなアニメーションを確保するために、シーンごとに少なくとも50〜100枚の画像をアップロードすることをお勧めします。

画像をアップロードしたら、並べ替えオプションを使用して、画像が正しい順序になっていることを確認できます。 それらが正しい順序になっていないと、アニメーションは正しく見えません。

シーンに画像を追加して、Elementorのスクロールでアニメーションを作成します

別のシーンを作成する場合は、[シーン0 ]タブの横にあるプラスアイコンをクリックして作成できます。

固定コンテンツとアニメーションを追加する

アニメーション画像の上に表示される固定コンテンツを追加するには、コンテンツ自体に[固定コンテンツ]ボックスを使用できます。

次に、[固定コンテンツアニメーション]セクションを使用して、アニメーションルールを設定できます。これについては、Scrollsequenceレビューのステップ4で詳しく説明しますが、基本的な考え方は次のとおりです。

[固定コンテンツ]ボックスのコンテンツにCSSセレクターを追加します（[テキスト]タブを使用）。
これらのCSSセレクターをターゲットにして、それらのセレクター内でコンテンツをアニメーション化する方法のタイミングを選択することにより、[固定コンテンツアニメーション]ボックスでアニメーションルールを設定します。たとえば、画像30〜55の特定のテキストを表示すると言うことができます。

これは、CSSセレクターをコンテンツに追加する例です。

次に、アニメーションルールを設定すると次のようになります。

固定コンテンツをアニメーション化するだけでなく、画像の長さを調整することもできます。

必要に応じて他の設定を構成する

シーン、画像、固定コンテンツの設定は、アニメーションを作成する上で最も重要な部分です。

ただし、Scrollsequenceは、このインターフェイスで探索したい他の設定もいくつか提供します。

たとえば、シーン設定領域の下部で画像のスケールと配置を調整できます。

サイドバーの[スクロールシーケンス設定]領域にもいくつかの一般設定があります。このウィジェットでは、画像の幅とスクロールの遅延を制御したり、必要に応じてカスタムCSSを追加したりできます。

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

終了するには、ブログ投稿の場合と同じように、[公開]ボタンをクリックしてアニメーションを公開します。

公開したら、 Scrollsequence→Scrollsequence ：に移動して、このアニメーションのショートコードを見つけることができます。

Elementorのスクロールでアニメーションを追加するためにすぐに必要になるため、このショートコードを手元に置いてください。

3.スクロールアニメーションをElementorに追加します

スクロールアニメーションに満足したら、Elementorデザインに追加する準備が整います。

スクロールアニメーション専用の別のElementorデザインを作成できます。または、より大きなデザインの一部としてスクロールアニメーションを含めることもできます。この場合、スクロールアニメーションの上下のコンテンツは静的なままになります。

開始するには、スクロールアニメーションを追加するコンテンツのElementorエディターを起動します。

次に、スクロールアニメーションを追加する方法は次のとおりです。

スクロールアニメーションを表示する場所にElementorのショートコードウィジェットを追加します。
アニメーションのショートコードを貼り付けます（これも、 Scrollsequence→Scrollsequenceに移動すると見つかります）。
ショートコードウィジェットの設定で[適用]ボタンをクリックして、Elementorにエディターでアニメーションのライブプレビューを生成させます。

Elementorエディターを離れることなく、完全なアニメーションを体験できます。ビジュアルプレビューを下にスクロールするだけです。

これで終わりです。Appleが多くのランディングページで行っているように、Elementorで映画のようなスクロールアニメーションを設定する方法を学びました。

追加のアニメーションを作成したり、アニメーションに新しいシーンを追加したりする場合は、上記の手順を繰り返すだけです。

今日スクロールアニメーションで最初のElementorを作成する

Elementorは、デザインの作成に関して柔軟性が高いため、人々はElementorを愛しています。

ただし、Elementorだけではできないことの1つは、Appleなどから見たスクロールアニメーションのシネマティックタイプを設定することです。

ElementorをScrollsequenceとペアリングすることで、これらのタイプのアニメーションをElementorデザインに簡単に追加できます。

試してみたい場合は、次の2つのオプションがあります。

WordPress.orgで無料版のScrollsequenceを使用するだけです。
14日間の無料トライアルを使用して、Scrollsequenceのすべてのプレミアム機能にアクセスします。

Scrollsequenceのプレミアムバージョンを使用することにした場合は、専用のScrollsequenceクーポンを使用して注文を20％節約できます。

20％オフ

スクロールシーケンス

WPMAYOR20クーポンでScrollsequenceの独占20％割引を手に入れましょう。スクロールアニメーションを数分で作成します。

WPMAYOR20クーポンでScrollsequenceの独占20％割引を手に入れましょう。スクロールアニメーションを数分で作成します。表示を減らす

Elementorのスクロールにアニメーションを追加する方法についてまだ質問がありますか？ コメントセクションで私たちに一言お願いし、あなたの考えを教えてください。

Elementorでスクロールにアニメーションを追加する方法（AppleAirPodsのように）

Scrollsequenceを使用してElementorでシネマティックスクロールアニメーションを作成する方法

1.Scrollsequenceプラグインをインストールします

20iWordPressホスティング

詳細

アストラ

詳細

アストラバースデーセール

詳細

オートナミ

詳細

アバダ

詳細

納屋2

詳細

ビーバービルダー

詳細

Bluehost

詳細

Bluehostの無料ドメイン

詳細

会報

詳細

Elementor Pro

詳細

EngineThemes

詳細

エッセンシャルプラグイン

詳細

プロントオールインワン

詳細

グラウンドホッグ

詳細

グロワナイザー

詳細

人間の存在

詳細

IconicWP

詳細

IconicWP

詳細

KBucket

詳細

言語

詳細

リキッドウェブ

詳細

リキッドウェブ

詳細

Magnifiビデオウィジェット

詳細

Elementorのマスターアドオン

詳細

ニュースレターのり

詳細

通知X

詳細

OceanWP

詳細

注文可能

詳細

アウトファネル

詳細

支払いページ

詳細

PeepSo

詳細

Quicq

詳細

スクロールシーケンス

詳細

ShopReady

詳細

Spotlight PRO

詳細

ステラセール

詳細

ステラセール

詳細

トリペットプロ