コンテンツの内容は、よく手帳の後ろに付属しているような雑学的なデータをメモしているような情報です。
このカテゴリでは、UAや記事表示部分を何かのパロディっぽい感じで作る、をテーマとしています。
※原森はデザイナーではありませんので、デザインレイアウトのアイデア紹介ではなく、HTML、CSS、javascriptでデザイナーさんのやりたいことをwebプログラムするためのアピールコンテンツです。
90degの回転ページめくり動作を、jsとcssで初めて作ってみた時(2010年頃)の手帳パロディデザインです。
この手帳は、ウインドウサイズが小さくなった時には普通のテキスト表示に変更する形のままで公開しています。
※ウインドウサイズが中ぐらいの時の処理はそのうちに…。
※ちなみに、2009～2010年頃に作った時にはFF専用でしたが、現在どのブラウザでも動作するようになりました。
Transition ソース作成ツール ver1.0
Animation ソース作成ツール ver1.0
keyframes ソース作成ツール ver2.0
Transform ソース作成ツール ver1.0
ベンダープレフィックスを付加する ソース作成ツール ver1.0
進数変換ツール ver1.0
positionソース作成支援ツール ver1.0
liタグを自動付加するソース作成支援ツール ver1.0
checkbox radio ソース作成支援ツール ver1.0
連番ソース作成支援ツール ver1.0
10進←→16進カラー変換ツール ver1.0
セーフカラーマップ ver1.0
黄金/白銀比率計算ツール ver1.0
サブメニューがスライドする効果実験 / メニューは最初すべて非表示実験
記事や本文の指定id付き p or span 等で挟んだ時にアニメ効果js実験
SVGで立体表現実験
拡大画像を表示する(lightbox風)効果実験
フォーム入力用の演出
パララックス効果実験
ページめくり効果実験(複数ページ版 / ie10対応)
記事が上から降りてくる効果実験
記事ボックスが回転する効果実験
divが自動で回転アニメ 四角形
divが自動で正面向き回転アニメ
divがホバー方向別に異なるtransform
ボタンマウスオーバー方向で異なる入力インターフェイス実験
div図形
メニューいろいろ実験1/縦メニュ（サブなし）
メニューいろいろ実験2/タブメニュー
選択表示 div box
cssだけでフキダシツールチップ表示
css3でアニメーション部品
css3でdivbox装飾
css3 + html5 でキャプション表示
css3でlist装飾
css3でマウスホバーアニメボタン
css3で文字装飾
css3でflash代替キャッチアニメ