Streaming live at 10am (PST)

Background Image Parallax on Scroll


#1

I'm having trouble getting a background image parallax effect. I don't want parallax effects with cursor movement, but want slight movement of the background image behind the text. The images are currently set as the background for class "Section.Photo" and the text is under class "Lemon-Yellow-Sun." Is this effect achievable while using an image as the background for a section? Any help would be appreciated!

Preview link: https://preview.webflow.com/preview/thedetroitpopshop?preview=bdbe853031ba0fbe1993e0f170c06979


#2

You could put a scroll effect for when you get to that headline, which when scrolled into, affects the position of the Section.Photo, and change the position on scroll in and scroll out. That's about as close as you can get it in webflow for what you're looking to do I believe. Interested to see what other people come up with. smile


#3

I'm looking for a true background parallax, like on this site: http://themify.me/demo/themes/parallax/


#4

Gonna need some custom css on your background images, just adding the additional class should help, here's a great link/tutorial on how to achieve it.
http://keithclark.co.uk/articles/pure-css-parallax-websites/

I'm thinking if you have a fixed background layer, and then a 100% Width/Height div with a background layer within that which is maybe scrollable on overflow or something to that effect, you could achieve it. I'd have to play around with it.


#5

Still having trouble, though this CSS solution seems like it would be easiest to implement. Any tips on how exactly to implement this within webflow? I'm trying to use "Section.Photo.Locations" as the background and "Lemon-Yellow-Sun" as the foreground.


#6

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