SOLVED Add Parallax effect, with overlay opacity to any custom div?
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
-
I wonder if it’s easy to add a parallax effect with overlay opacity to any div (in a custom html module or articles)
I know it’s not a RocketTheme typical problem, but it will be cool, as some RT templates use Parallax) to know how to acheive that? - Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
-
You will need to integrate something like this:
pixelcog.github.io/parallax.js/
or this
getuikit.com/docs/parallax.html - Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
-
Thanks Damir fot the links.
If I look at ISOTOPE. (Maybe I should post this on the ISTOPE forum?) you are using “enllax.js”
In this case the JS is already loaded in the template. I was wondering how to use this onboard Parallax JS and use it custom content
I take that code from a Parallax section i ISOTOPE
<section data-enllax-type="background" data-enllax-ratio="0.3"
Do you think, in a custom html content (Module. article...) if I use...
<div id="mycustomparallaxdiv" data-enllax-type="background" data-enllax-ratio="0.3"> Watever content here </div>
and CSS my background for that div, it will work ?
that enllax.js will be available for that content (template wide available), even if no Parallax section is used or I will have to load it? - Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
-
-
- Damir
- Preeminent Rocketeer
- Posts: 22450
- Thanks: 2679
- Web Developer
- Yes that will work i think try it let me know the URL where you doing this so i can look how it works ...
- Available for CUSTOM WORK with Joomla, WordPress and Grav Templates and Gantry Framework!
-
-
-
- Patrick Toulze
- Elite Rocketeer
- Posts: 1810
- Thanks: 18
- Marketing - Web Designer
-
Working Perfectly with isotope
I put it in a “P”
neuro.grafcomm.ca/en/test
Bottom of the page
100% blue header with text —> Whatever content here - With Parallax Effect - Graphic Designer - Marketing -Web Sites — Trying to become a decent human being.
www.grafcomm.ca
-
Time to create page: 0.047 seconds