ページ遷移は animation と keyframes で決まり!
middleman の情報を集めていたら、こちら (Coiney Developer Blog) に行き当たり、ページ遷移のエフェクトに惚れ込んでしまいました。
ページを色々と覗かせていただいたところ、どうやらスクリプトではなく、CSS で実現しているようです。勉強不足でお恥ずかしい限りですが、当の animation と keyframes について諸々調べてみました。
どうやら、ベンダープレフィックスを必要とするようです。となれば、面倒極まりないので、Compass に頼ることになりますが、radius などと違ってモジュールが見当たりません。仕方ありませんので、下記サイトを参考に experimental を使って必要な記述を行なっていきます。
- (参考1)
[Sass] Compass CSS3-animations snipets & mixin | WebTecNote - (参考2)
Shared CSS3 Utilities | Compass Documentation
ここのポイントは下記の二つです。
- ヘッダーとボディ別々にエフェクトを掛ける
(その方がカッコ良さそうだから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 は指定しておりません。