ヌルヌル動くCanvasで作られた オリンピックの輪がすごい olympic circles logo
画面が表示されると、線状のものが集結してオリンピックの輪になります そのアニメーションがとても綺麗です
ダイヤルと連動して、コンテンツがスクロールするjavascriptコード
左にあるダイヤルを回すと、右にあるコンテンツがスクロールして行き、逆にコンテンツ部分でスクロールをすると左のダイヤルが回るようになっています。
画像なしで、CSSだけで作られた質感が良いスイッチボタン Toggle button in pure CSS
CSSだけで画像を使わず作られたスイッチボタンです、とても質感がよく出来ています このリアルな質感のボタンを見つけ人はついついスイッチを押しっちゃうんじゃないでしょうか
ハートがドクドクと鼓動しているCSSで作られたアニメーション css3 beating heart
ハートがドクドクと動いているように表現したCSSアニメーションです キュートな何かのローディング画面に使ったりも出来そうですね
HTML5アプリケーションで作られた、計算履歴が残る電卓(計算機)
スゴイですね！電卓をHTMLベースで作ってしまっています javascriptのコードは実践的な演算のコードの勉強にも使えそうです
スマホ用のボタンに使えそう！クリックで変形するアローマーク（矢印）
クリックすることでアローマークが変形するアニメーションが付いたボタンです、動作にはjQueryが必要です このボタンと連動する要素を作成して、jQueryの方で関連付けてやれば要素が展開するようなボタンにする事が出来ます
飛び上がっていくような動作が楽しい SNSボタン
SNSボタンをアイコンのフタのようなもので覆い、マウスオーバーするとそれがクルクルと回転しながら上の方へ消えていくアニメーションです。
画像を使わずにカーブのかかった吹き出しを実現するCSSデザイン Comic Sans Criminal
CSSだけでコミック風の吹き出しを作った例です 一般的な鋭利な三角形の吹き出しではなく、カーブが掛かったデザインになっています
ボタンをクリックで全画面にログインフォームを表示するアイディア Fullscreen Login
Go Fullscreenというボタンをクリックすると、ログインフォームが全画面に羊皮される仕組みです、ログインフォームは右上のペケで消せる用になっています。
レスポンシブなサイトをわかりやすく表現するのに良いアニメーションで魅せるアイディア
レスポンシブサイトを人に紹介するときに、その場にいて実際にブラウザのサイズを変更して見せてやることができればベストですが、こんな表現の方法もあります
検索のアイコンマークをクリックすると、にょーんっ伸びて検索ボックスが出現
検索のアイコンをクリックすると、横方向に伸びて検索ボックスがアニメーションで出現する仕組みです 普段はシンプルに見せておいて、検索するときだけ検索ボックスが出現するように演出できます
Canvasを使った 文字が分裂して散らばっていく美しいアニメーション
Canvasを使って作られたものです 文字が大きい文字が、小さい文字で構成されて散らばっていくアニメーションです とても楽しいアニメーションです
CSSだけで雲をかき分けて進むかのような演出をアニメーションで表現
幾つもの雲の画像を使って遠近感を出しながら、アニメーションするものです javascriptは使われておらずCSSのアニメーション効果で作られています
面白いギミックを仕込んだ入力フォームのデザイン
ユニークなキャラクターと入力フォームです、入力フォームに各フォームにフォーカスが当たるとキャラクターの手が動いて指さしている感じになります、面白いアイディアですね。腕の部分はパーツになっていてrotateをつかって回転を加える事で方向を変えています 変化を加える条件は[data-position=' ']をつかってフォームの順番で操作されています
CSSだけで作られた目玉のモンスターっぽくデザインされたスイッチ(チェックボックス) Toggle Switch
ものすごくユニーク、とても楽しいスイッチボタンになっています クリックすると目玉のタイプ・色・方向がアニメーションして変わります。
マウスオーバーでパカっとカバーが開くキュートな SNS・ソーシャルボタンのデザイン Social Button
ボタンにマウスポインターを乗せると、パカっとカバーが開いて中にあるSNSのボタンが見えるという仕組みです ロゴ(アイコン)はウェブフォントで表示されていますので、レイアウトだけ変えてそのまま使えそうです。
CSSを使って描かれたオリンピックの輪 Olympic rings
Olympic rings http://codepen.io/MattSmith/pen/cHjIC 今の時期らいしいものですね オリンピックの五輪の輪をCSSで作成したものです あのリングとリングの重なりを表現してい […]
複数のてtext-shadowを使ってデコレーションされたテキストとアニメーション Trembling text
テキストシャドーをいくつも使うことで、文字に立体感をつけ、アニメーションでブルブルさせたものです ブルブルするアニメーションはちょっと使いドコロを選びますが、text-Shadowをうまく使った文字の装飾はいい勉強になりますね。
3Dにメリーゴーランドの様に回転する 画像ギャラリー 3D images gallery
遊園地に有るメリーゴーランドのように回転する 3Dに出来た画像ギャラリーです 画像をマウスオーバーすれば、回転がとまり、画像に掛けられたグレースケールのフィルターが解除されてカラーの写真になり画像が枠内に収まったまま少し拡大します
経歴や経緯、ロードマップなどに使えるWEBページを作れるコード Timeline Blueprint
ページを表示するときにアニメーションで線が走ります HTML部分はとてもシンプルなので、javascript部分をまるごとコピペして、CSS部分は背景や色を調整すればOK
