Parallax issue

fellah pro asked 7 years ago

Hi, I’ve got an issue with parallax - the "layers effect" doesn't work.

Can you provide more detailed instructions how to enable parallax in angular app? The docs doesn’t say anything about installing the Jarallax. What I did so far (and didn’t help) is:

; in terminal
 npm install jarallax –save

// in .angular-cli.json
 "scripts": [
 "../node_modules/jarallax/dist/jarallax.min.js"
 ],

<!– in component
 <div class="view jarallax hm-black-strong" data-jarallax="{'speed':0.2}" style="background-image: url(some.jpg)">
 <div class="full-bg-img mask">
 <div class="container">
 …

Damian Gemza staff answered 7 years ago

Dear Fellah,
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


fellah pro commented 7 years ago

No, it doesn't work for me, despite I copied and pasted the exactly same code. Can you confirm and give me an example of working parallax? Do you have any demo app?

Damian Gemza staff commented 7 years ago

Dear fellah, For me everything is working fine with this code. Are you adding those scripts into your index.html file in head section? It's important to put those scripts there. Also which browser are you using? And which OS ?

Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: MDB Angular
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No