【2016年2月第2週】新米WEBデザイナーのための気になったCSS・JSエフェクトとまとめ

どうも、最近記事を書く時間がなかなか取れなくまとめ記事のようなものしか書けていませんが、あまり気にせず続けていきます。
では、今週の新米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エフェクトまとめでした。
よかったらシェアお願いしまーす。

よろしければシェアをお願いします。

Keisuke Yamashita

新卒CM制作会社でPM→カナダでWEBデザインを勉強→カナダでWEBデベロッパーとして就職→日本で事業会社でデザイナー デザインからフロントエンドを主に担当しています。休日はNetflixを見ながら過ごしています。

最新情報をお届け

De.からWEBデザインの最新情報を受け取りたい方は、下記のボタンでLIKEしてください。