June 14, 2013 at 6:20 am #24800
On the theme demo site, there is a cool parallax effect on THIS PAGE (about half way down the page). I uploaded the demo content to my install but this parallax effect isn’t included on the same page of the demo content… Can you please explain how this effect was created on the demo site? Would love to do something similar. Thanks in advance!
BradJune 14, 2013 at 7:36 am #124774
Edit a page and set it to No sidebar.
On Advance Layout Builder > Layout Element, insert the Color Section element. Upload an image with 1500x1000px size, actual image size on the demo.
Background Image Position: Center Center
Background Repeat: Stretch to fit
Background Attachment: Fixed
IsmaelJune 17, 2013 at 5:38 am #124775
As this page is not included in the demo content, can you give a little more detail? Like, what slider are you using with the transparent background? It doesn’t appear that the padding is easily adjusted to open the image to say 450px.June 17, 2013 at 5:43 am #124776
I actually create that exact effect in the video here: https://vimeo.com/channels/aviathemes/64927358 (its about 2 minutes in).
That should help show you exactly how to set it up.
DevinAugust 18, 2013 at 3:17 am #124777
Managed to get it to work fine, thanks for the video.
But there are a few issues:
-Doesn’t appear in Chrome. Just blank white, but works in FF and Safari. (I tried this on multiple machines)
-On my iPad in both Chrome and Safari it is just a fixed image strip showing that particular spot of the background image.
Any possible solutions.August 18, 2013 at 3:21 am #124778August 18, 2013 at 4:26 am #124779
I’m not really sure how to proceed. The video is the best example that we could possibly provide as if you follow the steps exactly you get the correct result.
The only thing that could be causing that not to happen would be if your theme version is out of date, a plugin conflict or the theme files have been corrupted.
So if you are using 1.9.1+ and on WordPress 3.6 you can try re-downloading the theme and then re-installing which just re-installs the theme files. Additionally, double check that you’ve followed each step as it is just as simple as adding a fixed image to a color section for that specific effect.
The topic ‘How-to: Parallax effect on "Team" page’ is closed to new replies.