こんにちは、中村です。
18日に書いたばかりですがまたお邪魔します。
今年もあとわずかですね。
今年はとにかく忙しくて、あっという間に過ぎてしまいました。
乗り越えてこられたのは、さまざまなジェネレーターやプラグインたちのおかげだなぁと思ったので、感謝を込めてご紹介します。
昔から使っているものも多いので定番のラインナップになりそうですが、気になるものがあればぜひお試しください。
CSS
Figmaを使っているといらなくなるかも知れませんが、いざという時の強い味方です。
Layoutit Grid
いきなりド定番ですね、いいかげん自分で書けるようにならなきゃな、と思いつつ、あれこれ書かないといけないものは頼ってしまいます。
Clippy
clip-pathのジェネレーターです。
吹き出しのしっぽなどはもうborderは使わないでclip-pathで作ります。角度が少し変わった形も簡単です。
cssgradient
グラデーションのジェネレーターです。簡単で助かります。
JavaScript
Swiper
カルーセルの定番プラグインですね。
イベントも充実しているのでこの後紹介するアニメーション用のプラグインと組み合わせると表現の幅が広がります。
Shuffle.js
ソートやフィルター機能を実装できるプラグインです。
使い方は以前記事を書いたので弊社のブログをお読みください。
ScrollHint
横にはみ出す要素を横スクロールできるようにしてくれます。
何が入ってくるかわからない、CMS管理の記事詳細などに使っています。
アニメーション
GSAP
これも定番のプラグインなんじゃないかと思います。
スクロールアニメーションなどはCSSでもできるようになっていきますが、
タイムラインを活用すると細かいアニメーションや用意したタイムラインアニメーションを任意のタイミングで実行できるのが素晴らしく便利です。
先ほど紹介したSwiperと組み合わせると、スライドを変えたタイミングでアニメーションを実行、などということもできます。
最近リバースできることも知りました。開閉時のアニメーションなんかも作れてしまいます。
すごいです。
すごいけれど色々出来すぎてとっつきにくいです。
自分のメモがわりにブログを書いていますのでよかったらどうぞ。
チートシートもあります。
これからお世話になりたいプラグイン
先日の朝までマークアップで知りました。
マークアップのチェックをしてくれます。VSCodeのプラグインです。
自宅のPCには入れて試して、これは入れるべきだ・・と実感したので実務にも導入していきます。
最後に
来年もお世話になります。いつもありがとう。