Streaming live at 10am (PST)

Horizontally Scrolling Websites - 2 different plugins


#1

Hello Webflowers,

I've been playing around with two different plugins to create a horizontally scrolling website - horizontalScroll.js and jInvertScroll

I haven't mobile optimised them - I think I'll just abandon the horizontal scroll for mobile and keep it vertical as fidgeting around with the content would be a nightmare. They both work across chrome, firefox and IE9.

horizontalScroll.js
Here's the horizontalScroll.js sample site - you can see that when you scroll, it scrolls one full page/section - http://wildflower-pictures-h2.webflow.io/

jInvertScroll
Here's the jInvertScroll sample site - you can see that when you scroll on this site, it scrolls by how much you've turned the scroll-wheel/trackpad - http://wildflower-pictures-h.webflow.io/

If you'd like access to see how it was achieved, just ask and I'll post the webflow share link


#2

It looks great! Sometimes it was not wanting to scroll though. Not really sure what was causing the glitch. Im using Chrome. I am not using a mouse though, I am using the mac trackpad


#3

Was it the horizontalScroll.js one that wasn't scrolling properly - the one that scrolls full sections at a time?

i've adjusted one of the timeout settings of the plugin - i think it's working a little better now - http://wildflower-pictures-h2.webflow.io/10


#4

@Diarmuid_Sexton would love the share link to see how you are achieving this with the plugins. I like the one page section snap to scroll.

thanks
Jer


#5

@Diarmuid_Sexton Super great. I really would love to see how you did it both. Thanks


#6

This is great! :smiley:
Im very interested in the jInvertScroll.

Would love a walkthrough or sharelink :slight_smile:


#7

Hey @krubens,

Here you are - https://preview.webflow.com/preview/wildflower-pictures-h?preview=79d5b262f2e4d7596424a416573986eb

If you've any questions, just ask!


#8

Thank you :slight_smile:

I couldn´t find the code when I inspected the site and im not so good at this, but do your code look something like this?

$.jInvertScroll(['.section'], {
width: '100vw', // Page width (auto or int value)
height: '100vh', // Page height (the shorter, the faster the scroll)
}
});

And is it put in the Custom Code area end of <head> tag?


#9

Hi, sorry about the delay in getting back to you.

The custom code is site-wide so it's in the site settings so it doesn't show in the preview. However, I've copied it over now and you'll see it in the custom header and footer code of the home page.

Any more questions, just ask!

Best of luck


Horizontal Slide on Scroll
'horizontalScroll.js' Conflicts With iX2's Scroll Into View
#10

Updated links


Horizontal Scroll-Full
Here's the horizontalScroll.js sample site - you can see that when you scroll, it scrolls one full page/section

Website http://horizontal-scroll-full.webflow.io/
Webflow Showcase (cloneable) https://webflow.com/website/horizontal-scroll-full


Horizontal Scroll-Partial
Here's the jInvertScroll sample site - you can see that when you scroll on this site, it scrolls by how much you've turned the scroll-wheel/trackpad

Website http://horizontal-scroll-partial.webflow.io/
Webflow Showcase (cloneable) https://webflow.com/website/horizontal-scroll-partial


#11

thanks for this @Diarmuid_Sexton


#12