manabuyasuda / jquery-plugins

jQueryプラグインやスクリプト

jquery-plugins

よく使うjQueryプラグインとスクリプト

smooth-scroll

インストール

• smooth-scroll
• npm install cferdinandi/smooth-scroll
• bower install https://github.com/cferdinandi/smooth-scroll.git

特徴と注意点

• data-scroll属性をつけた要素が対象になる
• ナビゲーションを固定している場合はselectorHeader属性をつける
• body要素にheightを指定すると不具合が起きる
• jQuery依存なし

参考リンク

• スムーススクロールを実装する方法(ページ内をゆっくり移動)

jquery.matchHeight.js

インストール

• jquery.matchHeight.js
• npm install jquery-match-height
• bower install matchheight

特徴と注意点

• 横並びしている要素の高さを揃える
• リサイズしたときに再計算する
• ボックスモデル、displayやvisibilityといったプロパティも計算する
• jQueryに依存する

対応ブラウザ

IE8+, Chrome, Firefox, Safari, Android, iOS

Minigrid

インストール

• henriquea/minigrid: Minimal 2kb zero dependency cascading grid layout
• npm install minigrid
• //cdnjs.cloudflare.com/ajax/libs/minigrid/2.0.0/minigrid.min.js

特徴と注意点

• 「Pinterest」のような高さが揃わないタイルUI
• 親要素と子要素のclass属性を指定する
• ミニファイした状態で2KB
• アニメーションの拡張はVelocity.jsに依存する
• CSSのtransitionプロパティでもアニメーションできる

imageSwitch.js

特徴と注意点

• 自作スクリプト
• jQueryで画像のsrc属性の値を一部変更して画像置換をする
• ウィンドウサイズに応じて動的にも切り替わる

imageProvide.js

特徴と注意点

• 自作スクリプト
• jQueryで画像のdata-image-provide属性をsrc属性に付与する
• ウィンドウサイズに応じて動的にも切り替わる

imageSet.js

特徴と注意点

• 自作スクリプト
• カスタムデータ属性にURLを指定して画像を切り替える
• ウィンドウサイズに応じて動的にも切り替わる

scrollPopup.js

特徴と注意点

• 自作スクリプト
• ある要素（デフォルトではフッター）が表示されるとポップアップが表示される
• レスポンシブ対応

scrollNav.js

特徴と注意点

• 自作スクリプト
• 下にスクロールすると要素が非表示になり、上にスクロールすると表示される
• 要素の固定と表示はCSSで指定する

imageHover.js

特徴と注意点

• 自作スクリプト
• 画像にマウスオーバーすると画像が切り替わる
• src属性の_off.に一致した場合に処理、_current.に一致した場合は処理されない

stickySidebar.js

• 自作スクリプト
• スティッキーヘッダー（任意の数値までスクロールすると要素が固定される）
• リサイズにも対応
• 要素の固定はCSSで指定する

selectLink

• スマホとPCでhref属性を切り替える
• カスタムデータ属性にURLを指定して画像を切り替える
• ウィンドウサイズに応じて動的にも切り替わる

Colorbox

特徴と注意点

• モーダル
• グループ化ができて、モーダル間を移動できる

slick

特徴と注意点

• スライダー・カルーセル
• レスポンシブ対応
• キーボードやスワイプに対応
• シンプルなマークアップ