1. MDB Home Page
  2. Support Main Page
  3. MDB Angular
Topic: MDB Angular Parallax

mmarulli pro asked 6 years ago

Hello, I am trying to setup parallax for MDB Angular but I am not sure how / where to set up the speed. I followed the tutorials / demos but my pictures are static. In the demos I was able to find it looks like the jarallax plugin is being used and I am not sure that should also be the case for MDB Angular… data-jarallax=\\\'{“speed”: 0.2}’ found here: https://mdbootstrap.com/angular/sections/intros/#v-4. Also the live demo for Angular at this link https://mdbootstrap.com/angular/css/parallax/ seems to be using the jarallax plugin.thanks!Marco

Damian Gemza staff answered 6 years ago

Dear aotero, Please try to use this code in your component.html file: 
<div class="view intro jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url(https://mdbootstrap.com/img/Photos/Others/img%20%2844%29.jpg); background-attachment: fixed; height: 1200px;">

<div class="full-bg-img mask rgba-white-light">

<div class="container">

<div class="d-flex align-items-center d-flex justify-content-center"style="height: 1200px">

<div class="row mt-5">

<div class="col-md-12 wow fadeIn mb-3">

<div class="intro-info-content text-center">

<h1 class="display-1 mb-2 wow fadeInDown"data-wow-delay="0.3s">CARLA <aclass="indigo-text font-bold">SMITH</a></h1>

<h5 class="font-up mb-3 mt-1 font-bold wow fadeIn"data-wow-delay="0.4s">Web developer & graphic designer</h5>

<a class="btn btn-light-blue btn-lg wow fadeIn waves-light"mdbWavesEffectdata-wow-delay="0.4s">portfolio</a>

<a class="btn btn-indigo btn-lg wow fadeIn waves-light"mdbWavesEffectdata-wow-delay="0.4s">About me</a></div>

</div>

</div>

</div>

</div>

</div>

</div>

<di vclass="container">

<!--Grid row-->

<di vclass="row">

<!--Grid column-->

<div class="col-md-12 text-center mb-5">

<h1 class="font-bold light-blue-text my-5">Lorem ipsum dolor sit amet, consectetur quis elit.</h1>

<p align="justify">Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.</p>

</div>

<!--Grid column-->

</div>

<!--Grid row-->

</div>

<div class="view intro jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url(https://mdbootstrap.com/img/Photos/Others/food2.jpg); background-attachment: fixed; background-size: cover; min-height: 700px">

<div class="full-bg-img mask rgba-pink-slight">

</div>

</div>

<div class="view intro jarallax" data-jarallax='{"speed": 0.2}' style="background-image: url(https://mdbootstrap.com/img/Photos/Others/background.jpg); background-attachment: fixed; min-height: 700px">

<div class="full-bg-img mask rgba-purple-slight">

<div class="container">

<div class="d-flex align-items-center d-flex justify-content-center"style="height: 700px">

<div class="row mt-5">

<div class="col-md-12 wow fadeIn mb-3">

<div class="intro-info-content text-center">

<h1 class="display-1 white-text mb-2 wow fadeInDown"data-wow-delay="0.3s">Welcome on my page!</h1>

<h4 class="mb-3 mt-1 white-text font-bold wow fadeIn"data-wow-delay="0.4s">Lorem ipsum dolor sit amet</h4>

<a class="btn btn-pink wow fadeIn waves-light"mdbWavesEffectdata-wow-delay="0.4s">Read more</a>

</div>

</div>

</div>

</div>

</div>

</div>

</div>

<div class="container">

<!--Grid row-->

<div class="row">

<!--Grid column-->

<div class="col-md-12 text-center my-5">

<h1 class="font-bold pink-text mb-5">Lorem ipsum dolor sit amet, consectetur quis elit.</h1>

<p align="justify">Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.Lorem ipsum dolor sit amet, consectetur quis elit. Perspiciatis commodi porro, cumque provident rem corporis odit, ut quas dolores maxime nesciunt possimus quis, soluta velit debitis amet, veritatis cupiditate reprehenderit.</p>

</div>

<!--Grid column-->

</div>

<!--Grid row-->

</div>
Then add those links in your index.html file: 
<!-- Jarallax -->

<script src="https://unpkg.com/jarallax@1.10/dist/jarallax.min.js"></script>

<!-- Include it if you want to use Video parallax -->

<script src="https://unpkg.com/jarallax@1.10/dist/jarallax-video.min.js"></script>

<!-- Include it if you want to parallax any element -->

<script src="https://unpkg.com/jarallax@1.10/dist/jarallax-element.min.js"></script>
After that, your parallax should work fine. The key here is to provide your parallax a data-parallax attributes. We'll add this to our docs. Best Regards, Damian

aotero pro commented 5 years ago

Yes, that's what I did, and it works. But what i meant is that doing that you are using a external js library to do something you are selling as an mdb pro feature. That code you just put ther get any function or feature from your own code? Or it just do the trick to do a parallax with jarallax js? Because what we supossed get with pro version is an integrated feature for do the parallax, that do the work just putting for example a div with a data-parallax attributes, or maybe a concrete class... Just like you suppose to show in your example in https://mdbootstrap.com/angular/css/parallax/

Damian Gemza staff commented 5 years ago

Dear aotero, We'll do our best, to provide parallax plugins to our library. Best Regards, Damian

Damian Gemza staff answered 6 years ago

Guys, Could you try to use jQuery code from this site: https://mdbootstrap.com/css/bootstrap-parallax/, and add jarallax scripts in your main index.html file in head ?: 
<!-- Jarallax -->

<script src="https://unpkg.com/jarallax@1.10/dist/jarallax.min.js"></script>

<!-- Include it if you want to use Video parallax -->

<script src="https://unpkg.com/jarallax@1.10/dist/jarallax-video.min.js"></script>

<!-- Include it if you want to parallax any element -->

<script src="https://unpkg.com/jarallax@1.10/dist/jarallax-element.min.js"></script>
Let me know if this works to you. Best Regards, Damian

Andy pro commented 6 years ago

That worked - thanks!

aotero pro commented 6 years ago

That worked for me too but it's anoying have pursached pro version and have to doing things with jquery and external stuff. I have the same problem, I copy exacly the code from https://mdbootstrap.com/angular/css/parallax/ but it doesn't work, the images are static. Maybe are something related to having to put an speed option or something like that, we haven't any live demo where looking for errors, the example given are using jarallax, not the code we are using from the angular version in the link given before.

mmarulli pro answered 6 years ago

Hello Damian, no, the moving effect on the text is working fine. I am talking about the moving effect on the pictures as you scroll down the page. https://mdbootstrap.com/live/_MDB/index/docs/parallax/index.html here you can see it on the mountain picture as well as on the fruit. How do I achieve that with MDB Angular. It looks like that with jquery and the jarallax plugin you do it by setting this: data-jarallax='{"speed": 0.2}' thanks marco

Andy pro commented 6 years ago

Hi I am having the same issues; animation of the text is fine (using the wow lib), but I cannot get the background image to scroll per the example. Please advise! Kind regards Andy

Damian Gemza staff commented 6 years ago

Dear Andy, Could you describe me your problem wider? Which example are you using? Expected and actual behavior please. Best Regards, Damian

Andy pro commented 6 years ago

I used the example code ( https://mdbootstrap.com/angular/css/parallax/ ) -- all works fine other than the background images don't scroll like they do in the example ( https://mdbootstrap.com/live/_MDB/index/docs/parallax/index.html ). This would appear to be the lack of any analogy in the angular version to the jarallax class and related html data input ( data-jarallax="{"speed"=0.2}" ) in the example which contains the jarallax.js script.

Damian Gemza staff commented 6 years ago

Andy, please try this link: https://github.com/nk-o/jarallax . Here's Jarallax. Try to install it and use in your app. If this won't work, let me know, and in future we'll take a deeper look on this. Best Regards, Damian

Damian Gemza staff answered 6 years ago

Hello, Dear mmarulli, what do you want to animate? Texts or ? If you want to animate an text, you have to follow instructions from https://mdbootstrap.com/angular/css/animations/ . If i understanded you wrong, please inform me what do you want to achieve. Best Regards, Damian
Write
Create snippet
Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status

Specification of the issue
  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: Yes
Tags
About author
mmarulli
Pro User 10Support score
2Questions 1Answers 0Snippets