you know something?

Use it for myself.

トップ > PC > ページ遷移は animation と keyframes で決まり！

ページ遷移は animation と keyframes で決まり！

PC

http://webgent.com/wp-content/uploads/sites/3/2013/11/a0002_011015_m.jpg

middleman の情報を集めていたら、こちら (Coiney Developer Blog) に行き当たり、ページ遷移のエフェクトに惚れ込んでしまいました。

ページを色々と覗かせていただいたところ、どうやらスクリプトではなく、CSS で実現しているようです。勉強不足でお恥ずかしい限りですが、当の animation と keyframes について諸々調べてみました。

どうやら、ベンダープレフィックスを必要とするようです。となれば、面倒極まりないので、Compass に頼ることになりますが、radius などと違ってモジュールが見当たりません。仕方ありませんので、下記サイトを参考に experimental を使って必要な記述を行なっていきます。

ここのポイントは下記の二つです。

  • ヘッダーとボディ別々にエフェクトを掛ける
    (その方がカッコ良さそうだからw)
  • mixin とした
    (エフェクトの有無をメディアクエリーで制御できる)
@mixin fadein {
    #fadein-body {
        @include experimental(animation-name,
            body, true, true, true, true, false, true);
        @include experimental(animation-duration,
            3s, true, true, true, true, false, true);
    }

header {
        @include experimental(animation-name,
            header, true, true, true, true, false, true);
        @include experimental(animation-duration,
            2s, true, true, true, true, false, true);
    }
}

さて、ここで問題なのが keyframes です。さすがの experimental も頭に @ が付く変態的なプレフィックスを生成できる訳もなく、せっかくの Compass なのに万事休す、と頭を抱えておりましたら、下記サイトのような救世主を発見しました。

なるほど、@content という新機能を使えば良いのですね。

(参考3)
Sass&CompassでPath風のメニューを作ってみた - teppeis blog

引数を渡して関数を呼び出しつつ、呼び出した側もコールした関数本体にインジェクションされてしまう、という、何とも変態的な様相を呈しておりますが、無事ベンダープレフィックスごとの記述が自動生成されました。

これならば、最低限の記述で、多くのエフェクトパターンを自動生成できますので、便利なこと、この上ありません。

@mixin keyframes($name) {
  @-moz-keyframes #{$name}     { @content }
  @-ms-keyframes #{$name}      { @content }
  @-o-keyframes #{$name}       { @content }
  @-webkit-keyframes #{$name}  { @content }
  @keyframes #{$name}          { @content }
}

@include keyframes(body) {
    0% {
        opacity: 0;
        -webkit-transform: translateX(-30px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

@include keyframes(header) {
    0% {
        opacity: 0;
        -webkit-transform: translateX(20px);
    }

    100% {
        opacity: 1;
        -webkit-transform: translateX(0);
    }
}

ということで、当ブログでは、メディアクエリーで PC 版のみ適用してみようと思います。

【追記】 旧ブログからの移行記事のため、本サイトには上記 CCS は指定しておりません。

© toomores_such