Code Serendipity

Keyword: Ruby, Python, javascript, RoR, heroku, AWS...

Code Serendipity

Keyword: Ruby, Python, wordpress, javascript, AWS...

いろいろなjQueryプラグイン

f:id:serendipity4u:20170417173517p:plain よく使われるフロントライブラリを集めてみた。 あくまで「使う」ではなく、「読める」「適切な位置に置く」ための参考程度の情報。

Scrooll Magic

スクロールに呼応してアニメーションを行う、cssを書き換える用途に使う。 .addIndicators メソッドの引数(例: { name: “add a class” } )を見れば、 挙動がつかめる。

引数には

  • クラスの追加(add a class)
  • 位置固定(pinning)
  • フェードアウト(fade-out)
  • フェードイン(fade-in)
  • 拡大(expansion)

などがある。

<script>
 // 複数のアニメーションがあっても一つどこかに書いてあればOK
 var controller = new ScrollMagic.Controller();
</script>
 
<style type="text/css">
#zap {
 transition: transform 0.3s ease-out;
}
.add_zap {
 transform: scale(2.5, 0);
}
</style>
<div id="trigger-zap"></div>
<div id="zap" class="type01 box01">
 <p>add a class</p>
</div>
 
<script>
var zap = new ScrollMagic.Scene({
 triggerElement: "#trigger-zap"
 })
 .setClassToggle("#zap", "add_zap")
 .addIndicators({name: "add a class"})
 .addTo(controller);
</script>

詳しい挙動は 公式デモ(http://scrollmagic.io/examples/basic/class_toggles.html)を確認されたい。

  • 参考 :

Scrooll Magicでスクロールに反応する楽しいアニメーションを作る | ウェブソク

TweenMax

高機能アニメーションライブラリ。

.from() .to()

といったメソッドを繋げてリッチな動きを実現できる(≒タイムライン機能を持っていて、複雑なアニメーションもこなせる)。

scroll magicと組み合わせることが多い。

以下のように利用する。

TweenMax.to(<対象の要素> , <アニメーション秒数> , <アニメーション終了時プロパティ>);

TweenMax.fromTo(<対象の要素> , <アニメーション秒数> , <アニメーション開始時プロパティ>,<アニメーション終了時プロパティ>);

TweenMax.set(<対象の要素> , <プロパティ>);

アニメーション秒数はミリ秒でなく、秒数で書くことに注意。

1000ms = 1です。500ms = 0.5と書きます。ここで書いた時間だけ、アニメーションします。

たとえば #boxという四角形要素があったら、

TweenMax.to('#box', 0.5, { left: 300 });

# 「#box」を「0.5」秒かけて「left」方向に「300」px アニメーションさせる ( この left 方向、 画面で右に動いているのに注意。) 

  • 参考:

jQueryよりスムーズ。アニメーションライブラリTweenMaxの基礎とデモ – ツーブロッカ, http://woodenbell.pw/2016/11/18/%E3%80%90tweenmax%E5%85%A5%E9%96%80%E3%80%91%E5%9F%BA%E6%9C%AC%E7%9A%84%E3%81%AA%E4%BD%BF%E3%81%84%E6%96%B9/

Magnific Popup

f:id:serendipity4u:20170312151142p:plain

こういうモーダルウィンドウを作れるプラグイン

Magnific Popupは、インライン、ギャラリー、Youtube、GoogleMap、フォーム、Ajax、アニメーション、など様々なタイプのポップアップを簡単に実装することができる。 (以下のように、youtube動画をモーダルウィンドウで表示できる。)

f:id:serendipity4u:20170312151401p:plain

$(function(){
      $('.popup-image').magnificPopup({
      type: 'image'
  });
});

  • 参考:

Magnific Popup で色んなモーダルウィンドウを作ってみる|Gimmick log

Masonry

f:id:serendipity4u:20170312161633p:plain

pinterest的な、可変グリッドレイアウトを実現するライブラリ。

読み方は「メーソンリー」。

[id=“masonry"]という親要素のボックス内に配置した[class="grid"]という四角形の要素をアニメーション処理させる場合

<div id="masonry">
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
    <div class="grid"></div>
</div>


<script>
$(function(){
$('#masonry').masonry({
    itemSelector: '.grid',  # 整列対象のclass名を指定する。
    isFitWidth: true, #親要素の幅サイズがピッタリになる。trueまたはfalseを指定する。
    isAnimated: true #ウインドウサイズを変更したときにブラウザの幅に合わせて移動するアニメーションが実行される。trueまたはfalseを指定する。
});
});
</script>

これだけで.gridを適当な大きさにすれば動く。

参考: 【jQuery】可変グリッド・レイアウトの超有名プラグイン[Masonry]を紹介します。 - ONZE

ajaxでload more ボタンを作りたい時

masonry + ajaxでpinterest風タイルビューを実現する - Qiita

jquery - Masonry with AJAX; infinite scrolling not working (Rails) - Stack Overflow

jquery - masonry append with ajax - Stack Overflow