[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ

最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。

かっこいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトのまとめ

画像: Girly Drop

デモのキャプチャ

jQueryTween
jQueryTween -GitHub

ページ上の要素や背景などを気持ちいいトゥイーンのアニメーションで簡単に動かすことができます。ページのスクロールにも対応しています。

デモのキャプチャ

Two.js
Two.js -GitHub
デモページ

SVG, WebGL, Canvas2Dを使い、アニメーションで軽快に動く2次元の要素をブラウザ上に描画します。

デモのキャプチャ

Background Blur
Background Blur -GitHub

Photoshopでぼかしやブラーを加えることなく、画像をぼかして表示します。ぼかしの量や不透明度、フェードインなども調整できます。

デモのアニメーション

LoadGo
LoadGo -GitHub

ロゴなどの画像を使ってローディングのアニメーションを作ることができます。画像は自分の好きなものを利用できます。

デモのアニメーション

Animate Plus -GitHub
デモ: SVG morphing animation, Circle, Star

CSSとSVGを使ったアニメーションの超軽量ライブラリ。非常に軽快で、HTMLのDOM要素もSVGも気持ちよく動きます。

デモのキャプチャ

Stackgrid
Stackgrid -GitHub

divなどで配置したパネルをグリッド状にアニメーションで配置します。ブラウザのサイズを変えたり、パネルを追加する時のアニメーションが気持ちいい動きです。

デモのアニメーション

Quttons -GitHub
デモページ

サイズやカラーや形を変えることができるデジタルの紙(クァンタムペーパー)をメタファにしたボタンを実装できます。

デモのアニメーション

Raindrop.js
Raindrop.js -GitHub

コンテンツの区切りなどの線を水面に見立てて、滴を落としたように波立たせる素敵なアニメーションを簡単に実装できます。

デモのキャプチャ

ScrollMenu
ScrollMenu -GitHub

セクションを積み重ねた縦長ページ用のスクロールメニューを表示します。垂直・水平・ヘッダ・クリエイティブなど、デザインも豊富。

デモのキャプチャ

ReadRemaing
ReadRemaing -GitHub

ユーザーのスクロールのスピードに応じて、そのページがあとどのくらいで読み終わるかアニメーションで表示します。

デモのキャプチャ

TouchSwipe Carousel -GitHub
デモページ

スマホやタブレットのタッチ・スワイプ操作に対応したカルーセル、デスクトップのドラッグ操作にも対応しています。

デモのキャプチャ

Hero Slider
Hero Slider -GitHub

上記のヒーローヘッダ版で、こちらはスライダーがタッチ・スワイプ・ドラッグで快適に切り換え表示ができます。

デモのキャプチャ

Super Simple Slider
Super Simple Slider -GitHub

シンプルなコードで実装するシンプルなデザインのスライダー。デモがシュールですw

デモのキャプチャ

animatedModal.js
animatedModal.js -GitHub

ズームやスライドやバウンドなどの気持ちいいアニメーションを使ってモーダルウインドウを表示します。

デモのキャプチャ

Turbotabs
Turbotabs -GitHub

レスポンシブ対応のタブをシンプルなコードで実装します。カスタマイズ性もばっちりです。

デモのキャプチャ

Smoke
Smoke -GitHub

Bootstrap3にフォームのバリデーションや通知パネルなど、さまざまな便利な機能を簡単に追加できます。

top of page

©2017 coliss