JavaScript/jQuery/CSSを用いて動く本屋をデザインする

私は、プログラミング言語について以下のように考えています。

• 言語についてすべてを知っている必要はない
• 基礎的な技術を少し知っていればいい。ただし、質の高い技術を知っている必要はある
• その技術の用途は何であるかを知っておく

こちらはLearning Curveという本屋サイトのヘッダー用に思いついたアニメーションです。CSS grid、flex、JavaScript、jQueryを使って、5時間かけて私がこのアニメーションを作りました。クリエイティブで面白いと思いませんか？

簡単な技術の積み重ねで、ある意味このようなドラマティックな動きを生み出すことができるのです。

ではこのデザインを分解していきましょう。

▲本の画像をimg {visibility: hidden}で非表示にし、全ての要素に*{border: 1px solid gray;}でボーダーを追加した、先ほどのアニメーションと同様のもの

私はGoogleの画像検索で、この自転車のクリップアート（無料）を見つけました。それを2つに分けて、透過処理。また後輪を分離し、自転車フレームのz-indexより小さなz-indexの値を指定し、フレームの後ろで動くようにしました。

キーとなるデザインの要素は以下です：

• 本の入れ物を下に揃えて並べるために、flexを使用
• 自転車の動的部分はjQueryのanimateファンクションで動作: $(“#bike-back”).animate( { width: bike_position_x } );
• 車輪は$(“#wheel”).css( { transform: “rotate(“ + wheel_degree+ ”deg)” } );で回転

これらたった3つのアイディアを使うだけで、さまざまな効果を作り出せます。Webデザインのアニメーションのほとんどは、オブジェクトを2面の中で動かすか、回転させるかのどちらかです。2Dビデオゲームみたいなものですね。

アニメーションのソースコード

HTMLとCSSのコードを載せると、このチュートリアルが読みづらくなってしまうので、JavaScriptのアニメーションの部分だけ掲載します。

    /* Starting parameters, wheel angle, etc. */
    let angle = 100;            // starting wheel rotation angle 
    let bx = 600 + 0;           // starting wheel position 
    let wx = 600 + 50;          // starting bike frame position 
    let T = null;               // animation timer object
    /* All resources loaded, now what? */
    window.onload = () => {
        /* Animate the bike & the wheel */
        T = setInterval(() => {
            $("#wheel").css({
                transform: 'rotate(' + angle + 'deg)',
                left: wx + 'px'}, 0);
            /* Move the bike frame */
            $("#bicycle-end").css({left: bx + 'px'}, 0);
            /* progress counters */
            angle--; // rotate the wheel by -1 degree
            bx--;    // move the bike by -1px
            wx--;    // move the wheel by -1px
             /* bike reached the end, of animation, reset counter */
             if (bx <= 249) {
                clearInterval(T);
                T = null;
            }
        }, 5); // animation delay in milliseconds
    }

シンプルで、CSSプロパティも散らかってません。

同じ動きを、CSSアニメーションで作ることもできます。どちらでも構いませんが、私はJavaScriptで作成する方が好きです。そのほうがアニメーションをコントロールしやすく、ソースコードをmoz-やwebkit-といった拡張語で散らかさなくて済むからです。

今回はCSSとHTMLのコードを載せませんでしたが、この画像の元サイトであるLearning Curveから直接見つけることもできます。

アニメーションの応用

一度アニメーションを完成させたら、別の画像を使って見た目を変更するのは簡単です。これは、あなたの仕事の価値を簡単に増やせる方法です。

上記は自転車の画像を自動車の画像に変更したものです。

後輪の大きさと位置以外、コードの大きな変更はありません。このように、一度コードを書いてしまえば、微調整は容易なのです。

アニメーションの続き

私は、翌日も本屋サイトを作り続けました。本の製品ページを作る必要があると長い間感じていたのですが、ずっと先延ばしにしていたのです……。

けれども、ようやくやろうと思い立って数時間仕事をしたのちに、このデザインアイディアを思いつきました。私はこのページをとても気に入っています。なぜなら、きれいでシンプルだからです

本の製品ページのレイアウトは、大枠にgridを、中のプレビューリストにflexを使用して制作しました。主要な骨組みにはgridを使い、中のセルやコンテンツにはflexを使うのが良いでしょう。

イメージをホバーした時にズームするjQueryの効果は、それぞれのフレックスのitem > img:に適用されてます。

/* on mouse over */
$(".more-content div img").on("mouseover", function() {
    $(this).stop().animate( { top : "-18px", left: "-18px", width: "120%" }, 300, "swing" );
});
/* on mouse out */
$(".more-content div img").on("mouseout", function() {
    $(this).stop().animate( { top : "0px", left: "0px", width: "100%" }, 300, "swing" );

いったいどれだけ多くのプロジェクトで、私はこのテクニックを使っているかわかりません！要素を動かすことは楽しく、jQueryはそれを間違いなく簡単にしてくれます（そしてクロスブラウザーも）。

とてもインタラクティブで楽しいです。動きのないデザインより、よっぽど良いでしょう。アニメーションは魅力的なUXを創ってくれます。

まとめ

• ためらわずに、どんどんユニークなアイディアを試してみましょう。私が今回ご紹介したアイデアを見つけたのは、「私は最高のデザインを生み出すことができる」と考えていた時でした。自分はできる、という自信を持つことが必要なのです
• jQueryはまだまだ使えます。VueやReact、Angularの代替としてではなく、その用途にしたがって使えば有益です。クロスブラウザアニメーション（特に移動させることや回転させること）にはもってこいです
• 利用できるリソースを組み合わせて使いましょう（JavaScript、jQuery、CSS、クリップアートなど）

SNSをフォローしてください！

私のTwitterでは、週末に時々PDFを無料で配布しています。

JavaScriptのクイックヒットはInstagramで。

無料のソースコードなどはFacebookで。

もし私の仕事をサポートしたいと思ってくださるなら、私の本『CSS Visual Dictionary』をぜひご購入ください。

（原文：JavaScript Teacher　翻訳：Yui Shimizu）