[JS]縦長ページやスマホページに便利な機能や面白い仕掛けを実装する最近のチェックしておきたいスクリプトのまとめ
Post on:2016年4月11日
sponsors
縦長のランディングページ、レスポンシブなスマホ対応ページなどに便利な機能や面白い仕掛け、気持ちいいインタラクションやエフェクトなどのアニメーションを実装できるスクリプトやjQueryのプラグインを紹介します。
写真: Girly Drop
ポッパーはツールチップとポップオーバーを組み合わせたスクリプトで、今までのツールチップとは一味も二味も異なります。指定したエレメントに表示させるだけでなく、スクロールするコンテナ、ドラッグで移動可能な要素、ビューポートのよる方向の制御など、縦長ページ・スマホ時代のツールチップです。
ページ上部のアイキャッチ用にぴったりなスライダーのスクリプト。シンプルなHTMLで実装するだけで、表示サイズにぴったりなスライダーを配置します。
Multi-Layerd Parallax Illustration
デモページ
イラストを複数のレイヤーに配置して、パララックスのアニメーションで動かします。
Background Blur
Background Blur -GitHub
写真など普通の画像を元に、配置するだけで簡単に美しいブラー効果を得ることができるスクリプト。
スクロールに連動してページにさまざまなアニメーションを適用できるスクリプト。単独でもjQueryとも利用でき、アニメーションは基本CSSで、非対応の場合はJavaScriptでアニメーションさせています。
クリック時にさまざまなアニメーションを適用できます。
ハンバーガーメニューの進化形で、通常時は水平型のナビゲーションで、表示サイズが小さくなるとアイコンが表示され、ドロップダウン型のナビゲーションにアイテムが加わります。
同じ文字列、エレメント、class名など、単語をハイライトさせる検索・フィルター機能を備えたjQueryのプラグイン。日本語で試してみたところ、問題なく利用できました。
外部スクリプトを一つ加えるだけで、ブラウザ・OS・デバイスごとのclassが自動で利用できるようになるスクリプト。タッチ・SVG・Retina・スマホの縦向き・横向きなどの機能面でのclassも用意されています。
モダンブラウザ向け（IE9+対応）、jQueryの代替スクリプト。
jQueryの主要なメソッドに対応しており、モダンブラウザに特化させることで、8KBと超軽量のスクリプトになっています。
sponsors
