[CSS] Pure CSS Parallax Websites – CSSだけで実現するパララックススクロール
CSSだけで実装できるパララックススクロール。2014年に書かれて15年に追記されたようなのでそれほど新しい記事ではないけれど、こんな手法もあるんやなー思ったので紹介。transform: translateZを使ってZ軸方向にオブジェクトを移動させてパララックススクロールさせているようです。これなら対応ブラウザの条件さえクリアすれば、わりとサクっと導入できそうです。
Tag Archives: ParallaxScroll
[Web Template] Beetle – Responsive HTML Template – レスポンシブレイアウト＆パララックススクロールなHTML5テンプレート
レスポンシブ・レイアウトで、かつパララックス・スクロールにも対応したHTML5テンプレート。需要の多いこの2つに対応しているってのはなかなかナイスです。静的なHTMLテンプレートは無料で、Wordpressテーマとなっているものは48ドル（今現在）で販売されています。またマップのパーソナライズや、グリッドレイアウト、カルーセル（イメージスライダー）にも対応しているので、モダンなコンテンツ表示手法にはひと通り対応しているという印象。なかなかイイんじゃないでしょうかこれ。
[Web Design] Pure CSS parallax scrolling websites – JSを使わないパララックススクロール
Javascriptを使わない、Pure CSSなパララックススクロールの手法が紹介されてます。コードを見るとtransform: translateZ()を使って、ブロック要素をZ軸にズラしているようですが、細かい事は実際に導入してみないと分かりませんね。対象ブラウザはFirefox, Safari, Opera, Chromeとの事なので、ウンコIEさえ無視する事ができれば導入の敷居も低そうです。CSSだけでパララックススクロールの動きを作れるというのはなかなかナイスですな。