ケケンタこんにちは！ ケケンタです。
最近、主婦や会社員、はたまた学生の間でもWeb制作の副業の需要が高まっています。
Web制作スキルはプログラミングと比較すれば身につけやすく、独学で案件を獲得できるレベルに到達することも決して不可能ではありません。
とはいえ、Web制作を副業にするためには多くのことを学び、身につける必要があることもまた事実です。
この記事ではその中の１つとも言える
Web制作で副業をするなら使いこなしたい
JavaScriptアニメーション
をいくつかピックアップしてご紹介したいと思います。
ケケンタこの記事でご紹介するJavaScriptアニメーションのコードはもちろんすべてコピペ使用OKですので、お気軽にご活用ください！
- フェードイン
- スライダー
- ハンバーガーメニュー
- アコーディオンメニュー
※アニメーションは今後も追加する可能性があります。
Web制作で副業をするならアニメーション実装は避けては通れない道です。
ご自身でJavaScriptアニメーションを自作できるようになるまでの間、あるいは自作するまでもないようなシンプルなアニメーション案件に遭遇したときなどに、この記事をご活用いただければと思います。
ケケンタ各アニメーションの簡単な解説もご用意しています。
ご参考になれば幸いです。
＼Web制作を仕事にしたいなら／
こちらの記事で
Web制作コース独学プラン
についてご紹介しています。
￣￣￣
日時指定便が「無料」で使えるので不在で商品を受け取れないという心配が無くなる
最短で注文した「翌日」に商品が届くので欲しいものがすぐ手に入る
※ご注文の時間帯やお住まいの地域によります。
Amazonプライムの無料体験は「何度でも」利用可能
Amazonプライムの無料体験を何度も利用する方法
- Amazonのカート画面で表示される「Amazon Primeの無料体験の案内」をクリック
- 会員の自動更新を解除しておく＝期限が来たら自動解約
- １～３ヶ月ぐらいするとAmazonのカート画面で再度無料体験の案内が表示される
ケケンタ僕自身、過去に少なくとも３回は無料体験を利用しています。
※条件は不明ですが、解約後に一定期間が経過すると、再び「Amazon Prime無料体験の案内」が表示され、再度利用することが可能です。
フェードイン
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を使用することに慣れていくことをおすすめします。
ケケンタいきなり完璧は目指さず、少しずつでもアニメーションに慣れていきましょう！
コメント