フリーフォント

Penguins

漫勉

まんべん

フリーベクター素材

Tulips

jQuerry プラグイン 目的別まとめ

2017-09-09

【コリス】2016年総まとめ、JavaScriptのライブラリやjQueryのプラグイン100+α選

テキストを動かす

jQueryのノーマル状態では、イージング処理は「linear」と「swing」の2つが用意されているが、プラグインを使うことによってアニメーションに多種多様なイージング処理をつけることができるようになる。

easing

  • jQueryアニメーションにイージング(easing)処理をつけるプラグイン【イージング動作サンプル一覧】

Morphext

  • テキストをさまざまなアニメーションでモフモフ、モーフィングします。

ギャラリー

グリッドレイアウト

グリッドレイアウトでのWebサイト構築に役立つjQueryプラグイン「BlocksIt.js」「Isotope」「jQuery Masonry」

Masonry(ウィンドウサイズに合わせてレイアウトがアニメーションしながら可変する)

ポップアップ

スライダー・カルーセル

Swiper

speed アニメーション速度(ミリ秒)
autoplay 自動的に切り替わるまでの待ち時間。
指定しない場合自動的にスライドが切り替わらなくなる
mode horizontal または vertical。
verticalにすると縦スライドになります
loop true または false
true にすると端まで行ったらはじめに戻ります
paginationClickable true または false
true にすると、ページネーションマーカーをクリックして
スライドを切り替えられるようになります。
calculateHeight true または false
true にすると、自動的に高さを計算してくれます。
touchRatio スワイプ操作などでどの程度スライドをひっぱったら
スライドするかのしきい値。数が大きくなるほどすぐ反応
するようになります。個人的には 0.6くらいが好き
grabCursor true または false
true にすると、スライドにマウスを当てるとカーソルが
グラブになって要素を掴んでスライドできることを明示する
ことができます。

Flickity

FlexSlider2

カーテン

metafizzy

jQueryでスクロールするとヘッダーを固定させる 

デモはこちら

仕組みは、<header>の高さ分(デモでは80px)スクロールすると<nav>にfixedクラスが追加されることで固定されます。

【LIG】 Fixed固定ナビゲーションを設置するときに気をつけたい4つのこと

jQueryで簡単にヘッダー上部固定でページ内リンクがずれるのを防ぐ!

 

勉強

【Yukihy Life】短期間である程度までjQueryができるようになる独学Webデザイン勉強法を書いてみる

Follow me!