- 2016
Fancy world of mirror
http://saaki.pyrop.jp/
推奨環境:chrome、safari等のwebkit系ブラウザ、Firefox(いずれも最新版)
お洒落と甘い物にしか興味がない女の子のための世界をテーマにデザインしました。
左下のウサギの周りに各SNSへのリンクをポップな感じで配置しています。
chromeで見ると女の子がまばたきをします。
html5、CSS3を使用したサイトです。
画面中に降り注ぐハートはFLASHではなくhtml5のcanvas要素です。
canvasのTextAPIで半透明なハートを描画してjavascriptで再描画しつつアニメーションさせています。
女の子の目がまばたきする部分はCSS3のtransformで目の部分の画像の座標を3pxにサイズ変換した後、
keyframesで座標を1pxずつずらすという手順でアニメーションさせています。
CSS3のアニメーションがFirefoxに対応していないため、chromeでしか見ることができません。
背景のグラデーションもCSS3のliner-gradientを使っています。
推奨環境:chrome、safari等のwebkit系ブラウザ、Firefox(いずれも最新版)
お洒落と甘い物にしか興味がない女の子のための世界をテーマにデザインしました。
左下のウサギの周りに各SNSへのリンクをポップな感じで配置しています。
chromeで見ると女の子がまばたきをします。
html5、CSS3を使用したサイトです。
画面中に降り注ぐハートはFLASHではなくhtml5のcanvas要素です。
canvasのTextAPIで半透明なハートを描画してjavascriptで再描画しつつアニメーションさせています。
女の子の目がまばたきする部分はCSS3のtransformで目の部分の画像の座標を3pxにサイズ変換した後、
keyframesで座標を1pxずつずらすという手順でアニメーションさせています。
CSS3のアニメーションがFirefoxに対応していないため、chromeでしか見ることができません。
背景のグラデーションもCSS3のliner-gradientを使っています。