Horizontal parallax scrolling... can this be done in Blocs?

Back again…

Next, I added a background photo to one of the blocs, and selected “Parallax”. If I alter the class to vertical scrolling, it works OK, but with the class set to horizontal scrolling (which is what I want), the photo does not show at all (white background shows instead!)… neither in Blocs’ preview, or with “View in browser”.

Anyone have any ideas on how to fix this one? @Norm?

All assistance appreciated…

Ops. I forgot to show the width 100% in the video. That’s what I did have set also.

Parallax is setup for vertical scroll. You will have to code up your own version here.

Hi @PeteSharp,

Thanks for this. However, the reason I’m using Blocs (apart from it’s wonderful!) is that I’m no coder, so this is where I hit the proverbial brick wall.

Will have to take a look at the coding of my “example” site and see if I can make any sense of it… unless anyone else can help with this.

Meantime, thanks for your assistance.

Unfortunately, No code can’t cover every possibility.

Blocs, especially 4 is excellent and flexible, but there is always going to be designs that will require a coded solution. Smaller stuff usually finds help for free on the forum, but more complex things people should consider outsourcing. If people are building commercially they should factor this into their pricing.

I’m generally speaking here.

Blocs 4 is using Universal Parallax, which is a js project you can find on GitHub. I’m not sure if there is horizontal options as part of it. You would have to check it out.

Hi again @PeteSharp,

I’ll take a look at GitHub and see what I can find, thanks.

For now, this is a “let’s see if I can do this” kind of project. I previously put together a horizontal scrolling site in Dreamweaver using and adapting an HTML template and its CSS files, and having seen the new extreme-e.com site, I’ve been interested to take another look at horizontal scrolling.

As I may have a little more free time in the coming week, I’ll experiment further with this and see where it takes me. Meantime, thanks for all your tips and advice. All appreciated.

1 Like

CodePen has some good example:

Hi @KBConcepts

Thanks for your suggestion. I will log in and look there.

Best wishes.

That’s using ScrollMagic by the looks of it.

Now that would take Blocs to a whole new level. :smile:

Hi @PeteSharp,

I just might be able to do something with this one! Thanks for the pointer!

Hi @KBConcepts,

I agree. Vertical parallax already works in Blocs, so why not for horizontal scrolling too?

I think this would be a good, and hopefully not too complicated addition for Blocs. Perhaps one for @Norm to consider? I’d certainly put this on my wish list!

:stop_sign: Don’t use ScrollMagic.

:white_check_mark: Use ScrollTrigger instead.

SM uses GSAP, but GreenSock has released their own ScrollTrigger. ScrollTrigger is less code and easier to use, more performant, more features, actively maintained, fully supported by its developers and forum community.

3 Likes

Hi @Blocs_User,

Will go find this and check it out. I see there’s a YouTube video too:

… easy learning!

Thanks for the info.

1 Like

You’re welcome @Hawkeye

In regards to GSAP, it’s a rather big undertaking to implement just certain aspects of GSAP into a UI. Though a few have done it such as Pinegrow Interactions and Semplice Animations as a few examples.

GreenSock is immensely versatile and powerful regarding what it can allow a person to animate and accomplish. So much so that you can barely scratch the surface when trying to build a UI around its features and abilities. :wink:

I agree with @Blocs_User, I wouldn’t use ScrollMagic either.

Hello everybody,

do you think it is possible to set horizzontal scrolling only for the home?

Hi @cristian,

As the horizontal scrolling is achieved by applying a class, I’m pretty sure that you can have your other pages scrolling “normally” by simply NOT applying that class.

Perhaps someone more expert than me (@PeteSharp, perhaps?) could confirm this?

Hi Hawkeye, thanks for your response. I think who is a little more complex, because the added class is part of the base code classes. and therefore I don’t know if it is possible to apply it to one page rather than another. Anyone have any ideas?

Hi @Hawkeye, Horizontal scroll without any fancy styling 100% made with Blocs! :upside_down_face:

https://toukorek.com/video/scroll.mp4

4 Likes

Hi @Jerry, video doen’t work