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
https://www.clapat.com/
Review Envato Item Support Policy
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
https://www.clapat.com/
Review Envato Item Support Policy
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
https://www.clapat.com/
Review Envato Item Support Policy