パララックスと背景画像ズームを同時に実現したい

Question

ご閲覧いただきまして、ありがとうございます。

現在、Parallax.jpをつかって、パララックスを実装しています。

<div class="main_parallax" data-parallax="scroll" data-image-src="./assets/img/top_main_image.jpg" data-speed="0.6" data-position="center top">
</div>

それと同時に、こちらのサイトのあるようにパララックスしながら、背景画像が迫ってくるようなアニメーションを実装したいと考えています。しかし、 bcakground-imageなどを操作しながら、CSSのデザインを変更しようと試みたのですが、Parallax.jsが background-imageから読み込んでいるわけではないので、実装できず困っています。

もし、これらのやり方を実現する上でのベストプラクティスがございましたら、ご教示いただければと思います。

Answer 1

提示されたURLでは迫ってくるような演出は確認できず。ロード時に遠ざかっていくのは確認できました。
ロード時のアニメーションならただのtransformとtransitionですね。
これはクラスの付け外しで簡単に実装できます。

ロード時のキービジュアルのことでなく、Parallax.jsで再現出来ない部分なら、ライブラリに頼らず自分で書くのがベストプラクティスでしょうね。

Comments

[k10a]

ありがとうございます！いただいた内容でガンガン進めていきたいと思います！