HTML5、CSS3だけじゃない!ブラウザで実装できるスゴい技術14選 【WebGL】

このエントリーをはてなブックマークに追加

フロントエンドの技術の発展がスゴすぎるのでまとめてみました。
世界には、スゴい人がたくさんいるなー。

1 放射状に広がっていく地図

放射状に広がっていくアニメーションが美しい作品。東京モード学園っぽい。
canvasを使ってます。canvasにはそろそろ挑戦してみようと思います。
Map Generator
フロントエンジニアのHTML5 CSS3 Javascript

スポンサーリンク

2 CSSだけでかわいいボタン

最近のトレンドともいえる画像を使わずにCSSだけでリッチな素材をつくった作品。
スマホサイトでは、読み込みを速くするためにこうした技術が必要になってくるので、ぜひ覚えたい所です。
ハートの部分は難しそうだなー。
かわいいふきだし
フロントエンジニアのHTML5 CSS3 Javascript

スポンサーリンク

3 CSSだけでゲーム!

CSSだけでシューティングゲームがつくれてしまうという驚きを与えてくれる作品。
:hover, :cehecked をうまく使っています。
CSS3 OF THE DEAD
フロントエンジニアのHTML5 CSS3 Javascript

4 CSSでワニワニパニック

CSSだけでワニワニパニックがつくれてしまうんですね!驚きです。
ゲームセンターにいる感覚を味わせてくれます。
CSS PANIC
フロントエンジニアのHTML5 CSS3 Javascript

5 実写と見間違う桜

桜が舞う美しすぎるアニメーションです。
動画と見分けがつかないくらいにキレイ!
WebGLを使っているようです。

Amazing Sakura
フロントエンジニアのHTML5 CSS3 Javascript

6 「デザインあ」っぽい

クリックごとに乱数を発生させて、文字が表示されていきます。
フォントが「デザインあ」のようにオシャレなつくり。
シンプルだけで、見入ってしまいます。
KDTree Test
フロントエンジニアのHTML5 CSS3 Javascript

7 【3D】ぐるぐる回る球面体

ひたすら回るポリゴンチックな球。
マウスオーバーで、回る速さが変わったり、クリックでワイヤーだけになったりと非常に凝った作品。
canvasやりたいなーと思わせてくれる作品です。
3D Sphere
フロントエンジニアのHTML5 CSS3 Javascript

スポンサーリンク

8 CSSで驚くほどのアニメーション

CSSでマウスオーバー時のめちゃくちゃかっこいいアニメーションが実装できてしまいます。
boder: rgba()で色を指定やら、:hoverでこんだけできんのか。すごい!
borderとtransitionを使ったエフェクト
フロントエンジニアのHTML5 CSS3 Javascript

9 HTMLマリオ

マウス移動で、見え方が変わるマリオ。
こんなオシャレなものをつくれるようになりたいですねー。
canvasを勉強したいなら、この作品のコードを見るのがよさそう。
マリオ forked from: HTML5で3D その2 (カメラ)
フロントエンジニアのHTML5 CSS3 Javascript

10 WebGLを学んでみたくなる美しさ

5の「実写と見間違う桜」でも紹介した「WebGL」を使った作品です。

WebGLのお勉強
フロントエンジニアのHTML5 CSS3 Javascript

WebGLを利用したWebサイト

HTML5の普及ともにブラウザでリッチな動きを実装できると注目が集まるWebGLですが、この技術を利用した素晴らしいサイトがありました。
ぜひご覧下さい。
フロントエンジニアのHTML5 CSS3 Javascript

11 リッチなリングメニュー

Pathで見られるUI。
ボタンをタッチすると、メニューが放射状に現れるおしゃれ演出。

リングメニューをCSSで実装してみる

Path風UI

12 ドロップダウンのナビゲーションバー

サイトやブログで使いたいおしゃれなナビゲーションバー。
これがあるだけでサイトが一段とイケて見えます。
CSSだけでスルスルDropDownMenu!

ドロップダウンのナビゲーションバー  mini

13 近未来のデータ分析画面

映画に出てきそうなグラフアニメーション。
こんなにきれいなグラフィックを再現できるとは驚きました。
とにかくかっこいいので、ぜひご覧ください!
FT

html5とcss3

14 マトリクス ToDoアプリ

優先順位と公私を2軸にとったマトリクス型のToDoアプリ。
優先順位が一目で分かり、まさにイノベーション。
この発想はなかった。

背景画像で使い方それぞれなToDo forked: Simple ToDo管理アプリ with HTML5

HTML5でTodo

いけてんなー。すごい!!

最後に

これからスマホがどんどん普及していき、ブラウザ上での技術は
非常に需要が出てきますので、この機会に勉強してみるのもいいですね。
この記事を友だちに教えてあげて、一緒に勉強しようぜ!というのもいいと思います。
というか推奨ですw

仕事で悩む人から人気の記事

ブログ「らふらく」を購読する→follow us in feedly

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

ブログで稼ぐ方法をまとめてます

関連記事はこちらからどうぞ!

いつもシェア感謝です!今回もぜひ

このエントリーをはてなブックマークに追加
※ 微妙だったら、そっと閉じるか、ほかの記事を見ていただけるとうれしいです!
SNSでも自分の得意なことで収入を得る方法を発信しています。フォローすれば更新をチェックできますので、ぜひフォローを。
仕事依頼などのお問い合わせは「iwgp545@yahoo.co.jp」か、「TwitterのDM」、「Facebookのメッセージ」からお願いします。

SNSでフォローしてお金を稼ぐための情報を受け取ろう
LINE@で友達追加(スマホでLINEを起動 > その他 > 友だち追加 > QRコード読み取り)
ブログで生活しているタクスズキと申します。「好きなことを仕事に」を当たり前にする活動をしています。よく「真面目」と言われる89世代の意識高い系です。 スズキについて詳しく知りたい方はこちらからどうぞ
仕事のご依頼(広告掲載、記事寄稿など)はiwgp545@yahoo.co.jpからお願いします!