I almost need a step by step on how to add a parallax image to my site. I do understand that a parallax image is static and locked. I’d like to know some of the steps involved. Let’s say you have a hero image at the top of site with navigation.
Then I add a parallax image below it. That image shows through. Then I’d add an image to top layer just below the parallax image.
I’m practicing with solid colours at the moment to get a feel of positioning. I think I’m missing something simple because I’m getting some free spaces between the hero image and the parallax image.
This is my first go at parallax and I think if I had rulers it’d be helpful.
What are some of the processes that folks are using to avoid some pitfalls.
I know I have to add considerable overlap of top layer to parallax images.
It’s fall in Canada, and it’s time to dig in and really learn some advance processes. Thanks all.
-Bill
hey Bill,
Usually parallaxes have a objective in mind - to convey movement.
I do think (and i’m pretty sure Steve Krug said something about this) its overwhelming to have a enormous hero and a parallax directly beneath it. Are you prototyping your ideas before getting them into Sparkle?
Its good to see balance and movement this way. The biggest square at the mid bottom of this prototype would be a great parallax, for example.
Correct. I prototype. Let me re phrase. Let’s say you have a parallax image on your page as suggested. How would you gauge how far down you’d need that image without any kind of rulers. Without bumping things out of the way.
Take a look at https://sparkleapp.com/. At the bottom of the page behind “World Class Support” there is a parallax image. How did they place that image without changing the image already on the page.
My problem is when I add a parallax image, it’s shifting some of my other images up. Can’t figure it. I started a thread a while ago…
BUT … I was popping a parallax after a hero banner.
I think my workflow should be placing a parallax first in the prototype, then adding my images around the parallax.
I’m doing a few things as practice at the moment, just rectangles with gradients and textures.
I’m also learning what Mac does with images, as opposed to a Windows program stretch image. Here www.northeastspca.org all the pages have a stretch function for headers.
In a sense I’m taking my images principles from one Windows program, and trying to duplicate in Sparkle. But I digress.