水曜日の筋パネラ

筋トレが好きでプログラミングな日本の高校生

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

time 2017/04/15

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

Javascriptだるい

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

サンプル


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

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

コード

解説

perspectiveとtranslateZ

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

scale

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

あとはフィーリングで

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

down

コメントする




筆者プロフィール


@reizou05

日本の高校生です

趣味 : 筋トレ、クライミング

tento.techという中高生プログラマー集団の長やってます。

このブログは超不定期更新です

お仕事ください