Archive for the ‘html5’ Category

css3のanimationのヤツ

火曜日, 11月 8th, 2011

CSS3のアニメーションやってみた

webkitで

@-webkit-keyframes animation00 {
    from {-webkit-transform:scale(1,1) rotate(0deg);}
    50% {-webkit-transform:scale(2,2) rotate(180deg);}
    to {-webkit-transform:scale(1,1) rotate(360deg);}
}
div#back {
    -webkit-animation:animation00 5s linear 0 100 normal none;
}

書き方

@-webkit-keyframes キーフレームの名前 {
    from { /*スタート 初期値 アニメーションさせたいやつ*/ }
    25% { /*アニメーションさせたいやつ*/ }
    50% { /*アニメーションさせたいやつ*/ }
    75% { /*アニメーションさせたいやつ*/ }
    to { /*最後 アニメーションさせたいやつ んでfromに戻る*/ }
}
div {
    -webkit-animation: name duration timing-function delay iteration-count direction fill-mode;
}
/*
    name : キーフレーム名
    duration : 1アニメーションの時間（1秒なら 1s 0.5秒なら 0.5s）
    timing-function : linearとかeaseとかそんなの
    delay : 遅延時間（1秒なら 1s 0.5秒なら 0.5s）
    iteration-count : アニメートする回数
    direction : https://developer.mozilla.org/ja/CSS/animation-direction
    fill-mode : http://dev.w3.org/csswg/css3-animations/#the-animation-fill-mode-property-
*/

はい

http://www.takasumi-nagai.com/

Posted in html5 | コメントは受け付けていません。

history api

火曜日, 10月 11th, 2011

history apiのさわり

twitterとかでみるハッシュフラグメントURL（？）のやつ

とりあえずやってみた

html

<div id="content">index page</div>
<div id="main">
    <p><a href="#!/guide" title="guide">guide</a></p>
    <p><a href="#!/company" title="company">company</a></p>
    <p><a href="#!/products" title="products">products</a></p>
    <p><a href="#!/news" title="news">news</a></p>
    <p><a href="#!/contact" title="contact">contact</a></p>
    <p><a href="#!/member" title="member">member</a></p>
    <p><a href="#!/privacy" title="privacy">privacy</a></p>
</div>

JavaScript

window.onload = function(){
    var m = document.getElementById("main");
    var d = document.getElementById("content");
   
    addEvent(window,"popstate",changeContent);
   
    function changeContent(){
        switch(location.hash.split('#!/')[1])
        {
            case "guide":
            setElement(d,"ガイド");
            break;
            case "company":
            setElement(d,'会社');
            break;
            case "products":
            setElement(d,'製品');
            break;
            case "news":
            setElement(d,'ニュース');
            break;
            case "contact":
            setElement(d,'お問い合わせ');
            break;
            case "member":
            setElement(d,'メンバー');
            break;
            case "privacy":
            setElement(d,'プライバシー');
            break;
            default:
            setElement(d,'HISTORY API TEST');
            break;
        }
    }
}

function setElement(target,arg){
    document.title = arg;
    target.innerHTML = arg;
}

/**********************************************************
*   クロスドメイン用イベントリスナ登録関数
*   @param {String} target  ターゲットエレメント
*   @param {String} name    イベントタイプ
*   @param {String} fn      登録するイベント
***********************************************************/
function addEvent(target,type,fn){
    if(window.addEventListener){
        addEvent = function(target,type,fn){
            target.addEventListener(type,fn,false);
        }
    }else{
        addEvent = function(target,type,fn){
            target.attachEvent('on' + type, fn);
        }
    }
   
    addEvent(target,type,fn);
}

でとりあえずタイトル部分も変更できてる

popstate

はハッシュ値変更した場合に発火するのです。

登録したイベント内でハッシュ値から表示するエレメントだったりをわけたらいいんじゃないって感じで。

IEでうんともすんともならん…

IEのために

    //IE用
    if(navigator.userAgent.match(/MSIE/)){
        changeContent();
        var a = m.getElementsByTagName("a");
        for(var i = 0;i < a.length;i++){
            addEvent(a[i],"click",clickContent);
        }
    }
   
    function clickContent(evt){
        var arr = evt.srcElement.href.split('/');
        location.hash = '!/' + arr[arr.length - 1];
        changeContent();
    }

を追加して対応したらでけた

サンプル

Posted in html5, JS | コメントは受け付けていません。