jQueryは無し、シンプルに必要な機能だけを実装する軽量スクリプトのまとめ

jQueryを使い、プラグインを追加していくのも便利ですが、やりたいことが限られている時は単独のスクリプトの方が軽量で、簡単かもしれません。
jQueryは無しで、必要な機能だけを実装するシンプルで軽量のスクリプトを紹介します。

軽量スクリプトのまとめ

画像: Unsplash

デモのアニメーション

MiniGrid -GitHub
デモページアニメーションのデモ

レスポンシブ対応のカード型レイアウトを実装できるシンプルで超軽量なスクリプト。アニメーションでレイアウトが変更する系はこのスクリプトが圧倒的に簡単で軽量です。アニメーション無しでも利用できます。

デモのアニメーション

cta.js -GitHub
デモページ

パネルをクリックすると、それが拡大してモーダルウインドウになり、ボタンをクリックすると、それが変形してパネルになるなど、ユーザーのアクションをトリガーに要素が別の要素にアニメーションで変形します。

デモのアニメーション

underlineJS -GitHub

アンダーラインのデザインの美しさ、アニメーションの楽しさにこだわったスクリプト。
楽器の弦をはじくような気持ちいいアニメーションです。

デモのアニメーション

Dynamics.js
Dynamics.js -GitHub

反発係数を使って弾み具合を変化させたり、運動量に応じて質量を変化させたり、引っ張ると引っ張り返され押すと押し返されるなど、物理法則に基づいた滑らかなさまざまなアニメーションを実装できます。

デモのアニメーション

Flippant.js -GitHub
デモページ

カードやモーダルなど、DOM要素で実装したパネルをくるっと回転させることができます。

デモのキャプチャ

Flickity -GitHub
デモページ

タッチもフリックも非常に快適、デスクトップでのキーボードやドラッグにも対応、快適に操作できることにこだわったスライダー。

デモのキャプチャ

lory -GitHub
デモページ

スマホなどのタッチデバイス対応、ミニマルにデザインされた素敵なスライダー。単体でもjQueryのプラグインとしてでも動作します。

デモのキャプチャ

Wallop -GitHub
デモページ

HTMLは非常にシンプルで、スマホやタブレットで快適に動作し、プログレッシブエンハンスメントを取り入れて実装されたスライダーのスクリプト。

デモのアニメーション

GreedyNav -GitHub
デモページ

レスポンシブ対応の新しい提案。
表示幅に合わせてアイテム数が変わり、溢れたアイテムはドロップダウンで表示されます。

デモのアニメーション

Slideout.js -GitHub
デモページ

非常にシンプルなマークアップで、コンテンツをアニメーションで横にスライドさせ、ナビゲーションを表示します。

デモのキャプチャ

Headhesive.js -GitHub
デモページ

スクロールすると、ヘッダの高さが狭くなり一旦消え、上部に狭い版で固定配置されます。

デモのキャプチャ

Scrollissimo -GitHub
デモページ

スクロールでコントロールするアニメーションを最適化するスクリプト。

デモのキャプチャ

Right Height -GitHub
デモページ

指定したエリア内で、パネルの高さを揃えるスクリプト。レスポンシブ対応。

デモのアニメーション

Deck of Cards -GitHub
デモページ

最後は、CSS3アニメーションのすご技。
カードを扇状に広げたり、配ったり、シャッフルしたり、とさまざまなカードのアニメーションを備えたスクリプト。

top of page

©2017 coliss