MENU

便利なプラグイン

ここでは、今すぐダウンロードできるアニメーションプラグインのベスト10をご紹介します:

目次

1.LottieFiles – Lottie block for Gutenberg

https://youtube.com/watch?v=z48jdXjwVo4%3Frel%3D0

宣伝するわけではありませんが、LottieFiles for WordPressプラグインは、あなたのサイトにモーションデザイン要素を追加する最も簡単な方法の1つです。
このプラグインを使えば、無料で使える何千ものLottieアニメーションを検索することができ、しかも超軽量なファイルフォーマットです。これは、ウェブサイトの読み込み時間が速くなることを意味します。そして、数クリックでWordPressにアニメーションを追加することができます。Hover, Click, scroll などのカスタムイベントを設定して、再生を簡単にトリガーすることができます。独自のCSSでLottieのルック&フィールをカスタマイズすることも可能です。詳細については、WordPressでLottieアニメーションを追加・カスタマイズするためのガイドを参照してください。

アニメーションの種類:アニメーションアイコン、イラスト、ローディングアニメーションなど、あらゆるユースケースや業種に対応した数千種類の無料アニメーションを用意しています。

使用例:軽いアニメーションやクリック、ホバー、スクロールに反応するアニメーションを追加する必要がある場合。背景としてアニメーションを追加する場合にも使用可能です。

価格:無料

2. SVG Support

画像

SVG(Scalable Vector Graphics)アニメーションは、WordPressでは難しい場合がありますが、SVG Supportプラグインは、それを解消することを目的としています。SVGファイルをメディアライブラリに画像としてアップロードし、CSSとJavaScriptでスタイルやアニメーションを設定することができます。

SVGやLottieアニメーションを使うタイミングに迷ったら、こちらのファイルタイプに関するガイドを参照してください。

アニメーションの種類:アップロードして使用したいSVGアニメーションがある場合。

使用例: SVGファイルを埋め込むための簡単な方法が必要な場合。

価格:無料

3. Slides Hero

Slider Heroプラグインは、あなたのサイトを“映画のような“仕上がりにして、テキストや静的ページに全く新しい側面を付加することが可能な80以上の背景アニメーション・エフェクトとオーディオを提供します。

アニメーションの種類: スライダー、テキストカルーセル、ビデオ背景、テキストアニメーション。

使用例: ウェブサイトのヘッダーや、魅力的なバナー広告をアニメーションで作成したい場合。

価格:無料版と、29ドル、59ドル、79ドルの3つのアップグレードがあります。

4. Superfly

画像

Superflyは簡単にアニメーションのナビゲーションメニューを作成することができ、しかもさまざまなスタイルのものを提供します。従来、アニメーションメニューの作成にはCSSやJavaScriptの知識が必要でしたが、このプラグインを利用することで、時間と労力を大幅に節約することができます。

アニメーションの種類: フルスクリーン、ミニマリスト、常時表示など、さまざまなスタイルのナビゲーションメニューをアニメーションで表示します。

使用例: 静的なメニューをアニメーションで置き換えたり、補完したりしたい場合。

価格:29ドル

5. Transition Slider

画像

あなたのサイトには画像や動画のスライドがありますか? Transition Sliderプラグインは、これらのスライダー用にカスタマイズ可能なトランジションエフェクトを備えた47種類のテンプレートを提供しています。スライダーは、画像や動画の出来に左右されるものですが、これらのエフェクトを使えば、これまでのスライダーに魅力的な新たな一面をプラスすることができます。

アニメーションの種類: エフェクトには、ワープ、ズーム、フェード、ストレッチ、クロスフェード、ブラーなどがあります。

使用例:画像や動画のスライダーにアニメーションのトランジションを追加したい場合。

価格:無料版とアップグレード版(35ドル)

6. Animate It!

画像

Animate It!プラグインは、サイトのページ、投稿、ウィジェットに50以上のCSSアニメーションを利用することができます。

アニメーションの種類: 静的な要素に動的な動きを付加するための、小さくて鮮明なアニメーション。

使用例: アイコンやテキストなど、静的な要素に動きも加えたい場合。

価格 :無料

7. Image Hover Effects Ultimate

画像

Image Hover Effects Ultimateプラグインを使用すると、ユーザーがサイト上の画像にカーソルを合わせたときに、魅力的なアニメーションを組み込むことができます。

アニメーションの種類: ボックスの反転、スパイラルイン/アウト、キャプションの表示、スライド式の画像比較など、それぞれのバリエーションに応じた8種類のHover Effectが含まれています。

使用例: ポートフォリオやギャラリーの画像を際立たせたい場合に最適なプラグイン。

価格:19.99ドル、49.99ドル、199.99ドル

8. Blocks Animation: CSS For Gutenberg Blocks

画像

ご存知のように、Gutenberg blocksはWordPressのコンテンツレイアウトを作成するために使用さています。Blocks Animationプラグインを使用すると、サイト上のそれらのブロックのいずれかにCSSアニメーションを追加することができます。しかし、このプラグインには数クリックで追加できるさまざまなオプションが用意されているため、ゼロからCSSを書く必要はありません。

アニメーションの種類: bounce, wobble, flash, fade in, rubber bandなど、さまざまなアニメーションスタイルから選択可能。

使用例: Gutenbergのブロックにシンプルなアニメーションを追加したい場合。

価格: 無料

9. Advanced Typing

このAdvanced Typingプラグインができることは1つで、とてもよくできています。アニメーションの中でミスやバックスペースをすることで「人間味」を出すこともできますし、好きなフォント、好きなサイズを使うことができます。

使用例: 非常に特殊なこのアニメーションは、あなたのWebサイトのヒーローセクションにあるキャッチフレーズに最適。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

コメント

コメントする

目次