Rails Assets に skrollr-stylesheets 追加しました #JavaScript

はじめに

スクロールでアニメーションさせたり、パララックスさせるときに
書き方も簡単で、スマートフォンで動くし、プラグインいれてIE8でも動くskrollr使ってます。

ただアニメーションの設定を下記のようにhtmlに書いていくので、
簡単だけど、次第にhtmlが混沌としてきます。

<div data-0="background-color:rgba(0,0,255,0.5);" data-500="background-color:rgba(255,0,0,0.5);">WOOOT</div>

そこで、cssに設定を移行できるskrollr-stylesheetsを使ってsassにアニメーションの設定を記述してくことにしました。

skrollr-stylesheets使うと下記のようにsassに書けます。
(cssの書き方は本家みてみてください)

$about_section_begin: 0
$about_section_duration: 500
$about_section_end: $about_section_begin + $about_section_duration
@-skrollr-keyframes animation1
  skrollr-#{$about_section_begin}
    background-color: rgba(0, 0, 255, 0.5)
  skrollr-#{$about_section_end}
    background-color: rgba(255, 0, 0, 0.5)

これでいままで大変だったデザイン変更の配置換えにも楽に対応できますよね。

Rails Assets 使ってますか？

話がぶっ飛びますが、フロントエンドの開発は個人的にMiddlemanが好きで使ってます。(slim sass coffee rails-assets compass or bourbon 縛りが好きなので Go やPHPでバックエンド作るときにもフロント側はmiddlemanで作るのが楽で好きです。とってもいいプロトタイピングツールですよね。)

nodeやbowerの設定せずに、gem installするだけでjavascriptのライブラリをrubyのwebアプリケーションプロジェクトでいい感じに設定してくれるRails Assetsを使うのが好きです。

Railsのプロジェクトでは使う人が多いと思いますが、Rails Assets という名前でも、Rails のフロントエンド側のライブラリをほぼ持ってきたようなMiddlemanでももちろん使えるので、静的ページ作るときにも便利です。

Rails Assets に skrollr-stylesheets 登録しました

そんなこんなで、Rails Assets で skrollr-stylesheets 使おうとしたら、

登録されてない

それで Rails Assets に登録したんで、誰も登録してないし、せっかくだからqiitaに書き込もうと思って今に至るわけです。

Rails Assetsで「skrollr」で検索すれば出てくるので、みんな使ってね。

こんな感じで使えます

需要があるか分かりませんが、いちおう以下Middlemanでの簡単な設定の例を載せときます。
(カジュアルな感じで、ベストプラクティスではないので、あしからず)
Railsでもほとんど同じです(ファイル名やGemfileの設定は適宜読み替えてください)。

Gemfile の設定

Gemfileの source 'http://rubygems.org' の次に下記を追加

source 'https://rails-assets.org'

Gemfileの一番下に下記を追加(バージョンの書き方は各々好きにしてください)

gem 'rails-assets-skrollr', '~> 0.6.29', :require => false
gem 'rails-assets-skrollr-stylesheets', '~> 1.0.0', :require => false

bundle install する

いつもの bundle install する

jsの設定

jsファイル source/javascripts/all.js に下記を追記

//= require skrollr
//= require skrollr-stylesheets/src/skrollr.stylesheets
var s = skrollr.init();

layout の設定

レイアウト source/layouts/layout.slim のheadタグの中にある下記の all.js の記述を body タグの直前に移動する
(下記はslimでの記述なのでerbやhamlの人は適宜読み替えてください)

/ 下記の記述を body タグ内の最後尾に移動する
== javascript_include_tag  "all"

以上です。
あとはファイル構成を変えたり、ファイルを分割したりして、
css や sass にアニメーションの設定を書いてグリグリ動かしましょう。

追記 build 時にminify する場合の注意

skrollr-stylesheetsを使って、実際にmiddleman build してリリースする際に注意する点があったので、記載します。

使用したsassはsass-3.4.12になります。

注意するのは下記のように`config.rbにcssのminifyの設定を入れている場合です。

  activate :minify_css

minifyでうまくいかない例

rgb出力する場合

skrollrでカラーをコントロールする場合、
rgbを使うので、sassで強制的にrgb表示させるために
下記のように記述することがあると思います。

background-color: #{"rgba(44, 54, 146, 1)"}
color: #{"rgb(255, 255, 255) "}

上記のsassをcssでminifyして出力させると、
下記のように出力されてうまくアニメーションしなくなります。

background-color:#2c3692;
color:#fff;

easingを使う場合

下記のようにeasingを指定していると

opacity#{"[swing]"}: 0

syntax error になってしまいます

(sass):84: Invalid CSS after "    opacity": expected ":", was "[swing]: 0; }" (Sass::SyntaxError)

とりあえずの解決方法

そこで自分の場合は下記のようにstylesheets/skrollr/index.css.sassにskrollr-stylesheetsの設定を入れている場合には下記のようにminifyの対象外にしています。

  activate :minify_css, ignore: 'skrollr/index'

minifyしなければ下記のようにそのまま出力されました。

build前

    background-color: #{"rgba(44, 54, 146, 1)"}
    color: #{"rgb(255, 255, 255) "}
    opacity#{"[swing]"}: 0

build後

    background-color: rgba(44, 54, 146, 1);
    color: rgb(255, 255, 255) ;
    opacity[swing]: 0;