Parallax: how to make text scroll at different speed than bg

web
mobile

Topic: Parallax: how to make text scroll at different speed than bg

firstascent pro premium asked 11 months ago

Hello, I have a basic parallax working similar to your demo, what I'm trying to figure out now is how can I make the text on top of a background image scroll at a different speed than the background? 

For example, using some code from your demo, how would I make each text scroll at different speeds?

<div class="view jarallax" style="height: 100vh;">
<img class="jarallax-img" src="https://mdbootstrap.com/img/Photos/Others/img%20%2844%29.jpg" alt="">
<div class="mask rgba-blue-slight">
<div class="container flex-center text-center">
<div class="row mt-5">
<div class="col-md-12 col-xl-8 mx-auto wow fadeIn">
<h1 class="display-3 font-weight-bold mb-2 wow fadeInDown" data-wow-delay="0.3s">I want this to scroll fast over the background image</h1>
<h1 class="display-3 font-weight-bold mb-2 wow fadeInDown" data-wow-delay="0.3s">This text should scroll slower over the background image</h1>
</div>
</div>
</div>
</div>
</div>

Piotr Glejzer staff answered 11 months ago

Hi,

Do you mean to use data-speed? With that component is an only way to add more speed to your background image.

For example:

https://mdbootstrap.com/snippets/jquery/piotr-glejzer/152506

Best,

Piotr


firstascent pro premium answered 11 months ago

No not the background speed. I would like to have a couple text layers on top of the background image scroll at different speeds. Is this possible?


Piotr Glejzer staff commented 11 months ago

we are very sorry about that but with that parallax, you can only use this to images. And unfortunately, it will not work with text. Have a nice day.


Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: macbook pro
  • Browser: chrome and safari
  • OS: osx
  • Provided sample code: Yes
  • Provided link: No