はてなダイアリーでCSS3を使ったフォトギャラリーのプロトタイプ

hatena css3

既に作っている人がいるかなと思ったけど、前にjQuery使ってスライドショーを作った時に「CSS3だけで作れたらはてなダイアリーでも使えるのか」と思ったので軽く練習してみた。



HTMLはこんな感じ。

<div id="galleries">
    <a href="#" tabindex="1">1</a>
    <div class="gallery">
        <img src="http://distillery.s3.amazonaws.com/media/2010/10/30/8b9c34670730483d939b1a2536caa32c_7.jpg">
    </div>

    <a href="#" tabindex="2">2</a>
    <div class="gallery">
        <img src="http://distillery.s3.amazonaws.com/media/2010/11/07/f0db122599a945fa97688c0c2bddb5aa_7.jpg">
    </div>

    <a href="#" tabindex="3">3</a>
    <div class="gallery">
        <img src="http://distillery.s3.amazonaws.com/media/2010/11/07/bcc95cfa0c054d2a959431f831fc86d5_7.jpg">
    </div>

    <a href="#" tabindex="4">4</a>
    <div class="gallery">
        <img src="http://distillery.s3.amazonaws.com/media/2010/11/07/6dc11a22ae654d9998dae27e5d96cf6b_7.jpg">
    </div>

    <a href="#" tabindex="5">5</a>
    <div class="gallery">
        <img src="http://distillery.s3.amazonaws.com/media/2010/11/23/d0125eb513004857b0209f02eeb67a17_7.jpg">
    </div>
</div>

div#galleriesで囲んであげて、画像移動のためために使うaタグと表示する画像を囲むdiv.galleryを配置。




続いてCSS。

        div#galleries {
            height: 620px; /* これなくてもいいんだけどリンクがクリックできないので */
        }
        div#galleries > div.gallery {
            left: 0;
            position: absolute;
        }
        div#galleries > div.gallery > img {
            -webkit-transform: scale(0.3, 0.3);
            -webkit-transition: all 0.5s ease;
            -webkit-box-shadow: 0px 0px 20px black;

            -moz-transform: scale(0.3, 0.3);
            -moz-transition: all 0.5s ease;
            -moz-box-shadow: 0px 0px 20px black;

            -o-transform: scale(0.3, 0.3);
            -o-transition: all 0.5s ease;
            box-shadow: 0px 0px 20px black;

            opacity: 0;
        }
        div#galleries > a {
            margin: 0 10px;
        }
        /* TABでhover または focusすることでimgを大きくする */
        div#galleries > a:hover + div.gallery > img,
        div#galleries > a:focus + div.gallery > img {
            -webkit-transform: scale(1, 1);

            -moz-transform: scale(1, 1);

            -o-transform: scale(1, 1);

            opacity: 1;
        }

元々は画像をどんどん横にスライドしていく動きを作りたかったのだけど「ある位置からある位置へ」の移動しかできないため断念。
なので、その場で画像が切り替わる動きにするためにdiv.galleryをposition:absoluteにし、
全ての画像を一カ所に重ねてあげた。
で、画像を重ねてるのがわからないようにimgをopacity:0で透明化。



画像の切り替わりの時に大きくなる動きを付けたかったのでtransformで小さくし、
そのアニメーションは0.5秒で動くようにtransitionを設定。
あとはギャラリーっぽくなるように画像に影。
webkitだけとりあえず書いたのだけど、それぞれのブラウザで動くようにwebkit以外も追加。



あとはaタグにhoverまたはfocusが来たらtransformを使って画像を元の画像の大きさに戻しつつ、透明化も外してあげればいい。



スライドショーのように横に移動できなかった時点で作るモチベーションが下がってしまった。
CSS3を上手く使えばできるのかなぁ。
あとはリンクを画像のサムネイルにするとか、そういうのも色々考えたのだけど冗長でimgタグを書かなくてはならない感じがして一旦やめた。
これも元あるimgタグから無理やり取って来れたらいいなぁと思ったのだけど。
最終的にはてなダイアリーで動くCSS3だけのプレゼンツールを作りたくて始めたものの、そういう事情もあって面倒になってしまった。






最後に実際のデモ。下の1から5のリンクにTABで移動、もしくはマウスオーバーすると画像が出てきます。
cssの>が&gt;に書き変わったり、htmlの改行にpタグが入ったりするので上のソースとは少し変えてあります。
Safariが一番奇麗にアニメーションする。Google Chromeだとカクカク。
Operaは影の付くタイミングが一瞬遅い。Firefoxはtransitionが効かないのでアニメーションにならない。
IEは確認してないけど多分おかしなことになってると思う。