iPhoneのsafariでバウンススクロールしたときの背景色を動的に変えてみたテスト

こんにちは!

こちらのiPhoneのsafari(iOS8~)でバウンススクロールした際に見える背景色ですが、

通常であれば、cssでbodyに対してbackground-color:#FF0000とかで自由に変える事ができます。(グラデーションや画像は不可)

この部分を動的に変えて欲しい、っていう機会は滅多になく、まさか動的に変えられるとは思ってなかったのですが、やったら普通にできました。

一体いつ使うのかは不明ですが、一応こんな風に見えます。
バウンススクロールした距離によって黒から白にグラデーションさせています。

さらに、無理やりですが、この機能を使ったデモを作ってみました
※iOS8~ safari限定

MazeMazeColor

上下に別れた色(タップ&長押しで変更可)を混ぜた色をバウンススクロールで見えた部分に反映させ、さらにスクロールを続けると、例えば下にスクロールして、下部分の色が隠れていくにつれ、混ぜた色から下の色が引かれていくような見え方になっています。

毎フレームbodyのbackground-colorの値を変えているだけですが、githubにソースをアップしておきます。
github

敷居は高いですが(iPhoneのsafari(iOS8~)限定なので)、ここまで凝ることができれば、かなり意識の高いコンテンツを作れるのではないでしょうか!どうか試させてください!

絶対に歩きスマホできないサイトになるjavascriptライブラリ

こんにちは!

みなさん歩きスマホしてますか?
危険と分かっていてもwebサイトが気になっちゃって、
ついついしちゃいますよね!
これはとてもよくないです

そこで今回、絶対に歩きスマホできないサイトになる
javascriptライブラリを作りました
https://github.com/ikeryou/taaa

このjsを読み込んで2行ほどjsを書くと、
自分自身の回転とwebサイトのスクロールが連動するようになります

回転例


指でのスクロールはできなくなりますので、
おのずと立ち止まって、くるくるすることでしか
サイトを閲覧できなくなります
(歩きスマホが不可能になります)

※実機デモ(iphoneのみ)
http://ikeryou.jp/oui/taaa/example/

座りながら普通にサイトが見れなくなるというデメリットもありますが、
スマホならではの一風変わったUIとして採用するのも面白いかもしれません

ぜひスマホで体験してみてください

three.jsでピクセル等倍

子供用アニメーション

会社で月一でやってる自主制作MTGで子供達に見せるためのアニメーションを作った

ちなみに自主制作MTGについての記事はこちら
8月に自主制作MTGを行いました!

こちらは画面をキャプチャして並べたやつ
0-1

シンプルな図形がひたすら回転するだけのもの
※要Flash
http://ikeryou.jp/works/kodomo/1/

これだけいいかなと思ったけど、やはりコンテンツとしてどうかと思ったので、マイク使って録音した音が図形の回転に合わせて変化する。っていう仕組みを追加した。
※要Flash、マイク、音出ます
http://ikeryou.jp/works/kodomo/2/

連動感が全然ないのでもっと連動感を出すのと、

出力される音だけど、この意味不明感はとても好きなのだが、もっとわかりやすいほうがいいかなと思った。

エフェクトの種類増やすとか

今後の課題

・録音した声ひとつにつき、ひとつの図形とエフェクト
・それが録音されるたびに画面現れる
・画面はごちゃごちゃになるけど、どの図形がどの声かはわかる

Away3D 4.xでピクセル等倍

NEXT PAGE »