サイトレビュー
【勝手にWEBサイトレビュー #14】イラストが可愛らしいギリシャのデ...
2021.02.28
2019.08.29
jqueryを使うと、WEBサイトにアニメーション等動きのあるデザインを実装できたり、要素の動的変更やHTMLを操作できたりととても便利です。
今回は、よく使うjqueryスクリプトをいくつかご紹介いたします。
jQuery本体の読み込みも忘れずに!
目次
httpで始まるリンクが全て別窓で開くようになります。
リンク1つ1つにtarget=”_blank”を記述しなくてもよくなるので便利です。
<!--httpで始まるリンクを別窓で開く--> $(function(){ $('a[href^=http]').attr("target", "_blank"); });
フェードアウトすると、要素があった場所は無くなります。(display:none)
ロゴなどのアニメーション表示後にサイトを表示させたい時にも使えます。
<!--class="movement"で囲んだ要素を2秒かけて8秒後にフェードアウトさせる--> $(function(){ setTimeout(function() { $('.movement').fadeOut(2000); }, 8000); });
最近のWebサイトは、クリックすると隠れていたメニューやコンテンツが表示される機能が実装されていることが多いです。
<!--アコーディオンメニューの実装--> <dl class="menu"> <dt>ここをクリックするとコンテンツが開く</dt> </dl> <dl class="menu"> <dd>出てくるコンテンツ01</dd> </dl> <dl class="menu"> <dd>出てくるコンテンツ02</dd> </dl>
<!--アコーディオンメニューの実装--> jQuery(function(){ jQuery(".menu dd").hide(); jQuery(".menu dt").on("click", function() { jQuery(this).next().slideToggle("normal"); }); });
ページ内を移動する時、スムーズなスクロールの動きをつけたほうが「同じページの中を移動したんだな」と認識しやすいので、実装するとより見やすいページになると思います。
<!--ページ内のスムーズスクロール--> jQuery(function($){ var headerHight = 0; // a:not の部分にはスクロールさせたくないID名を記載 jQuery('a[href^="#"]' + 'a:not([href *= " "])').click(function() { // スクロールの速度 var speed = 1500; // ミリ秒 var href= jQuery(this).attr("href"); var target = jQuery(href == "#" || href == "" ? 'html' : href); var position = target.offset().top-headerHight;// ※ -headerHightでズレの処理 jQuery('body,html').animate({scrollTop:position}, speed, 'swing'); return false; }); });
ぜひご活用ください。
株式会社スピカデザイン