I applied the CSS class "has-parallax" to an image, but the parallax is apparent only on the upper edge, not the lower. I didn't write a caption for the image.
Why is that? Is it because I didn't wrote a caption?
// Create scrollmagic scene var parallaxScene = new ScrollMagic.Scene({ triggerElement: this, // <-- Use this to select current element triggerHook: 1, duration:$thisHeight }) .setTween(parallax) .addTo(controller);
if ($("body").hasClass("smooth-scroll")) { scrollbar.addListener(() => { parallaxScene.refresh() }); } });
I applied the CSS class "has-parallax" to an image, but the parallax is apparent only on the upper edge, not the lower. I didn't write a caption for the image.
Why is that? Is it because I didn't wrote a caption?
Hi Alan,
what exactly is the page that has the parallax image?
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio
The page is a "portfolio" page
If, for example, it's about the 'No Traffic ' image here:
http://alancohenxp.com/index.php/hervin_portfolio/notraffic/
the parallax effect applies to the whole image or is it about the mobile devices (including the lower edge)
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio
It is in that page, the image attached here. You can see it has parallax only in the upper edge.
Hi Alan,
plz go to /js/scripts.js find line 607
and replace from line 607 to 630 with this:
$(".has-parallax").each( function () {
var $this = $(this);
var $thisHeight = window.innerHeight*2;
var bg = $this.find("img"); // Add tweenmax for backgroundParallax
var parallax = TweenMax.fromTo( bg, 1, {y: '-20%'}, {y: '20%', ease:Linear.easeNone});
// Create scrollmagic scene var parallaxScene = new ScrollMagic.Scene({ triggerElement: this, // <-- Use this to select current element triggerHook: 1, duration:$thisHeight }) .setTween(parallax) .addTo(controller);
if ($("body").hasClass("smooth-scroll")) { scrollbar.addListener(() => { parallaxScene.refresh() }); } });
Hard refresh the page afterwards (Ctrl+F5)
Thank you.
Clapat Support
Review Envato Item Support Policy
Follow us!
https://www.clapat.com/
https://www.facebook.com/clapat.ro
https://www.instagram.com/clapat.themes/
https://x.com/clapatdesign
https://www.linkedin.com/company/clapatstudio
https://www.tiktok.com/@clapatstudio