jqueryとか勉強会 | Home | 宇宙兄弟
2011/07/14 0:56 | 印刷

この前参加したswapskillsで、yahoo!の中の方が、yahoo!のモバイルページのトランジッションはcss3を使って実装しているというお話を聞いたので、見よう見まねでサンプルを作ってみましたよ。というお話です。 ・・・はい。さっそくdemoを。

DEMO

IEでは動かないと思いますので、chromeとかfirefoxとかでご覧ください。

細かいところまで作り込んでいないので、やはりjquery mobileと比べると若干見劣りしますが、このサンプル実は画像やjava scriptを一切使っておりません。
css3だけでここまでの表現ができるというのは素晴らしいですね。

では、簡単に解説を。

ボタン

ボタン部分は、aタグをブロック化して、背景色をグラデーションで表現し、角丸にしています。
あと、テキストに影もつけました。

     display:block;
     border: #d9d9d9 1px solid;
     background: -moz-linear-gradient(top, #242426, #5b5b60);
     background: -webkit-gradient(linear, center top, center bottom, from(#242426), to(#5b5b60));
     color:#fff;
     text-shadow: 1px 1px 3px #000;
     border-radius: 13px;
     -webkit-border-radius: 13px;
     -moz-border-radius: 13px;

ページ遷移

html側で、

<div id="i1" class="page">

</div>

というブロックが、1ページとなります。
今回は3ページ分用意しましたので、それぞれを横に並ぶようにして表示されていない部分はウインドウの外にくるようにしてあります。

ページ遷移は、transitionでアニメーションの所要時間をしていして、translateXで移動させています。

/* アニメーション */
.page { 
	-webkit-transition: 0.8s;
	-moz-transition: 0.8s;
	-o-transition: 0.8s;
}
 
/* ページ遷移 */
#a1:target .page { 
	-webkit-transform: translateX(-100%);
	-moz-transform: translateX(-100%);
	-o-transform: translateX(-100%);
}
#a2:target .page {
	-webkit-transform: translateX(-200%);
	-moz-transform: translateX(-200%);
	-o-transform: translateX(-200%);
}
#a3:target .page {
	-webkit-transform: translateX(-300%);
	-moz-transform: translateX(-300%);
	-o-transform: translateX(-300%);
}

で、:targetという擬似クラスでハッシュが変わった時に、該当するページが表示されるようにページが動くという仕組みになってます。

jquery mobileと比べると、動きは滑らかじゃないかと思います。
ただ、jquery mobileのように別ページでのページ遷移などはできませんし、UIも自分で作らないといけないのでちょっとめんどくさいですね。

まだまだ、検証が足りませんが、ライブラリに依存しないというのは魅力的かもしれません。

via:Pure CSS Slideshow

CSSのほうがオーバーヘッドが無いような気がしていいです。またスクリプトからUI効果の部分が無くなればソースの見通しも良くなるのでCSSによる視覚効果は歓迎なんですが、問題はここでもやはりIEのようですね。
そうですね。メリット、デメリットをきちんと検証して、使えるレベルまでもっていきたいです。まー、IEは・・・モバイル用ということでばっさりと。。
はじめまして!いつも楽しく拝見しています。

CSS3面白いですね!
私も今色々とCSS3を学んでいます。

ところでYahoo!やLivedoorのメニュー一覧等を押した際に、下からせり出してくるようなUIありますよね。

あれもやはりCSS3なんでしょうか。
あれと同じものに挑戦してるんですが…なかなか上手くいきません…!

もし良かったら、そのUIについての記事を書いて頂けないでしょうか?

宜しくお願い致します!
>hanaさん
コメントありがとうございます。
Livedoorのメニュですね。これ・・・どうやるんだろ?
このエントリーの方法を応用してもできそうですね。
他には、java scriptとか?

ちょっと調べてまた記事書いてみますね。
ちなみにお急ぎです・・・?
お返事ありがとうございます!
多分、JavaScriptをトリガーにしてるんだと思うんですよね…。色々やってみましたが上手くいかないです…。

急ぎではないので、お暇な時で大丈夫です!
是非記事にまとめて頂けると助かります!

コメント追加

タイトル
名前
E-mail
Webサイト
本文
情報保存 する  しない
  • 情報保存をすると次回からお名前等を入力する手間が省けます。
  • E-mailは公開されません - このエントリーの新規コメント通知が必要なら記入します。