jQueyをWEB制作で利用する機会で役に立つテクニックを身に付けましょう。
実際の制作時にはプラグインを利用するケースが非常に多いです。
jQueryプラグインはそれぞれ制作者が提供しており、一貫した使い方があるわけではないので注意です。
WEBデザインでプラグインを使うケースを紹介します。
jQueryプラグインでよくやること一覧です。
- スライドショー
- スマホメニュー
- TOPに戻る
- ライトボックス(画像を大きく表示する)
- パララックス
- フォームバリデーション
大抵がこんな用途です。
スライドショー
サイトトップでよくみる画像がスライドするものです。
https://flickity.metafizzy.co/
スマホメニュー
スマホメニューはハンバーガーメニューをクリックすると横から出てくるものが多いです。これはプラグインで実装することが多いです。
TOPに戻る
ページ内で遷移をさせるときに、アニメーションがついていることが多いです。
こちらもプラグインを利用することがありますが、以下の記述を追加すればいいので、こちら追加することが多いですね。
スピードやアニメーションの値を変更することで、調整ができます。
$(function(){
$('a[href^="#"]').click(function(){
var speed = 500;
var href= $(this).attr("href");
var target = $(href == "#" || href == "" ? 'html' : href);
var position = target.offset().top;
$("html, body").animate({scrollTop:position}, speed, "swing");
return false;
});
});
ライトボックス
ギャラリーページでよくあるものです。
いちから作成するのはたいへんですが、プラグインを使うと簡単に実装することができます。
パララックス
豪華な演出をすることができます。こちらもプラグインを使います。
決まった動きしかできないことが多いのでその場合はある程度自作するケースも多いと思います。
多くのプラグインを紹介しているサイトです。
フォームバリデーション
EFOと呼ばれるものです。エラーが多いとお問い合わせ完了率が下がっていしまいますが、適切なエラー情報を提供することでユーザー体験を向上させることができます。
けっこう大事な機能を持ったプラグインです。