CSS3 でスターウォーズを再現

phiary に引っ越しました. 毎日プログラミングやWebに関する情報を発信しています! RSS 登録してたまに覗いたり, tweet やハテブして拡散してもらえると幸いです.

Pocket

チャーンチャーーンチャンチャチャチャーンチャーンチャンチャチャチャーンチャンチャンチャチャーン♪♪

ってことで CSS3 でスターウォーズのあのシーンを再現してみました. Safari の専売特許だった perspective が, つい最近 Chrome でも使えるようになったので早速使ってみた次第です.

webkit のみ, つまり chrome と safari で動きます. あと音楽が流れるのでご注意ください.

SAMPLE And DATA

サンプルはこちらで見ることができます.

5秒ぐらい経つと音楽と共にしたからテキストが上がってきます. 内容はあの有名なジョブズの名スピーチとなっております.

データはここからダウンロードできます

CODE

コード全体です.

<!DOCTYPE html>

<html>
    <head>
        <meta charset="utf-8" />
        <title>Star Wars</title>
        
        <style>
        body {
            background: black;
        }
        /* 宇宙 */
        .universe {
            /* 3D設定 */
            -webkit-transform-style: preserve-3d;
            -webkit-perspective: 150;
        }
        /* コンテント(表示領域) */
        .content {
            width:640px;
            height: 480px;
            overflow: hidden;
            margin: 0px auto;
            
            -webkit-transform: translateZ(-100px) rotateX(30deg);
        }
        
        .text {
            color:yellow;
            font-size: 32px;
            text-align: center;
            
            -webkit-animation-name: play;
            -webkit-animation-duration: 100s;
            -webkit-animation-timing-function: linear;
        }
        
        @-webkit-keyframes play {
            0%   { -webkit-transform: translateY(  600px); }
            100% { -webkit-transform: translateY(-1200px); }
        }
        
        .star {
            width: 5px;
            height: 5px;
            position: absolute;
            background: -webkit-radial-gradient(50% 50%, ellipse contain, rgba(255, 255, 255, 1.0) 0%, rgba(255, 255, 255, 0.0) 100%);
            background: radial-gradient(50% 50%, ellipse contain, rgba(255, 255, 255, 1.0) 0%, rgba(255, 255, 255, 0.0) 100%);
        }
        
        </style>
        
        <script>
        // 音楽を流す
        var music = new Audio("./opening.mp3");
        music.play();
        
        window.onload = function()
        {
            // ベースとなるスターエレメントを生成
            var original_star = document.createElement("div");
            original_star.classList.add("star");
            // スターエレメントを複製して配置
            for (var i=0; i<64; ++i) {
                // 複製
                var star = original_star.cloneNode(true);
                // X軸, Y軸をスクリーンサイズの範囲でランダムな位置に配置
                var left = Math.floor( Math.random()*window.innerWidth );
                var top  = Math.floor( Math.random()*window.innerHeight);
                star.style.left = left + "px";
                star.style.top  = top  + "px";
                // サイズをランダムに設定(2.0 ~ 12.0)
                var size = Math.floor( Math.random()*10 ) + 2.0;
                star.style.width = star.style.height = size + "px";
                // back クラスの子供としてセット
                document.getElementsByClassName("back")[0].appendChild(star);
            }
            
            // music.volume = 0.25;
        }
        </script>
        
    </head>
    
    <body>
        <div class="universe">
            
            <div class="content">
                
                <div class="text">
                    <p>
                        Stanford Report, June 14, 2005
                    </p>
                    
                    <p>
                        'You've got to find what you love,' Jobs says
                    </p>
                    
                    <p>
                        I am honored to be with you today at your commencement from one of the finest universities in the world.
                        I never graduated from college.
                        Truth be told, this is the closest I've ever gotten to a college graduation.
                        Today I want to tell you three stories from my life.
                        That's it. No big deal. Just three stories.
                    </p>
                    <p>
                        The first story is about connecting the dots.
                    </p>
                    <p>
                        I dropped out of Reed College after the first 6 months, but then stayed around as a drop-in for another 18 months or so before I really quit. So why did I drop out?
                    </p>
                    <p>
                        It started before I was born.
                        My biological mother was a young, unwed college graduate student, and she decided to put me up for adoption.
                        She felt very strongly that I should be adopted by college graduates, so everything was all set for me to be adopted at birth by a lawyer and his wife.
                        Except that when I popped out they decided at the last minute that they really wanted a girl.
                        So my parents, who were on a waiting list, got a call in the middle of the night asking:"We have an unexpected baby boy; do you want him?"
                        They said: "Of course."
                        My biological mother later found out that my mother had never graduated from college and that my father had never graduated from high school.
                        She refused to sign the final adoption papers.
                        She only relented a few months later when my parents promised that I would someday go to college.
                    </p>
                </div>
                
            </div>
            
            <div class="back">
            </div>
            
        </div>
    </body>
</html>

POINT

perspective プロパティで奥行き感を出そう!

perspective に整数値を設定することで奥行き感を出すことができます. 値は深度値になるので値が大きければ大きいほど奥行き感は緩くなっていきます.

/* 宇宙 */
.universe {
    /* 3D設定 */
    -webkit-transform-style: preserve-3d;
    -webkit-perspective: 150;
}

transform でカメラ設定しよう!

テキストの親要素である content 要素に transform を適応させることでカメラのような設定ができます. ただ, ここで気をつけなければいきないのは全体が逆方向に動くということです. content 要素に X軸方向に 30度回転させると世界は -30 度回転します.

まぁこの辺の話を詳しくするとゲームプログラミングの範囲になっちゃうので適当に設定してみて良い感じになればおkって感じで聞き流してください.

今回は下記のような設定にして全体が斜めに見えるようにしています.

/* コンテント(表示領域) */
.content {
    width:640px;
    height: 480px;
    overflow: hidden;
    margin: 0px auto;
    
    -webkit-transform: translateZ(-100px) rotateX(30deg);
}

今回のキモ. animation と transform でテキストを下から上に流そう!

お馴染みの animation プロパティです. 今回の設定では 100秒かけて下から上にテキストを流すように設定しています.

.text {
    color:yellow;
    font-size: 32px;
    text-align: center;
    
    -webkit-animation-name: play;
    -webkit-animation-duration: 100s;
    -webkit-animation-timing-function: linear;
}

@-webkit-keyframes play {
    0%   { -webkit-transform: translateY(  600px); }
    100% { -webkit-transform: translateY(-1200px); }
}

ちょっとしたお飾り. 背景に星を表示しよう!

これはオプションです. 背景に点々を表示するだけでだいぶ見栄えが変わります.

CSS と JavaScript を組み合わせて表現しています. やっていることは 前回作った「CSS3 とほんのちょっとの JavaScript で雪を降らす」と同じなので そちらを参照してください.

以上, ざっくりとした解説でしたー.

参考にしたサイトはこちら. 見た目で参考にさせて頂きました.

CSS3 のスターウォーズの表現については, 外間かおりさんの書かれた, 魅せるスマートフォンサイトを実現!CSS3アニメーション・ブック for iPhone & Android を参考にさせて頂きました. CSS3 の参考書がまだまだ少ない中, ひと通り CSS3 でやれることはまとめてくれているので要チェックです!!

蛇足ですが, ジョブズのスピーチはこちらです.

今回作ったのは, 最近作った中で1番気に入ってるかも♪

TRACK BACK URL

POST COMMENT

メールアドレスが公開されることはありません。

COMMENT