タグ

ブックマーク / lopan.jp (1)

  • パララックス

    JavaScriptでパララックスな表現をする場合には、要素ごとにスクロールスピードを変えることで、視差効果を生み出していますが、CSSではtransformの3D表現を使って、要素を実際に画面の手前と奥に配置することで、パララックスを表現できます:)。 パララックスの作り方 ドロワーメニューの時と同じコンテンツを使って、下図のような感じに、手前から、アイキャッチ画像、ヘッダーナビ、リンクボタン、タイトルの順になるように、要素を手前に移動させてみます。 各要素を手前に移動させる 要素を手前へ移動させるにはtransformプロパティのtranslateZ()を使います。 それから親要素には、奥行きを決めるためのperspectiveプロパティを指定します。ここではbody要素に、perspective: 200pxと指定して、200px離れたところから見てる感じにしてみました。 奥行きの基

    パララックス
  • 1