ケケンタこんにちは！ ケケンタです。
最近、主婦や会社員、はたまた学生の間でもWeb制作の副業の需要が高まっています。
Web制作スキルはプログラミングと比較すれば身につけやすく、独学で案件を獲得できるレベルに到達することも決して不可能ではありません。
とはいえ、Web制作を副業にするためには多くのことを学び、身につける必要があることもまた事実です。
この記事ではその中の１つとも言える
Web制作で副業をするなら使いこなしたい
JavaScriptアニメーション
をいくつかピックアップしてご紹介したいと思います。
ケケンタこの記事でご紹介するJavaScriptアニメーションのコードはもちろんすべてコピペ使用OKですので、お気軽にご活用ください！
- フェードイン
- スライダー
- ハンバーガーメニュー
- アコーディオンメニュー
※アニメーションは今後も追加する可能性があります。
Web制作で副業をするならアニメーション実装は避けては通れない道です。
ご自身でJavaScriptアニメーションを自作できるようになるまでの間、あるいは自作するまでもないようなシンプルなアニメーション案件に遭遇したときなどに、この記事をご活用いただければと思います。
ケケンタ各アニメーションの簡単な解説もご用意しています。
ご参考になれば幸いです。
フェードイン
See the Pen フェードインアニメーション【VanillaJS】 by ケケンタ (@lgshifbg-the-looper) on CodePen.
フェードインアニメーションはWeb制作で必須アニメーションの１つです。
実装方法も比較的シンプルで、それに対する演出のプラス効果が大きい便利なアニメーションです。
- フェードインしたいHTML要素に「.fade-up」クラスを付与する
- 「.fade-up」クラスが付与されたHTML要素の位置をJavaScriptで取得しておく
- スクロールされて各要素が「画面内の設定高さ位置」まで入ったらフェードインする
スライダー
See the Pen スライダー【slick】 by ケケンタ (@lgshifbg-the-looper) on CodePen.
- JavaScriptライブラリの１つ「slick」を使用
- 「slick」を使用することで、jsファイルにオプションを記述するだけで簡単に様々なパターンのスライダーが実装可能
slickスライダーはスライダー実装でよく用いられるJavaScriptライブラリです。
JavaScriptライブラリはいくつも種類があり、ライブラリを活用することで自作するのがとても大変なアニメーションも簡単に実装することが可能です。
※皆さんご存じのjQueryもライブラリの１つです。
slick（に限らずJavaScriptライブラリ全般に言えることですが）を使用する際には決められているルール＝使用方法があります。
- slick用のjsファイルを読み込む必要がある（※上のコードではWeb上から直接jsファイルを読み込めるCDNと呼ばれる方式を採用しています）
- スライダーの動きを制御するためのオプションは、slickで定められているルール（文法）に従って記述する
- slickを使用するためにはjQueryも読み込んでおく必要がある（※コード内のコメントにもあるようにjQueryはslick用ファイルよりも先に読み込む必要があります）
ハンバーガーメニュー
See the Pen ハンバーガーメニュー【vanillaJS】① by ケケンタ (@lgshifbg-the-looper) on CodePen.
- ハンバーガーメニューは初期状態では画面の右側に隠しておく
- ボタンがクリックされたら
ボタン……「.active」クラス付与
ハンバーガーメニュー……「.open」クラス付与
→ ボタンは×印になり、ハンバーガーメニューは表示される - ハンバーガーメニューが開いている状態でボタンまたはリンクがクリックされたら
ボタン……「.active」クラス削除
ハンバーガーメニュー……「.open」クラス削除
→ ボタンとハンバーガーメニューが元に戻る
ハンバーガーメニューは、スマホサイズのコーディングでよく利用されます。その理由はスマホサイズではヘッダーメニューが横に表示しきれないためです。
そのため、実際の案件でよくあるパターンは、PCサイズでは通常のヘッダーメニューを表示し、スマホサイズではハンバーガーメニューを表示するという実装です。
ケケンタハンバーガーメニューもWeb制作の実案件ではよく実装するため、必須アニメーションの１つと言えます。
アコーディオンメニュー
See the Pen アコーディオンメニュー【vanillaJS】 by ケケンタ (@lgshifbg-the-looper) on CodePen.
上記のコードでは素のJavaScriptを使用していますが、アコーディオンメニューは実を言うとjQueryを使用すればもっと簡単に実装することが可能です。
しかし、jQueryで実装されたアコーディオンメニューには、連続クリックされた際に不自然の動きをしてしまうという不都合が生じます。
そのため、この記事ではjQueryを使用せず素のJavaScriptだけでアコーディオンメニューを実装したコードをご紹介しています。
- jQueryを使用せず、素のJavaScriptで実装
- 要素のborder,padding,line-heightを制御することで開閉動作を制御
※要素のheightを直接制御しようとすると高さ指定でautoや100%を使用することになるが、そうすると滑らかな動きを実装できない - ボタンがクリックされたら「.is-open」クラスをulタグから着脱し、開閉動作をさせている
Web制作で副業をするならJavaScriptアニメーションの習得は必須
ケケンタ以上、Web制作で副業をするなら絶対に使いこなしたいJavaScriptアニメーションでした。
- フェードイン
- スライダー
- ハンバーガーメニュー
- アコーディオンメニュー
JavaScriptはHTML/CSSと比較して習得難易度が高めです。
そのため、ついつい敬遠しがちになってしまう方も多いのではないかと思います。
しかし、Web制作で副業をするならJavaScriptの使用は必須です。
まだJavaScriptに慣れていない、手を出せていないという方は、まずはこの記事でご紹介しているコードをそのまま使い回すという形でも、少しずつJavaScriptを使用することに慣れていくことをおすすめします。
ケケンタいきなり完璧は目指さず、少しずつでもアニメーションに慣れていきましょう！
もしもWeb制作の独学に限界を感じたら
Web制作は未経験者でも比較的簡単に習得可能なスキルではあります。
しかしそうは言っても、Web制作を初めて学習する方にとっては覚えることが多く、独学で相談できる相手もいない状況だと気持ちが苦しくなってしまうこともあるのではないでしょうか。
そのようなときは、一度プログラミングスクールの利用を検討してみるのも良いかもしれません。
プログラミングスクールは高額な受講料がネックになることも多いですが、中には良心的な料金でWeb制作スキルを支援してくれるスクールもあります。
ご興味のある方は、以下の記事をご覧になってみて下さい。
コメント