お菓子をモチーフにした美味しいコードスニペット8選【CSS/Javascript】

お菓子は楽しい時間を連想させるモチーフです。子ども時代の楽しい思い出や、大切な人と過ごした時間の記憶が、見る人をあたたかな気持ちにさせてくれます。

今回は、お菓子をモチーフにしたコードスニペット8選を紹介します。

Sugar, Sugar with Three.js & GSAP

Three.jsとGSAPを使って「SUGAR（砂糖）」という文字を作り上げます。甘そうなお菓子でできた文字は、間違いなく注目を集めるでしょう。ライブラリの可能性も感じさせてくれるスニペットです。

See the Pen Sugar, Sugar by Steve Gardner (@ste-vg) on CodePen.

Candy Ring Pure CSS Preloader

CSSのみで作られたスニペット。青と白のキャンディがまわっている様子を、ローディングアニメーションとしてクリエイティブに活用しています。

See the Pen Candy Ring Preloader by Jon Kantner (@jkantner) on CodePen.

CSS Only Cupcake Slider with Sprinkles

顧客の興味を引くための要素として、ビジュアルはとても重要です。このインタラクティブなアニメーションつきのスライダーは、なんとCSSのみで作られています。

See the Pen CSS Only Cupcake Slider with Sprinkles! by Jamie Coulter (@jcoulterdesign) on CodePen.

A CSS & GSAP Candy Heart

バレンタインデーを思わせるハート型のキャンディーが、画面の中でゆらゆらと揺れています。このスニペットに使われているのは、CSSとGSAPです。

See the Pen Candy Heart by Katherine Kato (@kathykato) on CodePen.

Recreate Candyland with CSS, SVG & JavaScript

「Candyland」というボードゲームをモチーフにしたスニペット。SVGとJavaScriptの力で、魅力的な作品に仕上がっています。

See the Pen Sugar rush (candyland) by luke lincoln (@lukes611) on CodePen.

Create an Orange Soda Background

オレンジ色の背景にランダムなサイズの泡が浮かんでいる様子は、爽やかな柑橘系の炭酸飲料を想起させます。とくにWebサイトのヒーローエリアにおすすめです。

See the Pen Who Loves Orange Soda? #codepenchallenge by Lisa Benmore (@lbenmore) on CodePen.

Create a CSS 3D Cake

真上からお皿の裏まで、ドラッグしてあらゆる角度からケーキを眺められるこちらのコードスニペット。拡大縮小も可能です。CSSと、ほんのすこしのJavaScriptで作成されています。

See the Pen CSS 3D Cake 🍰 by S. Shahriar (@ShadowShahriar) on CodePen.

CSS Hover Pudding

最後に紹介するのは、プリンをモチーフにした作品です。カーソルをあわせると、プリンが笑顔になります。かわいいですね。

See the Pen Challenges: CSS Hover Pudding🍮 by Deren (@deren2525) on CodePen.

おわりに

クリエイティビティと楽しさは密接に関係しています。多くの人を楽しい気持ちにさせられるお菓子には、次の創作につながるヒントが隠されているとも言えるでしょう。

コードを書くことと、お菓子作りのプロセスにも似ている点があります。最高の結果のために、道具や材料を上手に使いこなしましょう。

（執筆：Eric Karkovack　翻訳：Asuka Nakajima　編集：宮﨑駿　提供元：Speckyboy）