どうも、僕です。
今週の気になった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エフェクトまとめでした。
よかったらシェアお願いしまーす。
