【JavaScript実践 #3】jQueryでアニメーションを実装しよう！

こんにちは！
「初心者のためのWebデザイナー講座 good-f DESIGN」を運営しているユウです！
Webデザイナーってどんな仕事内容？これからWebデザイナーに挑戦したい！という方に向けて、僕が経験したノウハウやWebの楽しさをお伝えできればと思っています！

今回は、jQueryでアニメーションを作成する方法をご紹介します。
jQueryのアニメーションは、基本を覚えてしまえばとても簡単です。
身につけてホームページをリッチに見せよう！

YouTubeにもアップしていますので、見ていただけたら嬉しいです！

jQueryとは？
jQueryアニメーションの準備
アニメーションのコードを書く
- 解説
- 要素を動かす
なめらかに動かす
最後に

jQueryとは？

前回の#2でもご説明しましたが、改めてご説明します。

jQueryとは、冒頭でも書いた通り、1番有名なJavaScriptのライブラリで、JavaScriptのコードを簡単に記述することができるものです。

ライブラリとは、htmlから読み込みをするだけで利用することができる、とても便利なものです。
しかも、jQueryは、MITライセンスというもので、無料で利用することができます。

本来、jQueryは使わずに、純粋なJavaScriptのコードで記述するのが正しいのですが、jQueryの普及により、jQueryで記述している人の方が多く感じるくらいです。

純粋なJavaScriptのコードに比べると、jQueryのコードは簡単で理解しやすいので、最初はjQueryを覚えることをおすすめします。

jQueryアニメーションの準備

それでは、jQueryアニメーションの実装方法を解説します。
まずは、htmlとcssとjsファイルの準備をします。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="utf-8">
    <meta name="keywords" content="web, デザイン, xxx">
    <meta name="description" content="xxxxxxx">
    <meta name="viewport" content="width=device-width">
    <title>xxxxxxx</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script src="js/script.js"></script>
</head>
<body>

<div class="bg">
    <p class="bg-change">背景色変更</p>
</div>

</body>
</html>

htmlは、「style.css・jquery・script.js」を読み込みます。
body内に、アニメーションさせたい要素を記述しています。

@charset "UTF-8";

.bg {
    position: relative;
    width: 300px;
    height: 300px;
    margin: 0 auto;
    background: #ccc;
}

.bg-change {
    line-height: 300px;
    text-align: center;
}

cssは、アニメーションさせたい要素の、元となるスタイルを記述します。

$(function () {

});

jsは、一旦土台のみです。
このfunctionの間に、どのようにアニメーションさせるかのコードを書いていきます。

アニメーションのコードを書く

準備したscript.jsに書いていきます。

$(function () {
    $('.bg-change').click(function () {
        $('.bg').css('background-color','#00f');
    })
});

まずは、保存してブラウザで確認します。
クリックすると背景色が変わると思います。

解説

1行目のfunctionは、htmlの読み込みが終わってから実行するためのものになります。
最後の5行目のかっこと合わせて記述して、その中にコードを書きます。

2行目はclickしたら実行するもので、4行目のかっこと合わせて記述します。
clickしたらこの中に書いたコードが実行されます。

3行目が実際にアニメーションさせているコードです。
「bg」classの「background-color」を変更しています。

このコードを日本語にしてみると、

htmlの読み込みが終わって、
「bg-change」をクリックしたら、
「bg」の背景色を青色にする

です。

日本語にすると分かりやすいですね。

要素を動かす

3行目だけ変えれば、色々なアニメーションができます。

$(function () {
    $('.bg-change').click(function () {
        $('.bg').css('left','10%');
    })
});

のように書けば、要素が右に移動します。

なめらかに動かす

上記の例だと、パッと切り替わるので、アニメーションとは言えないかもしれません。
なので、なめらかに動かしたいと思います。

$(function () {
    $('.bg-change').click(function () {
        $('.bg').animate({left: '10%'});
    })
});

右にすーっと移動すると思います。

変更した箇所は、メソッドをcssからanimateに変更しました。
あとは、かっことクォーテーションの書き方が少し変わります。

アニメーションさせるコードを以下のように複数書けば、色々なアニメーションをさせることができます。

$(function () {
    $('.bg-change').click(function () {
        $('.bg').animate({
            'opacity': '0',
            'left': '30px'
        })
    })
});

最後に

以上、jQueryでアニメーションを作成する方法をご紹介しました。

jQueryのコードは、JavaScriptに比べてとても分かりやすいです。
と言っても、最初はかっこの書き方など、混乱すると思います。

検索すれば、コピペだけである程度のことは出来ちゃいますが、コピペではなく、なるべく書くようにして覚えていきましょう。

最後までお読みいただきありがとうございました！
ブログ以外にもTwitter、Facebook、YouTube、LINEもやっていますので、見ていただけたら嬉しいです！
何か気になること等あればお気軽にコメントください。