Hi All,
Just visited www.extreme-e.com and in particular the page KANGERLUSSUAQ - Extreme E - The Electric Odyssey which has horizontal parallax scrolling which I kinda like.
I do note, however, that (at least in Chrome), the scrolling on this one appears to go belly-up when you narrow the window width for smaller devices!
@Norm / everyone, can this be done in Blocs? Any help/advice appreciated!
Since Blocs wraps everything in a div called .page-container (only when rendered in preview/export)
You could apply a flex to this class with no wrap, and each bloc set to full screen,
Maybe be a bit of tweaking with overflow, but I would say its very doable to create a horizontally scrolling website.
EDIT: Did a quick experiment. (it would obviously take a lot more work than this, including something to manage the scroll direction of the mouse and transform styles / parallax).
Sorry, I can’t help with your question, but wow, that site has some great parallax action going on.
Hi @PeteSharp,
Thanks for your reply, video, and advice. Will try this out as soon as I find the time… it certainly gives a site a different twist, and one I’m keen to try.
I previously created a horizontal-scrolling site (pre-Blocs) using a pre-coded html template, but I’ll admit that was a battle before I got there!
Achieving something similar in blocs looks like it would be a lot more straighforward.
Thanks again!
Hi @Reg,
No problem re. help, but yes, the site I mentioned is definitely worth a visit, and I can’t wait to see the Extreme-e action… some very spectacular locations!
Hi @PeteSharp,
I finally found some time today to get into following your helpful video here. While I have followed what you have shown (and checked I haven’t missed anything), when I preview the four blocs I’ve created, they are all squeezed up horizontally (at all breakpoints) so that all four show together, so there’s no scrolling…
Note that I had to create the class “page-container”.
The only thing I did notice in the video is that you have a class “setwidth” applied to each bloc, which I presume stops your blocs from squeezing up, and thus scrolling horizontally as intended. I created a class by the same name, set the bloc width to “100%”, and applied it to all my blocs, but still they’re squeezing up left-to-right…
Any chance you could advise where I’m going wrong with this please?
Thanks for any assistance.
Hi again,
If at first you don’t succeed… After a little more messing around, I got this going OK.
So for anyone else out there following this thread, here’s how I did it…
As the screenshots here, I added “Scroll” to the Overflow option in the “page-container” class (which fixed the lack of scrolling problem), and amended my “setwidth” class to set the Min bloc width to “100%” (which sorted the width of the blocs).
So all the basics now kinda mastered (thanks to @PeteSharp)…
I only have one final question on this (for now…) In the example site I first mentioned, (KANGERLUSSUAQ - Extreme E - The Electric Odyssey) scrolling left and right, AND up and down with the mouse achieves the horizontal scrolling. In my attempt, only scrolling left and right activates the scrolling. Is it possible to activate the horizontal scrolling in Blocs with left/right AND up/down mouse movement?
As always, thanks for any assistance…
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.
That’s using ScrollMagic by the looks of it.
Now that would take Blocs to a whole new level. 
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!
Don’t use ScrollMagic.
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.
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.
