THE MOLITOR FORUMS » Topic: Parallax background effect on tablets and mobile

THE MOLITOR on "Parallax background effect on tablets and mobile"

THE MOLITOR — Tue, 25 Feb 2014 13:05:00 +0000

I really appreciate that! :-)

Best,

Chris

hsandell on "Parallax background effect on tablets and mobile"

hsandell — Tue, 25 Feb 2014 12:51:00 +0000

Will do. Your templates are very well designed.
-Henrik

THE MOLITOR on "Parallax background effect on tablets and mobile"

THE MOLITOR — Tue, 25 Feb 2014 11:02:01 +0000

You bet! :-)

If you're enjoying the theme, PLEASE don't forget to rate it on your downloads page on ThemeForest. Positive ratings REALLY help me out.

Thanks!

Chris

hsandell on "Parallax background effect on tablets and mobile"

hsandell — Tue, 25 Feb 2014 10:28:48 +0000

Thanks, Chris. I rolled back to the original code. We're all set with this.

-Henrik

THE MOLITOR on "Parallax background effect on tablets and mobile"

THE MOLITOR — Tue, 25 Feb 2014 10:26:30 +0000

Hi there,

I believe this may be an iOS limitation. Changing the value to fixed works in Safari, but iOS doesn't handle fixed elements the same way. To my knowledge, the effect you're trying to achieve may not work on iOS.

Sorry I can't be more help here.

Best,

Chris

hsandell on "Parallax background effect on tablets and mobile"

hsandell — Mon, 24 Feb 2014 14:00:21 +0000

Sorry, no, it did not make any difference at all. Exactly the same behavior aftre taking out those lines.
-Henrik

THE MOLITOR on "Parallax background effect on tablets and mobile"

THE MOLITOR — Mon, 24 Feb 2014 13:54:02 +0000

Hi there,

Try removing lines 36-41 shown above. Let me know if that helps.

Best,

Chris

hsandell on "Parallax background effect on tablets and mobile"

hsandell — Mon, 24 Feb 2014 12:54:57 +0000

Chris,

I made the change, but it did not have the hoped for behavior. Instead of staying fixed in the background, the background image spread across the three pages, and then scrolled with the foreground. My Android phone kept the old behavior, with correctly sized background scrolling with the foreground.

I'll leave the site like this for a few hours, if you want to take a look. Obviously, you'll need to use an iPad or iPhone to see the problem.

-Henrik

THE MOLITOR on "Parallax background effect on tablets and mobile"

THE MOLITOR — Mon, 24 Feb 2014 10:08:52 +0000

Hi there,

Yes, this is by design. You can control the background behavior by opening custom.js and locating the following on lines 36-41...

////////////////
//iOS / SAFARI BACKGROUND IMAGE FIX
////////////////
if(iPadiPhone || safariBrowser == 'true'){
	panel.css({backgroundAttachment: "scroll"});
}

Try adjusting "scroll" to "fixed".

Let me know if that works for you.

Best,

Chris

hsandell on "Parallax background effect on tablets and mobile"

hsandell — Fri, 21 Feb 2014 15:39:01 +0000

We used Panels for our new site, http://bostonassociates.com, and it looks really nice on all platforms. It is very simple, just three vertical panels. The background is the same, except blurred on all panels after the first, to make it easier to read the text. When moving through the menu items or scrolling, the background image gradually shifts to the blurred version, but does not move as the content flows.

On iPads, iPhones and Android phones, the parallax background effect is not active. The background scrolls with the page content, instead of the content flowing with the background staying put. Is this as designed, or a bug? (On a computer, the parallax effect works, for any size window.)