2024.07.19
ChatGPTにクラス名を付けてもらってみた
- コーディング
jQueryを使うと、WEBサイトにアニメーション等動きのあるデザインを実装できたり、要素の動的変更やHTMLを操作できたりととても便利です。
今回は、よく使う&簡単に実装できるjQueryスクリプトをいくつかご紹介いたします。
jQuery本体の読み込みも忘れずに!
目次
下記の記述をすると、「http」で始まるリンクが全て別窓で開くようになります。
(「http」で入れることで、「http://〜」「https://」のどちらのリンクでも対応することができます!)
リンク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;
});
});
どれも簡単なスクリプトですが、サイトにひと工夫加えることができます!
ぜひご活用ください!
おすすめ記事はこちら
RECOMMEND
株式会社スピカデザイン
渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。
© 2020 spiqa design