[JS]縦長ページやスマホページに便利な機能や面白い仕掛けを実装する最近のチェックしておきたいスクリプトのまとめ

縦長のランディングページ、レスポンシブなスマホ対応ページなどに便利な機能や面白い仕掛け、気持ちいいインタラクションやエフェクトなどのアニメーションを実装できるスクリプトやjQueryのプラグインを紹介します。

縦長ページやスマホページに便利な機能や仕掛け、気持ちいいアニメーションを実装する最近のスクリプトのまとめ

写真: Girly Drop

デモのキャプチャ

Popper.js
Popper.js -GitHub

ポッパーはツールチップとポップオーバーを組み合わせたスクリプトで、今までのツールチップとは一味も二味も異なります。指定したエレメントに表示させるだけでなく、スクロールするコンテナ、ドラッグで移動可能な要素、ビューポートのよる方向の制御など、縦長ページ・スマホ時代のツールチップです。

デモのキャプチャ

ajSlider
ajSlider -GitHub

ページ上部のアイキャッチ用にぴったりなスライダーのスクリプト。シンプルなHTMLで実装するだけで、表示サイズにぴったりなスライダーを配置します。

デモのキャプチャ

Multi-Layerd Parallax Illustration
デモページ

イラストを複数のレイヤーに配置して、パララックスのアニメーションで動かします。

デモのキャプチャ

Background Blur
Background Blur -GitHub

写真など普通の画像を元に、配置するだけで簡単に美しいブラー効果を得ることができるスクリプト。

デモのキャプチャ

Force.js
Force.js -GitHub

スクロールに連動してページにさまざまなアニメーションを適用できるスクリプト。単独でもjQueryとも利用でき、アニメーションは基本CSSで、非対応の場合はJavaScriptでアニメーションさせています。

デモのキャプチャ

animateClick

クリック時にさまざまなアニメーションを適用できます。

サイトのキャプチャ

okayNav -GitHub
デモページ

ハンバーガーメニューの進化形で、通常時は水平型のナビゲーションで、表示サイズが小さくなるとアイコンが表示され、ドロップダウン型のナビゲーションにアイテムが加わります。

デモのキャプチャ

jQuery.mark -GitHub
デモページ

同じ文字列、エレメント、class名など、単語をハイライトさせる検索・フィルター機能を備えたjQueryのプラグイン。日本語で試してみたところ、問題なく利用できました。

デモのキャプチャ

Detectr.js -GitHub

外部スクリプトを一つ加えるだけで、ブラウザ・OS・デバイスごとのclassが自動で利用できるようになるスクリプト。タッチ・SVG・Retina・スマホの縦向き・横向きなどの機能面でのclassも用意されています。

デモのキャプチャ

cash
cash -GitHub

モダンブラウザ向け(IE9+対応)、jQueryの代替スクリプト。
jQueryの主要なメソッドに対応しており、モダンブラウザに特化させることで、8KBと超軽量のスクリプトになっています。

top of page

©2017 coliss