Add Block: Parallax Image

[mapk]

Stemming from the Image Block, I'm mocking up a concept for a Parallax Image Block. The background image would move at a different transition speed than the rest of the page when scrolling.

Not sure how detailed we want to go with this (allowing users to manipulate speed, etc.), so I kept it basic for now.

Empty Block

Neutral

Selected UI

Add Caption UI

I've included a video to get an idea of how this might work.
https://cldup.com/M3sp6ADiLK.m4v

A few unknowns...

1. Will the image always be full bleed for a parallax block?
2. Should we include text overlay? If so, should it scroll like the rest of the page, or do something similar to the video example where it fades out, and scrolls differently?
3. I'm struggling with an icon to represent this block, and selected one that I thought might work, but am up for suggestions.

[rileybrook]

I like this idea, and regarding:

3. I'm struggling with an icon to represent this block, and selected one that I thought might work, but am up for suggestions.

Since a parallax image is an offshoot of a regular image, it could be useful to demonstrate this to the user through the icon that is used. This could be done by designing a Parallax icon that is an alternate version of the image icon, showing the user they are still adding an image.

A potential problem could be users correlating arrows in the icon with the block mover tool. That said, combining your icon (arrows) and the image icon could be interesting.

[jasmussen]

🎉

Love it! Mockups are on point!

I was previously waffling on whether "Parallax" should be a separate block from Image, or whether it should just be a toggle you could apply to any image. But the video you recorded really drives home the uniqueness of this, and I think people are going to love having it as a separate thing in the inserter.

Question: should it be different from the Hero Image/Cover Image, though? (#487) That block already uses some fixed-position magic. Perhaps it's the same block as that, but parallax being a different option for the background positioning. CC: @georgeh

[karmatosed]

Interesting @mapk, parallax to me is more a different option for position than a separate block, like you suggest @jasmussen.

[jasmussen]

Want to add that I kindly asked for Marks help in imagining a parallax image block to get us closer to a decision on whether or not it's a separate block or not. Still not sure, but the mockups are very helpful!

[karmatosed]

One ponder with this is mobile and actually the theme itself. Not a hurdle, more how we can add parallax into those circumstances.

[jasmussen]

One ponder with this is mobile and actually the theme itself. Not a hurdle, more how we can add parallax into those circumstances.

Yes, that's going to be a challenge indeed. https//me.sh uses 3D CSS horizontally for parallax. It's performant, nice, and JS free. But that can't ever work properly on iOS because then the rubberbanding effect and momentum scrolling has to be disabled. So it probably has to be JS parallaxing if need be, so we could probably marry that with both the editor block and the frontend rendition also.

[melchoyce]

IMO, I think it makes more sense for Parallax to be a setting on Hero Image blocks. It seems like it would otherwise be identical.

[georgeh]

I'm inclined to agree with @melchoyce - although I don't know if it makes sense at anything other than full-width. I'll try it out with the other hero image configurations and see

[mtias]

@jasmussen can we close this with the "Cover Image" block merged? It needs a bit of work still, but it should be done in separate issues.

[jasmussen]

Closing in favor of #1476