WordPress Webサイトに読み込みアニメーションを追加する（10の異なるオプション）

公開: 2019-10-13

誰もが常に急いでおり、ロードに2〜3秒以上かかるWebサイトは「遅すぎる」と認識されています。ありがたいことに、そのパニックを一時的に回避し、ユーザーをサイトにロードするのに十分な時間維持する方法があります。私は完全に催眠術の読み込みアニメーションについて話している。

この投稿では、読み込みアニメーションとは何か、その目的は何か、Diviサイトを含むWordPressサイトにアニメーションを追加する方法について説明します。

読み込みアニメーションとは何ですか？

プリローダーとも呼ばれる読み込みアニメーションは、すべての要素を読み込むのに十分な長さでWebサイトに表示される目を引くアニメーションです。一部の読み込みアニメーションは短く、ユーザーの注意を非常に長く保つ必要はありません。ただし、場合によっては、サイトが非常に大きい場合、ユーザーが固執するために、読み込みアニメーションが本当に魅力的である必要があります。

十分に長い間、アニメーションの読み込みが90年代から登場していることをご存知でしょう。インターネットの時代の初めでさえ、私たちはアニメーションをロードしていました。もちろん、当時は、現在よりもはるかに長く続く可能性がありました。また、退屈したり離れたりすることなく、ユーザーにとってはるかに楽しいものにする方法を学びました。

アニメーションの読み込みに慣れる

アニメーションをロードする最も一般的なスタイルは、回転する円です。 Appleコンピュータの「死の虹の輪」と混同しないでください。回転する円の読み込みアニメーションには、千鳥状のグラデーションモーションがあります。最初の回転するプリローダーには、花から円、雪片、さらには回転する陽まで、さまざまなバージョンがありました。最近では、回転する読み込みアニメーションがより動的になり、見やすくなっています。

回転読み込みアニメーションは、待機時間が短い場合にのみ機能します。 5秒以上はもう多すぎます。そのとき、開発者はよりクリエイティブなプリローダーを使用する必要があります。楽しくて面白い読み込みアニメーションは、どれだけ時間がかかってもユーザーをサイトにとどまらせます。

アニメーションをより適切にロードするためのヒント

読み込みアニメーションに追加して、単なる動画よりも面白くすることができるものがいくつかあります。これらをさらに良く、より効果的にするためのヒントをいくつか紹介します。

パーセンテージバーを含める
ユーザーが待機する必要がある時間を表示する
ボンネットの下で何が起こっているのかを説明する（ユーモアを使うための小道具）
必ずしも同じ正確なアクションを繰り返すとは限らない面白いアニメーションを使用する

ブランド化された読み込みアニメーションの利点

独自の読み込みアニメーションを作成したり、カスタマイズオプション付きのプラグインを使用したりする機会がある場合は、プリローダーがブランド化されていることを確認してください。これは、ブランドのWebサイトの色を使用して、実際に会社のイラストを使用するのと同じくらい簡単です。読み込みアニメーションのブランド化の背後にある考え方は、それがそのサイトに属しているように見え、単なるアドオンではないということです。 Awwwards Webサイトでのこのまとめは、あなた自身の作品に刺激を与えることができます。

WordPressサイトに読み込みアニメーションを追加する方法

読み込みアニメーションの追加は、想像以上に簡単です。 WordPressサイトに追加する方法にはいくつかのオプションがあります。使いやすいプラグインからサイトへのカスタムコードの追加まで。選択肢はたくさんあるので、ここにリストして、周りを見て、どれが自分に最適かを見つけられるようにします。

プラグインを使用して読み込みアニメーションを追加する

プラグインは、読み込みアニメーションを追加するための最も簡単で簡単な方法です。これらは、コードをいじるのが苦手な場合や時間がない場合に特に役立ちます。これは、アニメーションをロードするための最も用途の広いプラグインのリストです。これらの一部は無料で、その他はプレミアムです。場合によっては、同じプラグインに、より単純な無料バージョンとより堅牢なプロバージョンがあります。

ロフトローダー

Loftloaderには無料バージョンとプロバージョンがあります。無料版では、いくつかのプロローダーを試して、サイトやブランドに合わせてカスタマイズできます。プロバージョンには、より多くのオプションとよりきめ細かいコントロールがあります。

フラットプリローダー

Flat Preloaderは、カラフルな読み込みアニメーションの限定セットを備えたシンプルな無料プラグインです。このプラグインは、プリローダーのクイックフィックスが必要で、色や画像をカスタマイズする必要がない場合に最適です。

最高のプリローダー

Best Preloaderは、あらゆるWebサイトスタイルに適合する無料のワンオプションローディングアニメーションプラグインです。いくつかのカスタマイズコントロールを備えたアニメーションが1つ付属しています。

ページローダー

ページローダーは、多くのカスタマイズとブランディングオプションを備えたプレミアムローディングアニメーションプラグインです。これは、市場で人気のあるプリローダープラグインの1つです。

WPスマートプリローダー

WP Smart Preloaderは、完全なカスタマイズオプションを備えた無料のオープンソースプラグインです。アニメーションはそれほど複雑ではありませんが、どのスタイルのWebサイトにも一致します。色や設定はとても簡単にカスタマイズできます。

プラグインなしで読み込みアニメーションを追加する

プラグインの使用を避けたい場合は、無料ですぐに使用できる読み込みアニメーションがたくさんあります。また、追加する必要のあるコードスニペットを提供するいくつかの高度なチュートリアルもあります。

マルチメディアを備えたPixelBuddha：

マルチメディアのスタッフは、PixelBuddhaからの2つの無料の読み込みアニメーションセットと、サイトでそれらを設定するために必要なコードを含む簡単なチュートリアルを公開しました。

CodePen：

UX PlanetによるこのMediumの記事では、著者はさまざまなスタイルで多くの読み込みアニメーションをまとめています。単純なものとより複雑なものがあります。それらのほとんどはCodePenから埋め込まれており、ウィジェット自体からHTMLおよびCSSスニペットを取得できます。アニメーションをロードするための完全なコードセットにこれらを挿入する必要があります。

SpinKit：

Tobias Ashlinkには、GitHubから入手できるコードを使用した読み込みアニメーションの優れたコレクションを備えたSpinKitがあります。これらは、プレロアセットアップの完全なコードセットに追加する必要もあります。

Loading.io：

Loading.ioは、さまざまなオプションを備えた読み込みアニメーションのコレクションです。 CSSプリローダー、GIFプリローダー、ボタンなどがあります。彼らのサイトを調べて、すべてのオプションとそれらをサイトに追加する方法の説明を見つけてください。

Pixelvars：

Pixelvarsは、独自の読み込みアニメーションを設定するために必要なすべてのコードを含む便利なチュートリアルを作成しました。上記のCodePenまたはGitHubアニメーションと一緒にコードを使用することもできます。このオプションは、一部の人にとってはもう少し進んでいるように見えます。コーディングの知識が豊富な開発者の場合は、これを使用してください。

非常に多くのオプションがありますが、どちらを選びますか？

WordPressWebサイトに読み込みアニメーションを追加するのは簡単です。非常に多くの異なるオプションが利用可能であるため、1つを選択するだけです。

この投稿では、読み込みアニメーションをサイトに追加するさまざまな方法を紹介しました。あなたの好きな方法はどれですか？カスタム設計され、子テーマにコードで追加されましたか？カスタマイズ可能なプラグイン？シンプルで飾り気のないオプション？コメントでお知らせください。独自の読み込みアニメーションを確認できます。

muchomoros /shutterstock.com経由の注目の画像