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

春を祝うコードスニペット
ENGINEER

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

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

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

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

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

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

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

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

3. 花咲くスライダー

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

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

4. イースターエッグ

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

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

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

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

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

6. 花で描くライン

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

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

7. ダンシングフラワー

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

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

8. ピクセルのひよこ

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

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

おわりに

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

(執筆:Eric Karkovack 翻訳:Asuka Nakajima 編集:少年B 提供元:speckyboy

40,000人以上が使う!日本最大級のフリーランス・副業向けマッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・副業向けマッチングサービス『Workship(ワークシップ)』が、そんな悩みを解決します!

  • 累計40,000人以上のフリーランス・副業ワーカーが登録
  • 東証プライム上場企業からスタートアップまで多数参加
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 公開中の募集のうち66%がリモートOKのお仕事
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

利用料は一切かかりません。一度詳細をのぞいてみませんか?

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。また、本メディア内に掲載されているリンクには、アフィリエイトURLが含まれる可能性があります。

SHARE

  • 広告主募集
  • ライター・編集者募集
  • WorkshipSPACE
週1〜3 リモートワーク 土日のみでも案件が見つかる!
Workship