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