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

どうも、僕です。

今週の気になったCSS・JSエフェクト紹介してきます。頑張って毎週更新できるようにしていこうと思うので時間ある方は毎週チェックしてってください。

The 100

See the Pen The 100 by jakob-e (@jakob-e) on CodePen.

右から文字がスライドしてくるエフェクトですが、全てCSSアニメーションを使って実装されているのでJSを書く必要はないですね。ちょっとしたアニメーションを加えたい時に使えそうなエフェクトです。

SVG Loading Animation

See the Pen SVG Loading Animation by Joel T Bennett (@JTBennett) on CodePen.

今流行りのSVGを使用してアニメーションでローディングを実装しています。SVGノパスニタイシテCSSアニメーションを指定する方法でアニメーションさせてるためJSを書く必要なしです。シンプルなWebサイトにもってこいのエフェクトです。

Proposal Color Experiment

See the Pen Proposal Color Experiment by Sarah Carney (@Sarah_C) on CodePen.

色使いやフォントの使い方がオシャレなのでピックアップしました。背景画像は自分のを用意しないといけませんが、他のはコピペで再現できるので簡単に再現できます。

Loading… With CSS3 Animation

See the Pen Loading… With CSS3 Animation by Gerta Xhepi (@xhepigerta) on CodePen.

またまたローディングですが、SVGを使用せずにCSSのみで実装されているのが先ほどと違いますね。ソースコードはSassで描かれているため初心者には難易度高めですがこれを機に勉強しちゃいましょう。

UI Challenge Day 1.

See the Pen UI Challenge Day 1. by Brian Montana (@brianmontanaweb) on CodePen.

こちらはUIデザインの参考になるかなと思いピックアップしました。背景に画像を使用してその上にbグラデーションの背景を重ねています。また、フォームの要素もすくなくシンプルにまとめられているのがポイントですね。

以上今週の気になったCSS・JSエフェクトまとめでした。
よかったらシェアお願いしまーす。

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

Keisuke Yamashita

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

最新情報をお届け

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