jQueryは無し、シンプルに必要な機能だけを実装する軽量スクリプトのまとめ
Post on:2015年9月15日
jQueryを使い、プラグインを追加していくのも便利ですが、やりたいことが限られている時は単独のスクリプトの方が軽量で、簡単かもしれません。
jQueryは無しで、必要な機能だけを実装するシンプルで軽量のスクリプトを紹介します。
![軽量スクリプトのまとめ](http://coliss.com/wp-content/uploads-201502/2015090901.png)
画像: Unsplash
![デモのアニメーション](http://coliss.com/wp-content/uploads-201502/2015090903-01.gif)
MiniGrid -GitHub
デモページ、アニメーションのデモ
レスポンシブ対応のカード型レイアウトを実装できるシンプルで超軽量なスクリプト。アニメーションでレイアウトが変更する系はこのスクリプトが圧倒的に簡単で軽量です。アニメーション無しでも利用できます。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201501/2015042103.gif)
パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで変形します。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201501/2015042703.gif)
アンダーラインのデザインの美しさ、アニメーションの楽しさにこだわったスクリプト。
楽器の弦をはじくような気持ちいいアニメーションです。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201502/2015062807-03.gif)
Dynamics.js
Dynamics.js -GitHub
反発係数を使って弾み具合を変化させたり、運動量に応じて質量を変化させたり、引っ張ると引っ張り返され押すと押し返されるなど、物理法則に基づいた滑らかなさまざまなアニメーションを実装できます。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201502/2015090903-02.gif)
カードやモーダルなど、DOM要素で実装したパネルをくるっと回転させることができます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015090902-02.png)
タッチもフリックも非常に快適、デスクトップでのキーボードやドラッグにも対応、快適に操作できることにこだわったスライダー。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015090902-03.png)
スマホなどのタッチデバイス対応、ミニマルにデザインされた素敵なスライダー。単体でもjQueryのプラグインとしてでも動作します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015090902-04.png)
HTMLは非常にシンプルで、スマホやタブレットで快適に動作し、プログレッシブエンハンスメントを取り入れて実装されたスライダーのスクリプト。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201502/2015090903-03.gif)
レスポンシブ対応の新しい提案。
表示幅に合わせてアイテム数が変わり、溢れたアイテムはドロップダウンで表示されます。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201502/2015090903-04.gif)
非常にシンプルなマークアップで、コンテンツをアニメーションで横にスライドさせ、ナビゲーションを表示します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015090902-05.png)
スクロールすると、ヘッダの高さが狭くなり一旦消え、上部に狭い版で固定配置されます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015090902-01.png)
スクロールでコントロールするアニメーションを最適化するスクリプト。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201502/2015090902-06.png)
指定したエリア内で、パネルの高さを揃えるスクリプト。レスポンシブ対応。
![デモのアニメーション](http://coliss.com/wp-content/uploads-201502/2015090903-05.gif)
最後は、CSS3アニメーションのすご技。
カードを扇状に広げたり、配ったり、シャッフルしたり、とさまざまなカードのアニメーションを備えたスクリプト。
sponsors