どうも多浪Fランぼっち底辺大学生です。
今回はHTML・CSSコーディングにjQuery機能を加えて、ハンバーガーアニメーションを作りたいと思います。
アニメーション機能だとか何だとか、よく分からんわ。。。
と言う人に向けて、１つだけサンプルを提示しながら解説します。
- ハンバーガーアニメーションのサンプル紹介
- ハンバーガーアニメーションとの組み合わせ機能を紹介
- おすすめの参考書及び学習コンテンツ
「ハンバーガーメニューが作れるようになりたい！！」
「ほかにも、面白いアニメーション機能を作りたい！！」
と考えている人は、わたくしがおすすめする学習ツールだけでも目を通してもらえれば嬉しいです(^o^)／
HTML CSSの基本を学んだ人が対象です。
また、今回はサンプルということで、ほんの一例であります。
サンプルで示した記述より効率的なコーディングを模索してみて下さい。
Contents
ハンバーガーアニメーションとは？
ハンバーガーとは画像の左、３本線の事を指します。
この３本線のかたまりにクリックやタップなどのアクションが起こったとき、×印などの状態に遷移することを、ハンバーガーアニメーションと言います。
さらに詳しく言えば、「遷移状態中にどんな動作を施すか？」を考えて実装することですね。
クリックすればアニメーションが作動
アニメーションはスタイルシートの記述内容に従う
この2つの機能を実装することで、ハンバーガーアニメーションを作成することが出来ます(‘ω’)ノ
ハンバーガーアニメーションを実装する為の前提知識
今回紹介するハンバーガーアニメーションでは、
- jQueryのクリックイベント
- jQueryのtoggleClassメソッド
- スタイルの記述（アニメーションの詳細）
の３つの知識が必要にになります。
jQuery側では、ハンバーガーボタンがクリックされた時のイベント発生と処理を行います。
そして、CSSスタイルでアニメーションの動作を記述します。
具体的な機能について書いていきます。
jQueryのクリックイベント
まずはjQueryのクリックイベントについてです。
実装は楽チンです(^o^)／↓
|
1 2 3 |
$(要素).click(function() { 処理したい内容 }); |
たったのこれだけで、クリックイベントを発生させたい要素を(要素)に置き換える事で、クリックイベントの設定が完成です。
例えば、”abc”というクラス属性が付加されている要素にクリックイベントを設定したい場合、以下のように指定します。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div class="abc"></div> <!--jQuery--> $('.abc').click(function() { 処理 }); <!--または、変数を使って--> let $abc = $('.abc'); $abc.click(function() { 処理 }) |
（要素）の中にはcssセレクタと同様に、
クラス属性なら「.」ドットを、id属性なら「#」シャープを属性名の前に付けます。
jQueryのtoggleClass()メソッド
jQueryのtoggleClass()メソッドとは、以下の事です。
toggleClass()メソッドは「引数に指定されたクラス（文字列）が、jQueryオブジェクト内の要素のclass属性に指定されているかを確認し、指定されていない場合は追加し、既に指定されている場合は削除するメソッド」です。
※jQuery最高の教科書
より抜粋
要するに、toggleClassメソッドが呼び出されるごとに、クラス属性の追加と削除を繰り返すということですね。
具体的に確認してみましょう。
jQueryのメソッドであるtoggleClassを使用する。
→$(‘div’).toggleClass(‘.abc’);
すると、、、、
<div class=”abc ef”>・・・</div> のクラスの中身を参照する。
そして、toggleClassの引数で指定した値がクラス属性と一致した場合、クラス属性を取り除きます。
→<div class=”ef”>・・・</div>
削除された
逆にtoggleClassの引数とクラス属性が一致しない場合は、引数のクラス属性を追加します。
→<div class=”abc ef”>・・・</div>
追加された
こんな感じですね(-ω-)/
スタイルの記述（アニメーションの詳細）
最後に、アニメーションを実現するためのスタイルの記述です。
以下のサンプルを実行してみて下さい。
※今回はCSSをレベルアップさせたScssでスタイルを記述しているので、参考にしてください。
See the Pen
abpeLBK by 田所浩二 (@kojitadokoro)
on CodePen.
四角形をクリックするたびに、位置がずれていることでしょう。
仕組みとしては、四角形がクリックされるたびに、“animation__item–mgl”のクラス属性を”animation__item”の要素に、toggleClass()メソッドを用いて、追加と削除を繰り返します。
“animation__item–mgl”クラス属性は「margin-left」で余白を取っているので、この差が相違となっているのです
さらに、滑らかに移動している原因としては“transform”プロパティを記述しているからです。
“animation__item”クラス属性に
transform: all 1s;
を記述することで、”animation__item”クラス属性に変化が起きた時に1秒かけて遷移するように指定しているわけですね。
ハンバーガーアニメーションのサンプル
以下がサンプルになります。
See the Pen
yLgmzzz by 田所浩二 (@kojitadokoro)
on CodePen.
ハンバーガーボタンをクリックすれば、クルクル回りながら×印に変化したことでしょう。
また、×印をクリックすればハンバーガーボタンに戻ったはずです。
こんな感じで、jQueryのクリックイベントとtoggleClass()メソッド、あとは独自のアニメーションプロパティを指定したことで実装が出来ました。
ハンバーガーアニメーションをメニュー機能として実装する
ハンバーガーアニメーションだけを作成しただけではもの足りません。
そこで、ハンバーガーボタンが遷移すると同時に、スライドメニューが表示される仕様を実装してみたいと思います。
See the Pen
eYgqeZb by 田所浩二 (@kojitadokoro)
on CodePen.
こんな感じですね(-ω-)/
ハンバーガーボタンを押せばスライドメニューが表示され、×印を押せばスライドメニューが非表示になる流れです。
ハンバーガーボタン単体ではなく、様々な機能を掛け合わせることで、【ハンバーガーメニュー】として機能することが出来ます。
アニメーション作成にあたっての、おすすめ学習ツール
今回のアニメーション作成にあたって、
- jQuery
- Scss
について参考にした学習コンテンツ（参考書など）を紹介します。
jQueryのおすすめ参考書
jQueryを学ぶならこの1冊です。
jQueryを使用したアニメーションなどの機能について、考え方・実行方法及びソースコードが紹介されています。
内容を確認して、実際にコーディングすることで理解が深まります。
初学者の皆さんは「この1冊を持っておけば、かなり心強い」はずです！！
Scss記法のおすすめ参考書及び学習コンテンツ
Scss記法とは、CSSの記述をさらに効率的にしたものです。
- 重複した記述を省略できる
- ネストを使って記述を省略できる
とにかく、無駄な記述を無くして時間短縮・作業効率化ができるということです！！
そこで、Scss記法を学びたいなら以下の学習コンテンツがおすすめです。
【Udemy：【JavaScript & CSS】ガチで学びたい人のためのWEB開発徹底実践（フロントエンド編）】ですね。
こちらはUdemy（ユーデミー）で販売されている学習コンテンツで、本格的なWEBページが作れることを目指した教材です。
Scssの記述法やアニメーションプロパティに関する内容がたんまり載っています。
なので、まだCSSでスタイスを記述してい人や、スタイルを思い通りに実現したいと思う人には必見ともいえる内容です！！
おかげで、学んだことを活かして色々なアニメーションづくりが捗るようになりましたからね(‘ω’)ノ
こんな感じで。
See the Pen
RwKXjMV by 田所浩二 (@kojitadokoro)
on CodePen.
ついでにJavaScriptやFlexBoxなどにも多々触れるので、かなり勉強になります。
おすすめです。
╲セールを逃すな！！／
—購入30日間返金無料—
【まとめ】効率的かつアニメーションなどの機能を実装したいなら、jQueryとSassを学ぼう！
以上で、まとめに入ります。
WEB制作をしている人で、
「無駄な時間を短縮してコーディングしたい！」
「アニメーションなどの機能を幅広く実装できるようになりたい！」
と思った人は、まずjQueryとSassを学びましょう。
それでは。
