Date

2017.04.15

Category

cssプログラミング

Tags

cssだけでパララックス効果を実装する

Javascriptだるい

ので、cssだけでパララックス効果を実装してみます

サンプル


ニュルッって感じのスクロールはJavascriptがないとどうしても実装できません

Github -> https://github.com/reizou05/css-parallax/tree/master

コード

解説

perspectiveとtranslateZ

perspectiveプロパティは、要素に「transform」効果を適用する際に、その奥行きの深さを指定できます
translateZプロパティは、Z軸での距離を指定することができます

scale

translateZとperspectiveで画面の奥の方に追いやった画像たちをtransform:scaleでいい感じに拡大すると、擬似的にパララックス効果が生まれるというわけです。

あとはフィーリングで

文章を書くのが難しいのであとはフィーリングでがんばってください。

RELATED POSTS

PROFILE

my icon

@reizou05
日本の高校生で趣味は筋トレ
tento.techという学生プログラマー集団の長をやっています。
WEB系のお仕事をください。

AD