Canvasを使った 入力したテキストに合わせてドットが集結して文字になるコード Circles, text and getImageData
好きな文字を入力することで、その文字に合わせて散らばっているドットが集結して文字になります 集まったドットがピコピコ動いているのもなんだかかわいい
CSSのボックス要素に関する扱いを正しく理解しているかjQueryで作ったクイズ BRO, DO YOU EVEN BOX MODEL?!
jQueryを使って作られた、問題です、下にある要素を上の正しい位置に入れていくことで回答する問題形式です。クイズ作りのベースに使えそうなコードです
印象的 かわいいキャラクターが飛び出る ドロップダウンメニュー Expanding List
かわいいキャラクターがHoverすることで飛び出してくるドロップダウンメニューメニューです
SVG画像にHoverアクションを加えたデモ svg face
SVG画像は中身がHTMLで組まれているのでその特性を活かして、タグにクラスを付けることで CSSを適応して色指定とHOVERによるアクションを加えています
hoverで縦にアコーディオンになった画像を表示させる画像ギャラリーに使えるテクニック CSS3 Accordion with Focus effect
hoverを使った、画像ギャラリーに使えそうなアクションです。画像にマウスポインターを載せることで、画像が拡大されぼかしが消えるアクションです、ぼかしはCSSのフィルターを使っていません
CSSスプリットを使ったアニメーションの作り方のデモンストレーション CSS Sprite Demonstration
CSS Sprite Demonstration By Bryan Braun http://codepen.io/bryanbraun/pen/bojpu CSSスプリットで順番に画像を表示することで、アニメーション化 […]
[js] マウスホイールで数値を操作するjavascript Number Scroll
数字の上でマウスホイールを転がすと数値が変動する仕組みです、数字をクリックすることで手動で数値を入力することも可能
[CSS] 無限にちぎれるトイレットペーパー Endless Paper Roll
ほのぼの系のCSSデザインです 使いドコロはかなり限られますが、トイレットペーパーの上辺のカーブのアニメーション演出がうまいなと思う作品
CSSで作られた カラフルなアイコン Icons HTML/Css
独創性のあるアイコンデザインでCSSで作られています コピペではちょっと使えません、一工夫だけ要ります。
CSSだけで作られたタコメーターがいい感じ Css tachometer
アニメーション付きのCSSで作られた タコメーターです かなりいい感じに仕上ってます
一枚の画像をCSSで分割して、波打つ旗にするアイディア・テクニック
実際には1枚の画像なんですが、divブロックで分割させてアニメーションを加える事で旗が風になびいてるように表現されています
カッコイイ ノイズでデザインされた 404エラーページのデザイン Glitchy 404 Page
404エラーページをデザインしたものです 背景にはGIFアニメで砂嵐を表現しているの以外は、CSSで作られています 文字が変形するのは transformのscaleを使ったものです
クリアなデザインのCSSで作ったボタン 16種 Clean Button Set
シンプルなデザインのボタンです CSSで作られているので、WEBフォントとフォントアイコンの読み込みと少しちょっとだけCSSコードを調整すれば使えます
hoverで目隠しが開くと同時に、中の画像も移動するテクニック CSS Aperture Effect
hoverによるアクションに、box-shadowsによる変化を与えているのかとおもいきや、box-sizingをborder-boxにして内側にborderが入ってくるようにして、hoverでborderの太さを変更することで、輪っかが変形するようになっています
ポップなアニメーション付きの Apple,Robot,Cloudのアイコンデザイン Animated icons
アイコンをhoverするとアニメーションするアイコンデザインです webkit系で動作します、IEでは色もアニメーションも無い黒く表示されます
バーガーボタンをクリックすると周りにメニューが流れこんでくるのが良い Corner Radial Menu
三本線のバーガーアイコンをクリックすると、メニューが上部からカーブにそって流れ込んでくるメニューでのデザインです かなりいい感じに仕上がっています、アイコンはWEBフォントを利用しています
クリックで YES・NO等の表示を切り替えるアニメーションボタンのデザイン Checky
ボタンをクリックすると背景と、チェックマークが変化するボタンです デザインも良くて、アニメーションも心地いい感じに出来上がっています
hoverで六角形が連結してで展開されていくメニューデザイン CSS Hex Menu Idea
六角形をhoverすると子メニューが表示されて、さらに子メニューをhoverすると孫メニューが展開されるドロップダウン型のメニューを横方向に展開させた応用的なアイディアです
幅いっぱいにヘッダーの背景に動画を使った手法 Header with Video
ヘッダー部分の背景に動画を使った手法です 動画はそれぞれのブラウザに対応させるためにMP4とOGGで指定されています
サイトのエントランスページでクリックでかっこ良くブロックがレンダリングされていくアニメーションのコード Another intro page
一番最初に表示されているEnterを押すことで、ブロックがレンダリングされていくようなアニメーションでコンテンツが表示されるようになります。エントランスページを作るときには、この方法を使うのも有りかなと思います
