こんにちは、福岡でajsai(あじさい)という屋号でフリーランスのWebデザイナー / カメラマンをしているけーすけです。
今回は私のポートフォリオ兼ブログサイトのajsai.jp/introduction/に使った技術をブログ形式で紹介していきます。

今回は、JavaScriptの紹介

このサイトで後悔した時に使っているJavaScript周りの技術を紹介します。

周りの方から「もっといいやり方あるよ！」とアドバイスをいただいたらすぐ変更します。より良いやりかたがあれば教えてください…!!

jQueryを使ってます

小さなホームページ制作にはとっても相性のよいjQueryを使っています、何の問題もなくとても便利です。

制作に取り掛かる当初は、

「せっかくの自分のサイトなんだし、流行りのVueとか使うぞー！」

と思っていたんですが、冷静になって考えると手段が目的になっているなと感じたのでjQueryを使うことにしました。

楽だし！

使っているプラグイン紹介

jQuery inview

設定した要素が画面内に入ったら発火するプラグイン。
記述がとても簡単なので、すごく使いやすいです。ページ中で、ふわっと出てくる部分はinviewを使っています。

このブログを書いている時に、waypoint.jsでよかったじゃん…とか思ったのでしばらくしたらプラグインを変更しているかもしれません。

https://github.com/protonet/jquery.inview

parallax.js

パララックスを簡単に実装できるプラグイン。

マウスの動きに対する、ずれの量も簡単に設定できるのでこれからパララックスに挑戦する！という方におすすめです。

https://matthew.wagerfield.com/parallax/

GSAP

JavaScriptでアニメーションするなら定番のGreen Sockのプラグインです。
今回は本体はもちろんとしてScroll Magicを使い、スクロールに応じてコンテンツがスライドするあれを少し実装しました。

これから使う人は、検索で出てくる情報では動かないことがほとんどなので注意してください。
ほとんどが2系の書き方で、現在は3系になっているので書き換えが必要です。（公式のForumsの情報も）

https://greensock.com/gsap/

https://scrollmagic.io/

最後に

普段の制作業務でJavaScriptでアニメーションを作ることはほとんどなかったので、自分のやりたいことを詰め込んだ感じです。

もっと時間をかけてこだわりたい…!!リファクタリングしたい….!!という部分もありましたが、時間と労力を考えて妥協している部分も正直あります。

JavaScriptの勉強やっていくぞーー！！

自分のサイトばかり作って、案件獲得に動かないわけにはいきませんもんね…!!

今後少しづつ改善していきます。