skrollr.js でSVG maskアニメーションをしようとした時のメモ

skrollr.js

• モバイル端末の場合、ネイティブスクロールを殺し、#skrollr-body 要素の中身をtransform させている仕組み
• よって #skrollr-body 要素でコンテンツをラップすることが必要

Android native browser

• SVG mask要素を認識しない。clipPath要素はOK
• scrollr.jsを入れると、フリックできなくなる

References

• https://github.com/Prinzhorn/skrollr
• http://prinzhorn.github.io/skrollr/examples/path.html
• https://developer.mozilla.org/ja/docs/Web/SVG/Tutorial/Clipping_and_masking
• http://www.hcn.zaq.ne.jp/___/SVG11-2nd/masking.html
• http://thewebstorebyg.wordpress.com/2013/12/29/cross-browser-svg-masking-supports-ie8-ie9-ie10-firefox-chrome/