Parallax frustrations

X theme is amazing but the parallax feature is such a source of frustration. There is very little (no) documentation that gives straight forward instruction on how to make this work. I followed the instructions in this post but I still can’t get parallax to work without using custom css.

If there is an easy tutorial out there, please point me in that direction. In the mean time, my major frustrations are:

  1. The image quality display is poor, despite the file size.
  2. Loading times are slow, probably due to my large file sizes because I am trying to display crisp images. Is there a recommended image size?
  3. Parallax images will not load on any mobile devices. No phones, no ipads.

Can someone tell me what I am doing wrong? Thank you!

http://test.wildintelligence.org/wp/

Hey @katehodges,

  1. What is the resolution of your image and what monitor are you viewing from? Basically, your image resolution must exceed your monitor resolution because the parallax feature zooms the image to 150% out of the box. If your using the same image resolution as your monitor resolution, your image will be somewhat pixelated.

  2. You must use image compression. For more details, please see the Image Compression section in our Performance article.

  3. Parallax is disabled in mobile devices due to performance reasons.

Regretfully, there is no other tutorial and you will need to use custom CSS for alternative parallax behavior.

So help me out. I created this page as a demo:
http://test.wildintelligence.org/wp/test/

I inserted 3 sections with images as the background lower layer. In all of those sections, the image size is 1500 x 1125

I set the padding to 18% top and bottom for each image. I clicked the background parallax - lower layer box with the lower layer size set at the default of 150%.

I am getting no parallax action. Please tell me what I am doing wrong.

I have another website using the older version of X theme and the parallax function seems much for straight forward.

Hi There,

I can confirm the issue on when testing on my end. Could you please provide us with your WordPress credentials in a secure note to check this issue further.

Before that, please make sure to disable your third party plugins and test this issue to see if you’re experiencing a plugin conflict.

Thanks!

Just sent you access via secure note. I do want to confirm that I turned off all the plugins except cornerstone and the parallax function still did not work.

Thank you for your help.

Hi There,

Please send the details Via secure note so that other staff member can see and help you instead of waiting for the staff member to whom you have sent the private message.
We are a distributed team working around the clock.

Thanks

Hi there,

I checked and parallax is properly working. I din’t noticed it first but it’s working. The movement is not too visible because of the size. Try increasing the Parallax’s Lower Layer Size to about 200% and above, the 100% is almost equal to the size of the same image. The idea is, it should be bigger than the container itself (image overflowing the container so it can move behind).

Thanks!

I did get the movement I desired through adjusting the lower layer size to 300%. Now the images are all jumpy and glitchy when I scroll the page. I checked on multiple devices and it looks glitchy on all of them. Like I said previously, I have the older version of the x theme on another website and everything looks great. What do I have to do to get the same effect on this website. Here is my other site: http://www.deepsouthstocker.org/

Hi,

I can see you are using smooth scroll plugin, try to adjust the step and scroll speed to achieve a smooth scroll.

Thanks

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.