Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
219
Help us understand the problem. What are the problem?
@rana_kualu

あなたのプロジェクトを煌やかにするアニメーションライブラリ18選

Original article: https://dev.to/kerthin/18-amazing-github-repositories-that-will-help-you-make-a-beautiful-project-3pgo

以下はRoden( Twitter / GitHub / Webサイト )によるアニメーションライブラリ紹介記事、18 amazing 🤩 GitHub repositories that will help you 🪄 make a Beautiful Projectの日本語訳です。
help youの後の文字はPC版Chromeだと見えなかった。スマホ版では見れる。

元記事はリポジトリへのリンクだけというのも幾つかあるので、適当に解説を加えています。

18 amazing 🤩 GitHub repositories that will help you 🪄 make a Beautiful Project

Introduction

複雑なアニメーションや便利な機能をあなたのプロジェクトに導入するために、今役に立つ優れたGitHubリポジトリを紹介します。

それではさっそく始めていきましょう。

1. Lottie-Web/Bodymovin

最初は私お気に入りのリポジトリです。
このライブラリを使うと、Adobe After Effectsで作成したアニメーションをそのままWebサイトに出力することができます。

01-0.gif
01-1.gif
01-2.gif

2. Parallax.js

マウスで操作できる美しい視覚効果を演出することができます。
さらにオブジェクトの移動速度を調整することもできます。

02.gif

3. Flat Surface Shader [FSS]

ランバート反射モデルを使い、光源を反映するタイル背景を生成します。
デモサイト

03.gif

4. Hover.css

ボタンなどにマウスを乗せたときに起こせるホバーエフェクトのコレクションです。
デモサイト

5. Video.js Markers

動画のプログレスバーにマーカーを表示して注目させることができます。

05.jpg

6. Magic Grid

ダイナミックなグリッドレイアウトを作成できます。
いちいち@mediaを書く必要もなく、コンテナを指定するだけで全てが終わります。

06.gif

7. Vue/React Content Loader

https://github.com/egoist/vue-content-loader
https://github.com/danilowoz/react-content-loader

Facebookカードのようなローディング画面を簡単に作成できます。

07.gif

8. React Image Gallery

イメージギャラリーやカルーセルを表示させるReactコンポーネントです。
デモサイト

9. WebSlides

Webサイトをスライド表示にできるライブラリです。
デモサイト

09.gif

10. SVG.js

JavaScriptで簡単にSVGを操作、アニメーションさせることができるライブラリです。
サンプル

11. React Motion

UIに剛性と減衰を指定するだけで勝手にアニメーションしてくれるライブラリ。
React TransitionGroupのより強力な代替にもなります。

サンプル

11-1.gif
11-2.gif
11-3.gif

12. RELLAX

簡単にパララックスを再現できる軽量ライブラリ。
デモサイト

12.gif

13. Dynamics.js

物理ベースのアニメーションを作成できるライブラリ。
デモサイト

13.gif

14. mo · js

ゼロからアニメーションを始めるための組込コンポーネントとツールを提供します。

デモサイト

See the Pen ·● MOTION for the web ●· by LegoMushroom (@sol0mka) on CodePen.

See the Pen ·•● Bubble • Layout ●•· by LegoMushroom (@sol0mka) on CodePen.

15. Reveal.js

HTMLでプレゼンテーションを作成するフレームワーク。
Markdownサポート、LaTeXサポート、シンタックスハイライト、PDFエクスポートなど幅広い機能が搭載されています。

デモサイト

15.gif

16. Animsition

ページ遷移のCSSアニメーションに特化した、シンプルなjQueryプラグイン。

デモサイト

16.gif

17. SVG Mesh 3d

SVGを三角形に分割します。

デモサイト

17.gif

18. Zdog

非常に簡単に、疑似3D要素をつくることのできるライブラリです。
また数学的知識なしに幾何学的形状をつくることができます。

デモサイト

18.gif

See the Pen Zdog - Happy town by Dave DeSandro (@desandro) on CodePen.

See the Pen Zdog - Little forest by Dave DeSandro (@desandro) on CodePen.

See the Pen Flamingo (ZDog + GSAP) by ChenXin_nth (@chenxinnn) on CodePen.

See the Pen Zdog Draggable Monument Valley Totem by Gabrielle Wee 🧧 (@gabriellewee) on CodePen.

The End

ご覧いただきありがとうございます。
あなたが使っているリポジトリもぜひ教えてください。
また、この投稿で紹介したものよりよいものも教えてください。

初級フロントエンドエンジニアは、複雑なタスクは自分で実装せずに、既存のソリューションを使った方がいいとアドバイスしておきます。
そのほうが自分やサードパーティのプロジェクトで問題が発生する可能性が低くなるでしょう。

車輪を再発明する必要はありません。

19.gif

時々作品を投稿してるから、よかったらTwitterもフォローしてね。

コメント欄

「Cool」
「こいつは素晴らしいコレクション!」
「実用的で便利なまとめありがとう。」
「もう何年も更新されていないような古いプロジェクトは紹介しないでください。」

感想

気楽に使えるアニメーションライブラリ集です。
深く使いこなさなくても、ちょっと置いておくとかでサイトの見た目が華やかになりそうですね。

個人的にはさっさとコンテンツ表示しろ派なのでどうもぴんと来なかったものも多いのですが、まあそういう奴は少数派だろうから気にする必要はないでしょう。
どんどん飾り立ててみましょう。

それにしてもZdogとかすごいね。
色々プラグインもあってなんだかんだと遊び甲斐がありそうです。

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
219
Help us understand the problem. What are the problem?