CSS/JavaScriptで作った“春を祝う”コードスニペット8選

春はクリエイティビティを刺激する季節です。Webデザインにおいても、春をテーマにした明るいデザインをよく見かけます。

今回は、パステルカラーや花など、春らしいデザインのコードスニペットを集めました。

1. 迷路の中のてんとう虫

光り輝く春の庭を、多くのてんとう虫が歩きまわっています。3Dで作られた世界は、カーソルで視点を変えることも可能です。

See the Pen Ladybugs in the Meadow by Paul J Karlik (@pjkarlik) on CodePen.

2. 春らしいフォークロア

落ち着いた色あいで、春らしいフォークロア調のデザインを描き出しています。クリックやタップでアニメーションが変化するのが特徴。JavaScriptを活用し、最小限のbodyスタイルのみを適用しています。

See the Pen Spring Folk by Sophia (@fractalkitty) on CodePen.

3. 花咲くスライダー

コードに手描きのデザインを組み合わせることで、あたたかみを演出しています。スライダーはインタラクティブで、ドラッグすると花が咲く仕組みです。

See the Pen Flowerpot Slider 🌼🌼 by Chris Gannon (@chrisgannon) on CodePen.

4. イースターエッグ

パステルカラーのイースターエッグがつぎつぎと飛び出すスニペット。見ているだけでも楽しいですが、カーソルを動かすとカーソルに沿って飛び出すようになります。

See the Pen Easter Eggs 🐇 by Nate Wiley (@natewiley) on CodePen.

5. 『どうぶつの森』風の庭

任天堂のゲーム『とびだせ 動物の森』と、ゲーム機の『Nintendo Switch』をテーマにしたもの。このスニペットは『とびだせ 動物の森』の春を描いています。鮮やかな色彩と咲き誇る花を見ると、自然と暖かな気持ちになってきます。CSSのみで作られているのも特徴のひとつ。

See the Pen Animal Crossing: Isabelle’s Day Off ☀️(Pure CSS) by Elisabéth (@elisabethdiang) on CodePen.

6. 花で描くライン

クリック＆ドラッグすると、画面上に花を描くことができます。花がだんだん大きくなるギミックにも注目です。

See the Pen Click and draw some flowers by Pogany (@giaco) on CodePen.

7. ダンシングフラワー

春は人の気持ちを浮き立たせる季節です。そんな春にぴったりなのが、遊び心にあふれた踊る花のスニペット。踊ってほしいダンスの種類を選んでみましょう。

See the Pen Flower dance by agathaco (@agathaco) on CodePen.

8. ピクセルのひよこ

CSSのみで制作されたスニペット。ピクセルのひよこが画面上をぐるぐると歩きまわり、カーソルをあてるとジャンプします。

See the Pen Chick in 3D Pixel World (No Javascript) by Takane Ichinose (@takaneichinose) on CodePen.

おわりに

暖かい春が来ると、新しいものを作りたいという意欲が湧いてくる人も多いはず。パステルカラーなどの色だけではなく、春という季節が持つエネルギーを、UIやインタラクティブ要素に反映させてみるのはいかがでしょうか。

（執筆：Eric Karkovack　翻訳：Asuka Nakajima　編集：少年B　提供元：speckyboy）