[JS]最近のWebサイトで見かける気持ちいいアニメーション、便利な仕掛けや機能を実装するスクリプトのまとめ
Post on:2015年7月23日
sponsors
最近のWebサイトで見かける気持ちいいインタラクションやエフェクト、面白い仕掛けのコンテンツや便利な機能を実装できるスクリプトやjQueryのプラグインを紹介します。
画像: Girly Drop
jQueryTween
jQueryTween -GitHub
ページ上の要素や背景などを気持ちいいトゥイーンのアニメーションで簡単に動かすことができます。ページのスクロールにも対応しています。
SVG, WebGL, Canvas2Dを使い、アニメーションで軽快に動く2次元の要素をブラウザ上に描画します。
Background Blur
Background Blur -GitHub
Photoshopでぼかしやブラーを加えることなく、画像をぼかして表示します。ぼかしの量や不透明度、フェードインなども調整できます。
ロゴなどの画像を使ってローディングのアニメーションを作ることができます。画像は自分の好きなものを利用できます。
Animate Plus -GitHub
デモ: SVG morphing animation, Circle, Star
CSSとSVGを使ったアニメーションの超軽量ライブラリ。非常に軽快で、HTMLのDOM要素もSVGも気持ちよく動きます。
divなどで配置したパネルをグリッド状にアニメーションで配置します。ブラウザのサイズを変えたり、パネルを追加する時のアニメーションが気持ちいい動きです。
サイズやカラーや形を変えることができるデジタルの紙（クァンタムペーパー）をメタファにしたボタンを実装できます。
Raindrop.js
Raindrop.js -GitHub
コンテンツの区切りなどの線を水面に見立てて、滴を落としたように波立たせる素敵なアニメーションを簡単に実装できます。
セクションを積み重ねた縦長ページ用のスクロールメニューを表示します。垂直・水平・ヘッダ・クリエイティブなど、デザインも豊富。
ReadRemaing
ReadRemaing -GitHub
ユーザーのスクロールのスピードに応じて、そのページがあとどのくらいで読み終わるかアニメーションで表示します。
TouchSwipe Carousel -GitHub
デモページ
スマホやタブレットのタッチ・スワイプ操作に対応したカルーセル、デスクトップのドラッグ操作にも対応しています。
Hero Slider
Hero Slider -GitHub
上記のヒーローヘッダ版で、こちらはスライダーがタッチ・スワイプ・ドラッグで快適に切り換え表示ができます。
Super Simple Slider
Super Simple Slider -GitHub
シンプルなコードで実装するシンプルなデザインのスライダー。デモがシュールですｗ
animatedModal.js
animatedModal.js -GitHub
ズームやスライドやバウンドなどの気持ちいいアニメーションを使ってモーダルウインドウを表示します。
レスポンシブ対応のタブをシンプルなコードで実装します。カスタマイズ性もばっちりです。
Bootstrap3にフォームのバリデーションや通知パネルなど、さまざまな便利な機能を簡単に追加できます。
sponsors
