フリーランスらに無償やり直し243回。下請け法違反で公取が指導 他
- 隔週月曜更新!フリーランス・副業ニュース
お菓子は楽しい時間を連想させるモチーフです。子ども時代の楽しい思い出や、大切な人と過ごした時間の記憶が、見る人をあたたかな気持ちにさせてくれます。
今回は、お菓子をモチーフにしたコードスニペット8選を紹介します。
目次
Three.jsとGSAPを使って「SUGAR(砂糖)」という文字を作り上げます。甘そうなお菓子でできた文字は、間違いなく注目を集めるでしょう。ライブラリの可能性も感じさせてくれるスニペットです。
See the Pen Sugar, Sugar by Steve Gardner (@ste-vg) on CodePen.
CSSのみで作られたスニペット。青と白のキャンディがまわっている様子を、ローディングアニメーションとしてクリエイティブに活用しています。
See the Pen Candy Ring Preloader by Jon Kantner (@jkantner) on CodePen.
顧客の興味を引くための要素として、ビジュアルはとても重要です。このインタラクティブなアニメーションつきのスライダーは、なんとCSSのみで作られています。
See the Pen CSS Only Cupcake Slider with Sprinkles! by Jamie Coulter (@jcoulterdesign) on CodePen.
バレンタインデーを思わせるハート型のキャンディーが、画面の中でゆらゆらと揺れています。このスニペットに使われているのは、CSSとGSAPです。
See the Pen Candy Heart by Katherine Kato (@kathykato) on CodePen.
「Candyland」というボードゲームをモチーフにしたスニペット。SVGとJavaScriptの力で、魅力的な作品に仕上がっています。
See the Pen Sugar rush (candyland) by luke lincoln (@lukes611) on CodePen.
オレンジ色の背景にランダムなサイズの泡が浮かんでいる様子は、爽やかな柑橘系の炭酸飲料を想起させます。とくにWebサイトのヒーローエリアにおすすめです。
See the Pen Who Loves Orange Soda? #codepenchallenge by Lisa Benmore (@lbenmore) on CodePen.
真上からお皿の裏まで、ドラッグしてあらゆる角度からケーキを眺められるこちらのコードスニペット。拡大縮小も可能です。CSSと、ほんのすこしのJavaScriptで作成されています。
See the Pen CSS 3D Cake 🍰 by S. Shahriar (@ShadowShahriar) on CodePen.
最後に紹介するのは、プリンをモチーフにした作品です。カーソルをあわせると、プリンが笑顔になります。かわいいですね。
See the Pen Challenges: CSS Hover Pudding🍮 by Deren (@deren2525) on CodePen.
クリエイティビティと楽しさは密接に関係しています。多くの人を楽しい気持ちにさせられるお菓子には、次の創作につながるヒントが隠されているとも言えるでしょう。
コードを書くことと、お菓子作りのプロセスにも似ている点があります。最高の結果のために、道具や材料を上手に使いこなしましょう。
(執筆:Eric Karkovack 翻訳:Asuka Nakajima 編集:宮﨑駿 提供元:Speckyboy)
スライムから泡まで!液体をシュミレートしたリキッドモーション8選
Workship MAGAZINE
CSS/JavaScriptで作った“春を祝う”コードスニペット8選
Workship MAGAZINE