JavaScript

2019.08.29

【jquery】簡単に実装できるスクリプト4選

jqueryを使うと、WEBサイトにアニメーション等動きのあるデザインを実装できたり、要素の動的変更やHTMLを操作できたりととても便利です。
今回は、よく使うjqueryスクリプトをいくつかご紹介いたします。
jQuery本体の読み込みも忘れずに!

httpで始まるリンクを別窓で開く

httpで始まるリンクが全て別窓で開くようになります。
リンク1つ1つにtarget=”_blank”を記述しなくてもよくなるので便利です。

<!--httpで始まるリンクを別窓で開く-->
$(function(){
   $('a[href^=http]').attr("target", "_blank");
});

特定のclass名を付けて囲んだ要素を〇秒かけて〇秒後にフェードアウトさせる

フェードアウトすると、要素があった場所は無くなります。(display:none)
ロゴなどのアニメーション表示後にサイトを表示させたい時にも使えます。

<!--class="movement"で囲んだ要素を2秒かけて8秒後にフェードアウトさせる-->
$(function(){
setTimeout(function() {
    $('.movement').fadeOut(2000);
}, 8000);	
	});

アコーディオンメニューの実装

最近のWebサイトは、クリックすると隠れていたメニューやコンテンツが表示される機能が実装されていることが多いです。

HTML

<!--アコーディオンメニューの実装-->
<dl class="menu">
 	<dt>ここをクリックするとコンテンツが開く</dt>
</dl>
 
<dl class="menu">
 	<dd>出てくるコンテンツ01</dd>
</dl>
 
<dl class="menu">
 	<dd>出てくるコンテンツ02</dd>
</dl>

jquery

<!--アコーディオンメニューの実装-->
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;
  });
});

ぜひご活用ください。

0

関連記事

  • 2021.07.20

    画面遷移時にページ全体をフェードさせる方法

    CSS

    JavaScript

  • 2021.05.24

    【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

    JavaScript

  • 2021.04.06

    【jQuery】全画面表示のナビゲーションメニューを実装する

    JavaScript

おすすめ記事

  • 2021.06.08

    CSSだけでできる!マーカーで線が引かれているようなデザインの作り方

    CSS

    WordPress

  • 2021.05.11

    【おすすめ書籍】この本でゼロからWebサイト制作を学びました

    CSS

    HTML5

  • 2021.05.24

    【おすすめ書籍】動くデザインを作る時にまず読んでほしい本

    JavaScript

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!