CSS と jQuery で作るスクロールにあわせて回転するロゴ
Tumblr のスタッフ Blog を見てたら、ロゴ （正確にはロゴの周囲の部分） がスクロールにあわせて回転してて、ちょっと面白かったのでサンプルを使って実際にどういう風に実装されているかを解説してみようと思います。 結構仕組みは簡単で、jQuery の scrollTop() を使ってスクロール位置を取得し、その値を CSS の transform プロパティに都度突っ込んでいくっていう感じ。ソースコード自体は数行で実装できます。 まずは実際に動作するサンプルを下記に。 スクロールにあわせて CSS で回転するロゴのサンプル 画面をスクロールすると、ロゴが回転すると思います。わかりやすいようにロゴはスクロールに対して位置固定しています。ロゴの内容は個人的趣味によるものですので深い意味はありません... わかる人にはわかると思う。 なお、サンプルは transform プロパティを使用し
HTML5 input type="range" で作る 「へぇボタン」
HTML5 で input 要素の type 属性として追加された 「range」 を使って、「へぇボタン」 を作ってみました。 HTML5 で input 要素の type 属性として追加された 「range」 は、数値を表す文字列をセットするための、スライダー形式やそれに準じた入力コントロールを作りますが、この input type="range" でちょっとしたお遊び。 昔の人気番組、「トリビアの泉」 でおなじみの、「へぇボタン」 を、input type="range" と CSS、簡単な JavaScript で作ってみました。完全な再現ではなくて、ボタンを押すと input type="range" で表示したスライダーの数値が上がるっていう、ちょっとだけ実用的 （？） なサンプルです。 実際のサンプルは下記に。 HTML5 input type="range" で作る へぇボ
Firefox OS 搭載の開発プレビュー端末が発売開始
Firefox OS を搭載した開発者向けのプレビュー端末、「Keon」 と 「Peak」 がスペインの Geeksphone から発売されました。 スペインの Geeksphone が、Mozilla が開発しているオープンソースのオペレーティングシステム 「Firefox OS」 を搭載した開発者向けスマートフォンを 2機種発売すると、今年に入ってから告知していましたが、このプレビュー端末が販売開始されたそうです。 世界で初めて販売開始された、Firefox OS 搭載端末ということになりますが、Firefox OS 自体がまだ開発中のため、この 2機種に搭載されているのもプレリリース版 Firefox OS。なので、一般ユーザー向けではなく、あくまで開発者向けってことになってます。 Discover the world of Firefox OS with Keon and Peak
HTC が無料で使えるクラウドストレージを容量 25GB に増強
TechCrunch 本家の記事なので、TechCrunch Japan でもすぐに掲載されると思いますが、台湾の携帯端末メーカー、HTC がスペイン、バルセロナで開催中の 「Mobile World Congress 2012」 にて、現在 Dropbox との提携で提供中のクラウドストレージサービスに関して、同イベントで公式発表された最新の HTC Oneシリーズでは無料で使用できる容量を大幅に増強する旨が発表されたそうです。 HTC's Answer To iCloud: A New Deal With Dropbox ： TechCrunch HTC says that those who buy an HTC One, the company's new flagship device, will get 25 gigabytes of storage free for two
CSS で作る Tumblr モバイルアプリ風メニュー
1年くらい前に 「CSS で作るスマートフォン向け片手操作メニュー」 って記事書いたんですが、同じようなのをまたやってみたので紹介。 Tumbler の Android アプリ （Tumblr for Android） の新規投稿の UI がカッコよかったんで、これを CSS と超簡単な JavaScript （jQuery 使用） で再現してみました。実際のサンプルは下記に。 CSS で作る Tumblr モバイルアプリ風メニュー サンプル 現在最新版の Firefox、Safari、Chrome では動くと思います。あと手持ちの iOS 6 Safari では動作確認しました。他のスマートフォンとか知らない。IE？ 一応、IE10 は問題なく動作します。IE9 だと動作はするけどアニメーションとかしないです。 元ネタを下記に貼っておきますね （画像は 「Tumblr Staff」 から
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
