Get Hero background to use parallax

Support
#1

Hey I have a quick question. I was trying to get our hero background to act similar to the header background image of this site: http://hyperdonkey.com/

I can’t get our background image to move with the mouse and turning on parallax using slider revolution doesn’t seem to do anything for full page hero images: http://dev.valeonetworks.com/

Is there any way to have the hero image move as you move the mouse?

Thanks!
Ryan

#2

Hi Ryan,

Thank you for reaching out to us. You can do this with Revolution Slider, here’s an example of a slider that uses a same effect https://revolution.themepunch.com/wordpress-duotone-effect-add-on/ you can achieve this by following this guide https://www.themepunch.com/revslider-doc/parallax-3d/

Hope this helps!

#3

Hey Nabeel,

So thats actually what I referenced to set it up. The weird thing is that the parallax setting that does it on scroll works fine but the one that we want that goes off of your mouse position like in your example doesn’t do anything. Any idea if something could be blocking it?

#4

Hi Ryan,

I’m checking the source code of the slider and parallax is there and it also changes, which means it works but not just noticeable. Would you mind providing your admin login credentials so I could verify what setting you applied?

Thanks!

#5

Ya it’s really weird the sliding feature works but not the mouse movement feature.

Let me know if you have any luck.

Thanks!

#6

Hello Ryan,

I noticed an odd behaviour of the slider and it parallax effect. I added this css code code X > Theme Options > Custom CSS:

.tp-bgimg.defaultimg.walden {
    background-attachment: fixed;
}

Please check your site now.

#7

I just checked the site and don’t notice any changes. Is the Main Page slider on the landing page background moving around when you move your mouse? On my end nothing moves when I move my mouse.

#8

Hello Ryan,

Yes there are movements on the parallax image on my end. How big is your screen? The parallax is noticeable in larger screens. I am on a 1920x1200 screen size. Please try to resize your browser to a bigger size by stretching around the edges and see how it goes.

Kindly let us know how it goes.

#9

I’m on 3840x1600 but I have resized to test in smaller sizes as well. The vertical parallax when you scroll works fine but nothing happens when you physically move the mouse around. I tested from other computers/browsers and still nothing.

To clarify when you move the mouse pointer from left to right, the background image should shift from left to right. Is that the behavior you’re seeing?

Thanks for looking at this!

#10

Hi Ryan,

Nel was referring to parallax trigged by scroll for background image. For further clarification, which slider of that page should have that parallax layer effect? That CSS is applied to the second slider of that page.

Thanks!

#11

Sorry I didn’t catch this reply. Yes the scrolling background works fine, it was the mouse move event that wasn’t doing anything. I was trying to get it to work for the first slider, the hero image of the stars right when you pull up the site.

Thanks

#12

Hi Ryan,

You did not enable the 3D option in the Slider Settings, please clear your browser’s cache and check your slider now. You just need to properly configure the 3D settings because it’s kind of too strong currently.

See the section 2. [3D] of this article. Parallax & 3D

I think this looks best if you let your background as static, then add some layers that will do the Parallax 3D effect

Layer Parallax / 3D Settings

Hope it helps,
Cheers!

#13

Hey Friech,

Thanks, I guess I was looking for something that just moved the background on a 2d plane instead of the 3d twisting it’s doing but it’s fine. I think the scrolling parallax probably looks better anyway.

Before we close this topic, do you know why the scrolling parallax is not working on the other two sliders on the home page? I have the settings identical to the slider at the top of the page that is now working.

Also, do you know of a way to limit the height for those two additional sliders that aren’t working? For example, no more than 300 px are seen of the picture and then the pictures just slides in that 300px window as you scroll.

#14

Hello Ryan,

Thanks for updating the thread.

I checked the website on my end and image is moving along with mouse scroll. Can you please share a screencast as it how it’s working on your end?

Thanks.

#15

The first image does yes, but the second two images further down the page of the astronauts do not move for some reason. Any idea what would be preventing it?

#16

Hello Ryan,

Please add a text element or a heading text in each of the slider so that the background will have a basis where it scrolls behind to the text layers.

Hope this helps.

#17

I have added this and it only moves the text. The picture doesn’t move on the astronaut placeholder picture.

Also, any idea on my other question?

“Do you know of a way to limit the height for those two additional sliders that aren’t working? For example, no more than 300 px are seen of the picture and then the pictures just slides in that 300px window as you scroll.” Basically I want to set a static ‘canvas side’ for the sliders.

#18

Hi Ryan,

You need to enable the parallax to the background image and not to your layer.
I went ahead and set it.

For the height, you can set it here

For more information, please review the links below

https://www.themepunch.com/revslider-doc/slider-setup/#layers-grid-size
https://www.themepunch.com/revslider-doc/parallax-3d/

Thanks

#19

Oh perfect, thats exactly what I was looking for.

Thanks,
Ryan

#20

You’re most welcome Ryan! :slight_smile: