LoginSignup
3
8

More than 3 years have passed since last update.

@sho11hei12-1998

[jQuery]コピペで簡単！ホームページによく使うアニメーション集

Posted at

jQueryって何？

jQueryはJavaScriptで書かれたライブラリ（使用頻度の高い機能を持つプログラムをまとめたもの）です。
もちろんjQueryを利用せず、JavaScriptだけでプログラムを書くことも可能です。しかし、短いコードで簡単に機能を実装できるため、JavaScriptで何十行もコードを書かなければならないときも、jQueryを使えば数行で済むことがあります。

jQueryを読み込む方法

jQueryを使用する際には、まずダウンロードする必要があります。
[Download the compressed, production jQuery 3.4.1]をダウンロードすることをお勧めします。
以下のURLからダウンロードが可能です。
https://jquery.com/download/

HTMLファイルでjQueryを読み込む際には、ダウンロードしたjQueryを任意の場所(ここではjsディレクトリ)に保存して、そこから<head>内に読み込みます。

sample.html
<head>
<script src="/js/jquery-1.12.4.min.js"></script>
</head>

アニメーション一覧

以下にホームページ制作でよく使われるアニメーションの実装例を紹介します。
すべてシンプルな仕様であるのでぜひ実装して確かめてみてください。

１．ハンバーガーメニュー

実装結果
ドロワーナビはウインドウ上端に隠れていて、ボタンを押すと上端から出てくる仕様になっています。×ボタンを押すことでドロワーナビは閉じます。
以下にハンバーガーメニューの実装例を示します。

[ボタン押下前]
exe.png
[ボタン押下後]
exe_2.png

実装項目
・コンテンツとナビゲーションを用意
・ドロワーナビの表示設定
・jQueryで開閉を制御する

・コンテンツとナビゲーションを用意

最初に、コンテンツとナビゲーションを用意します。HTMLファイルにハンバーガーメニューを記述し、ドロワーナビが開いたときに表示されるリストを作成する。

sample.html
<!-- ハンバーガーメニュー -->
<div>
    <div class="navToggle text-white d-flex">
    <span></span><span></span><span></span><br>
    <a class="mt-4 pt-2">MENU</a>
</div>

<!-- ドロワーナビ -->
<nav class="globalMenuSp">
　　<!-- 以下にリンク先を記述する -->
    <ul>
        <li><a href="index.html">ホーム</a></li>
        <li><a href="food_menu.html">お品書き</a></li>
        <li><a href="drink_menu.html">お飲み物</a></li>
        <li><a href="party.html">ご宴会</a></li>
        <li><a href="positional_information.html">店舗情報</a></li>
    </ul>
</nav>
</div>

・ドロワーナビの表示設定

ハンバーガーボタンの位置や色についての設定を行います。
また、ハンバーガーボタンは、CSSによりXボタンに変化するようになっています。横並びになっている3本の線のうち、一番上の線と一番下の線が45度傾き、真ん中の線が消えることでXボタンになるように設定してあります。

sample.css
nav.globalMenuSp {
    position: fixed;
    z-index: 2;
    top: 0;
    left: 0;
    background: #fff;
    color: #000;
    text-align: center;
    transform: translateY(-100%);
    transition: all 0.6s;
    width: 100%;
}

nav.globalMenuSp ul {
    background: #ccc;
    margin: 0 auto;
    padding: 0;
    width: 100%;
}

nav.globalMenuSp ul li {
    font-size: 1.1em;
    list-style-type: none;
    padding: 0;
    width: 100%;
    border-bottom: 1px dotted #333;
}

/* 最後はラインを描かない */
nav.globalMenuSp ul li:last-child {
    padding-bottom: 0;
    border-bottom: none;
}

nav.globalMenuSp ul li a {
    display: block;
    color: #000;
    padding: 1em 0;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
    transform: translateY(0%);
}

.navToggle {
    display: block;
    position: fixed;    /* bodyに対しての絶対位置指定 */
    right: 20px;
    top: 20px;
    width: 42px;
    height: 51px;
    cursor: pointer;
    z-index: 3;
    text-align: center;
}

.navToggle span {
    display: block;
    position: absolute;    /* .navToggleに対して */
    width: 30px;
    border-bottom: solid 3px #fff;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    left: 6px;
}

.navToggle span:nth-child(1) {
    top: 9px;
}

.navToggle span:nth-child(2) {
    top: 18px;
}

.navToggle span:nth-child(3) {
    top: 27px;
}


/* 最初のspanをマイナス45度に */
.navToggle.active span:nth-child(1) {
    top: 18px;
    left: 6px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
}

/* 2番目と3番目のspanを45度に */
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) {
    top: 18px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
}

・jQueryで開閉を制御する

最後にjQueryで開閉を制御します

sample.js
$(function() {
    $('.navToggle').click(function() {
        $(this).toggleClass('active');

        if ($(this).hasClass('active')) {
            $('.globalMenuSp').addClass('active');
        } else {
            $('.globalMenuSp').removeClass('active');
        }
    });
});

２．スライドショー

実装結果
一定間隔でスライドを繰り返すだけのシンプルなスライドショーが実装されます。
実装例としてスライドショーを用いているホームページを紹介します。
以下のURLから参照できるホームページ上部に配置されているものです。

参考：新大宮の焼き鳥は居酒屋「熟成鶏 とことこ」
(http://www.tokotoko-nara.com/)

実装項目
・初期表示imgに表示用クラス「showSlide」を付与
・スライドショーの見た目を整える
・スライド切替に関するスクリプトを書く

・初期表示imgに表示用クラス「showSlide」を付与

初期表示imgに表示用クラス「showSlide」を付与します。
本例では、画像を3枚使用する場合で考えています。

sample.html
<ul id="slideshow" class="slideshow">
  <li class="showSlide"><img src="https://myscreate.com/wp-content/uploads/2018/09/slide1.jpg"></li>
  <li><img src="https://myscreate.com/wp-content/uploads/2018/09/slide2.jpg"></li>
  <li><img src="https://myscreate.com/wp-content/uploads/2018/09/slide3.jpg"></li>
</ul>

・スライドショーの見た目を整える

スライドショーの配置場所や、大きさなどを設定します。

sample.css
.slideshow {
width: 50%; /* スライドショー幅（PC）*/
list-style-type: none;
position: relative;
}

.slideshow > li {
opacity: 0;
position: absolute;
transition: opacity 3s ease-in-out; /*フェード時間・イージング*/
}

.slideshow > li.showSlide{
opacity: 1;
}

.slideshow > li > img {
width : 100%;
height: auto;
}

/* スマートフォン用メディアクエリ */
@media screen and (max-width:600px){
.slideshow{
width: 100%; /* スライドショー幅（SP）*/
}
}

・スライド切替に関するスクリプトを書く

用意した画像がうまく切り替わるようにスクリプトを書きます。
また、数字を変えることで画像切り替えのタイミングを設定できます。

sample.js
$(function(){
  var imgs = $("#slideshow > li");
  var imgLen = imgs.length;
  var count = 0;
  function changeImg(){
    //スライド切替のポイント（配列を順番に処理し終わったら配列の先頭に戻る計算式）
    count = (count + 1) % imgLen; 
    imgs.removeClass("showSlide").eq(count).addClass("showSlide");
  }
  setInterval(changeImg, 5000); //切替の間隔（ミリ秒）
})

参考：コピペで簡単！超シンプルスライドショー［HTML / CSS / jQuery］
(https://myscreate.com/pure-slide/)

３．スクロール幅によりヌルっと出てくる「トップに戻る」ボタン

実装結果
スクロール幅に合わせてこのようなボタンがサイトの右下にヌルっと現れます。
pagetop.PNG

実装項目
・ボタンをマークアップ
・ボタンの見た目を整える
・スクロールとクリックに関するスクリプトを書く

・ボタン部分をマークアップ

ボタンをフッター近くに配置します。
文字の代わりに画像を使っても大丈夫です。

sample.html
<p id="page-top"><a href="#">PAGE TOP</a></p>

・ボタンの見た目を整える

ボタンは灰色にしていますが、ここにイラストやアイコンを配置して個性を出すのもアリですね。

sample.css
/*ボタンを固定する位置を決める*/
#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 80%;
}

/*ボタンの色やサイズを設定する*/
#page-top a {
    display: block;
    background: #666;
    color: #fff;
    width: 100px;
    padding: 25px 0;
    text-align: center;
    text-decoration: none;
    border-radius: 10px;
}

/*マウスオーバーした際に色を変化させる*/
#page-top a:hover {
    background: #999;
    text-decoration: none;
}

・スクロールとクリックに関するスクリプト

jQueryで書いていきましょう。(※jQueryを忘れずに埋め込んでおいてください。)
まずボタンをマークアップしておいたidの#page-topを指定しておきます。
次にスクロールの処理ですが、最初にボタンは隠しておくので、topBtn.hide(); を先に書いておき、スクロールが500pxに達したらボタンを表示するような記述をします。
数字は変更可能で、表示させたい位置に指定できます。

sample.js
$(function () {
    var topBtn = $('#page-top');
    topBtn.hide();
    //スクロールが500に達したらボタンを表示
    $(window).scroll(function () {
        if ($(this).scrollTop() > 500) {
            topBtn.fadeIn();
        } else {
            topBtn.fadeOut();
        }
    });
    //スルスルっとスクロールでトップへもどる
    topBtn.click(function () {
        $('body,html').animate({
            scrollTop: 0
        }, 500);
        return false;
    });
});

クリックした時の処理をスクロールの処理の下に書いていきます。アニメーションでスルスルっとトップに戻る処理です。数字は戻る速さですので、お好みで変えることが可能です。

参考：[jQuery]スルスルっとトップへ戻るボタンを設置しよう
(http://pilgrim-guild.com/scroll-top_button/)

4．マウスオーバーで画像を切り替える

実装結果
画像にマウスを乗せたら違う画像に切り替わる。
（ボタンなどによく使用される。）

実装項目
・画像ファイルの作成
・サイトに画像を配置する
・jQueryで画像を切り替える

・画像ファイルの作成

まず、通常時に表示される画像（元画像）とマウスオーバー時に表示される画像（切替後の画像）の2種類を用意します。
※以下の説明では、ファイル名の末尾に元画像は_off、切替後の画像には_onを付けています。

元画像：images/hover_off.png
切り替え画像：images/hover_on.png

・サイトに画像を配置する

HTMLファイルに元画像のパスを指定します。

sample.html
<!--画像パスを指定-->
<img src="images/hover_off.png" alt="クリック！">

・jQueryで画像を切り替える

マウスを画像に乗せた場合とマウスを離した場合の2パターンの命令を記述します。

sample.js
$(function() {

  //画像にマウスを乗せたら発動
  $('img').hover(function() {

    //画像のsrc属性が別画像のパスに切り替わる
    $(this).attr('src', 'images/hover_on.png');

  //ここにはマウスを離したときの動作を記述
  }, function() {

    //画像のsrc属性を元の画像のパスに戻す
    $(this).attr('src', 'images/hover_off.png');

  });
});

参考：jQueryのhover()でマウスオーバーの処理
(https://www.flatflag.nir87.com/hover-1691)

おわりに

今回の記事は、webサイト作成のための備忘録です。他にもwebサイト作成に関わる知識があれば教えてもらえると嬉しいです！

3
8
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
3
8