どうも、最近記事を書く時間がなかなか取れなくまとめ記事のようなものしか書けていませんが、あまり気にせず続けていきます。
では、今週の新米WEBデザイナーのための気になったCSS・JSエフェクトとまとめを紹介していきまーす。
Material Scroll Animation
See the Pen Material Scroll Animation by Bhakti Al Akbar (@balapa) on CodePen.
マテリアルデザインのエフェクトでCSSとJSで実装されています。少し初心者には高度なエフェクトですが流行りのマテリアルデザインを取り入れてはいかがでしょうか？
色々なところで使えそうなエフェクトなのでマスターしてしまえば汎用性は高いですね。
Simple CSS Only Tooltip
See the Pen Simple CSS Only Tooltip by Matt Stvartak (@mattstvartak) on CodePen.
CSSのみで実装されているホバーした時にヒントを表示するエフェクトです。ちょっとした要素の説明をするときに使えるエフェクトかなと思います。
また吹き出しの形を変えれば色々なところにも使えるところもいいですね。
Animate section out by splitting it horizontally in half
See the Pen Animate section out by splitting it horizontally in half by Kriszta (@vajkri) on CodePen.
title属性を使用してCSSとJSで実装されているエフェクトです。「Animate」のボタンを押すと文字が半分に割れてサイドにスライドしていくエフェクトですが、半分に割る表現が新しいなと思いピックアップしました。
自分でも今度ちょっと試しに使ってみたいエフェクトです。
Pure CSS loader #2
See the Pen Pure CSS loader #2 by Jerome Renders (@JeromeRenders) on CodePen.
CSSのみで実装されたローディングエフェクトになります。Sassで書かれているので解読に少々手間がかかるのですが、CSSアニメーションを使えるようになれば表現の幅が広がりますのでぜひマスターしちゃいましょう。
Pure CSS horizontal bar chart with staggering animation
See the Pen Pure CSS horizontal bar chart with staggering animation by Kriszta (@vajkri) on CodePen.
こちらもCSSのみで実装されている棒グラフ（横）になります。グラフにちょっとしたアニメーションをつけたいなんて時にはもってこいのエフェクトですね。ソースコードのようにポートフォリオサイトでスキルを記述するさいに使用してみるといいんじゃないでしょうか。
以上今週の気になったCSS・JSエフェクトまとめでした。
よかったらシェアお願いしまーす。
