CSSとJavaScriptでカフェインの世界を紹介しよう

よく、ウェブ開発者は多量のカフェイン飲料を飲みながら仕事をしているというような考えは固定概念であるということを聞きます。ソーシャルメディアをよく使う人は特に、このような習慣があるというのを耳にするでしょう。

 

 

飲み物にライトを当てて輝かせるというようなイメージ画像などもよく見かけると思います。最先端のデジタル機器を賢く使うことで、開発者は実際に飲み物を作ったり、飲み物を作ってくれる機械を作り出すことができます。

 

 

今日は、ネット上のコードで実際にカフェイン飲料を作るツアーに行って見ましょう。きっとワクワクすること間違いなしです。

さっそく自分専用のコーヒーを作ってみましょう

See the Pen
Starbucks Cup – CSS by Ellie (@ellie_html)
on CodePen.

こちらは世界的なコーヒチェーンですね。どこの会社とは言いませんが、この象徴的なロゴや白いペーパーカップはみなさんにもお馴染みですよね。あるウェブ開発者がHTMLと CSSを使って実際に作成してくれました。

 

 

ソーダの泉？

 

 

See the Pen
Grape Soda by Liam Egan (@shubniggurath)
on CodePen.

 

みなさん、ソーダはお好きですよね？グレープソーダの泉に飛び込みたくなることもあるのではないでしょうか。このイメージはThree.js,で作成したアニメーションです。ユーザーの好きな角度で見ることができるのも、このアニメーションの良さの一つですね。

 

 

 

スロットを揃えて　飲み物を完成させましょう

 

See the Pen
Caffeine Slot Machine by Neal Fennimore (@nealfennimore)
on CodePen.

コードで、カジノにいるような楽しさと美味しいお茶を作ることができるという良い点を兼ね備えたゲームを作ることができます。右手のレバーを引いて、スロットを揃えましょう。

 

必ず揃うので、心配する必要はありませんよ。このゲームはJavascriptを使って作成していますが、本物のスロットをするより少し馬鹿げて見えるかもしれませんね。

 

 

お茶の時間

 

See the Pen
SVG Tea Mug by Chris Gannon (@chrisgannon)
on CodePen.

nbsp;

美味しいお茶を飲んだ時の感覚って素晴らしいものですよね？リフレッシュできて、エネルギーチャージにもなります。このSVGアニメーションを見ると、好きな本とあったかいお茶を持って休憩したくなります。

 

 

 

エスプレッソをEと置き換えた面白い発想

See the Pen
E – Espresso by Alex Bergin (@abergin)
on CodePen.

nbsp;

エスプレッソはよくある発想で、子供向けのテレビでエスプレッソをEというアルファベット表している。エスプレッソは子供にはよくない飲み物ということは忠告しておきますね。居眠りしないために飲むならいいかも。

 

 

 

カフェインの歴史

See the Pen
Timeline by Amy Spielmaker (@akspiel)
on CodePen.

nbsp;

 

時系列に沿ったレイアウトは、年代学の分野でよく使用されます。実際、カフェインの歴史で例に出してあるように、こんなにもわかりやすく見易い図はありません。

 

 

 

あなたに自動販売機を

&

See the Pen
Coca Cola Vending Machine (Interactive) by Giovanni Hobbins (@giohobbins)
on CodePen.

;

 

ここの二次元状にある飲み物はカフェインが含まれていないものですが、棚にある飲み物を自由に取ることができるだけではなく、実際に飲むことも想定されて作られたとても手のこんだ作品です。

 

 

ただいまコーヒー作ってます

See the Pen
#1 – Coffee Machine – SVG animation with CSS3 by Jonathan Silva (@jonathansilva)
on CodePen.

nbsp;

 

このコーヒーメーカーは、作る最中に可愛い笑顔を見せてくれます。SVGアニメーションを使って作っているのですが、面白い要素も同時に含んでいてとても楽しい作品です。記憶に残りやすいのもいい発想である証ですね。

 

 

 

想像的なエネルギーを作り出そう

 

 

カフェイン飲料は万人ウケする飲み物ではありません。ですが多くのウェブデザイナーに発想の活力を与えています。そして、皮肉にも私たちが今日見てきた技術や言葉はその力によって鼓舞され、出来たものもあります。

 

ですので、ネット上でカフェインに関わることしてもいいですし、ウェブサイトを作る時にでもカフェインを摂って貢献しましょう。

 

もっと知りたい人は、ぜひCodePen Collectionのサイトをのぞいて見てください。