少しのコードでこんなにも… 便利なjQuery

「少しのコードでこんなにも… CSSの小技」の続編というか、CSSでも大体のことはできるようになってきましたが、jQueryを利用することにより、よりcoolなページが作れます。

今まではできるだけCSSだけで仕上げてきましたが、よく見かけるjQueryは備忘録にしておいて、いつでもすぐに使えたら便利ですよね。ってことで、これまで使用したjQueryをまとめてみました。

まずは準備から

jQueryの公式サイトからjqueryをダウンロードして使うのもいいけれど、CDN（Contents Delivery Network）を利用する方が便利かもしれない。実際には.minのついた圧縮版の方がいいでしょう。記述は<head>内にしておきます。

ダウンロードして使う場合はそのファイルを指定する
　　　<script type="text/javascript" src="jquery-3.1.1.min.js"></script>

CDN（Contents Delivery Network）を利用する場合（↓どちらか一つで良い）
　　　<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
　　　<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

表示されたタイミングでアニメーションを開始

スクロールエフェクトとか視差効果（パララックス）で検索すると、幾つか素晴らしいサイトを見つけることができます。ページをスクロールして指定した箇所が表示されるとイベントを開始させてくれるinview.jsというjQueryのプラグインがあります。

Github : に用意されている公式の配布サイトからプラグインのファイルを入手しましょう。入手したファイル［jquery.inview.js］または［jquery.inview.min.js］のどちらかをHTMLの適当な箇所で読み込みます。

■コード：

//css
.scroll {
　　　transform: translate(0,50px);
　　　opacity: 0;
}
.effect {
　　　transform: translate(0,0);
　　　transition: .8s;
　　　opacity: 1.0;
}

//script
$(function() {
　　　$('.scroll').on('inview', function(event, isInView, visiblePartX, visiblePartY) {
　　　　　　if(isInView){　//表示領域に入った時
　　　　　　　　　$(this).stop().addClass('effect');
　　　　　　}
　　　　　　else{　//表示領域から出た時
　　　　　　　　　$(this).stop().removeClass('effect');
　　　　　　}
　　　});
});

イベントを設定する際、コールバック関数の引数で「isInView」「visiblePartX」「visiblePartY」の３つを指定できます。

isInView: 要素が表示領域に入ったときに「true」を、表示領域から外れたときに「false」を返します。
visiblePartX: 要素の左側だけが表示域に入ってるときに「left」を、要素の右側だけが表示域に入ってるときに「right」を、要素の左右両方が表示域に入ってるとき「both」を返します。
visiblePartY: 要素の上側だけが表示域に入ってるときに「top」を、要素の下側だけが表示域に入ってるときに「bottom」を、要素の上下両方が表示域に入ってるときに「both」を返します。

コールバック*関数の説明を記しておきましたが、jsで思い通りに書くのはうまくできなかったので、cssで対応させました。'.scroll'というスタイルに対して'effect'というスタイルを当てるという感じです。

*コールバック=メソッドの中に記述して、次の処理を呼び出すための記述です。ひとつ目の処理が終ってから、次の処理を実行します。
$("セレクタ").メソッド(パラメータ, コールバック);

ページ内リンクをスムーズにスクロールさせたい

ページのトップに移動するときは、別途それだけjsで書いていましたが、ページ内を何箇所もいろいろ移動するようなサイトを作った時、この「jquery.smoothScroll」というプラグインが便利でした。（プラグイン本体のダウンロード）

デフォルトでは a 要素の href 属性にスクロール先の ID を書きますけど、何らかの理由で他の属性を使いたいときには、そういう指定も用意されています。

まずプラグイン本体を読み込ませたら、</body> の直前あたりで下記のような感じで書きます。

これでページ内リンクがスムーズスクロールになります。オプションを渡すことで、カスタマイズできるようになってます。

スクロールのスピードはミリ秒で指定、移動先のオフセットも指定できます。easing（動き方）は linear か swing でデフォルトは linear になっていました。

テスト）「まずは準備から」に移動
　　　　　「表示されたタイミングでアニメーションを開始」に移動