I tried to experiment with that for creating “faster scroll” effect, but its end up with pretty crazy solution LOL:
make scaling settings negative (-0.8 for example) but using background image which is flipped upside down by itself.
If you will want to do this - try But I didn’t post this solution because it is kinda “too much tweak”.
This is a great tutorial, followed along very easily thank you!
It’s not a major problem, but would there way to solve the issue of when the desktop window is resized? i.e, the background image distorts on a smaller screen rather than staying relative to the screen size.
I’ve played with VW / VH settings but I can’t figure a way to keep the image from “squashing up”.
The thing I’m hoping to move up and down is a little car icon (Car Down_Nav) that will seem to move up and down the road on the left of the screen. Thanks for any advice you can give!
Jason
Is it possible to do this without using a background image?
I am able to create a simple parallax with a background image but I don’t want to use an image in my hero. I just want the rest of the page to slide up over my hero. Can you explain to me how to achieve this?
Just make your hero section position: fixed and section next after that give top margin equal to a hero section height. And of course, don’t forget about z-indexes
This is absolutely wonderful so thank you sabanna for the fantastic work there. Was just looking at this kind of effect on a site and they had done it with pure CSS too and had a tutorial for it too :
Your method seems to be a lot simpler (which I really really like ) as I much prefer simple over complicated any day!!
I was just wondering though if someone could possibly take a look at a quick example I put together to test this all out?
It is working but when I apply the 0.8 scale to the image the DIV that it is in scales down and so isn’t any longer starting from the top of the section container that it is in. If you don’t know what I mean by that then if you take off that scaling then you’ll see what happens to the div with the image in it.
Just wondering what step I’ve missed as would really love to use this but can’t seem to figure out what I’ve done wrong. In my defence it is very late here and I should probably be getting some sleep and looking at it with fresh eyes but you know how it goes, you come across a fantastic effect that someone has created (thanks again sabanna!!) and just want to try it out there and then!
Anyway, any help with this would be greatly appreciated.
Thank you for this step by step. I have some sections with the “simple parallax” effect currently and really just need a solution for mobile. Will these transformations happen on mobile?
Edit: Upon further testing, this transformation does not work on mobile. Any reason why this would be?
Actually, @161creativedesign for “Simple parallax” you can just use image with position: fixedyou will just have to adjust z-index. Content have to have z-index higher than that image.
Thank you for your continued support. I have studied this example and while I can achieve this effect on desktop browsers (works rather wells across many different browsers), I still cannot achieve this affect on mobile. It’s my understanding, like you said that these browsers don’t render the “background:fixed” attribute but I have seen nesting a div inside of the section and applying “fixed” styling to the nested div rather than the background element, as suggested here.
Does this sound like a work around? (referring to @cyberdave comment halfway down the thread)
On a side note, the more complex versions of parallax shown above now do not work on firefox and edge browsers. Does anyone know why? I believe they worked before.
Hello, I’m writing from 2018! does anyone know if something changed and now I can create a parallax effect that looks good on mobile devices? I did some tests but I can not get it. Thank you very much!