Subscribed unsubscribe Subscribe Subscribe

スクロールバーやチェックボックスなどのブラウザパーツでいろんなUIを作ってみた

Javascript Web


先日見たthe389.comというサイトを受けて、自分でもスクロールバーやチェックボックスなどのブラウザパーツを使ったUIをjavascroptで作ってみた。
作ってみたのは、スクロールバーを使ったProgress Loading BarとX/Y Slider、それからチェックボックスなどで表現したLoading Animationです。


スクロールバーを使ったヤツはブラウザ判別で環境に応じて調節するようにしていますが、現在のところWin環境は全無視しているので、たぶんちゃんと見れないと思います。
なので見るときはMacで見てください。暇だったら直します。

Progress Loading Scroll Bar


【Demo】


スクロールバーを使ったProgress Loading Barです。
Progress Loading Bar自体あまり使うことがないのでそんなに活躍しなさそうですが、まぁ上手くできたので満足。

チェックボックス・ラジオボタンを使ったLoading Animation


【Demo】


Loading Animationなんて処理の軽いGifアニにしとけばいいのに、あえてこんなこったヤツにしたりして…
需要ないですね…。

Scroll X/Y Slider


【Demo】


これは少し実務でも使えるかもしれません。
スクロールバーをそのままSliderとして使用します。
でも、見た目が明らかにスクロールバーだから、分かりにくいよなー。やっぱ実務は無理だー。



the389.comでは面白いアイディアでアート作品みたいに作っているので一度見てみるといいですよ。
中でも「tenori」というのは、明らかに例の電子楽器っぽいですが、音出ますよー。