Streaming live at 10am (PST)

Smooth horizontal scrolling


#1

Hi there,

this is my first week ever designing a website and I can't figure out how to scroll horizontally like in this example: http://www.pentagram.com (multiple rows) or this http://www.aim-architecture.com/all-projects/ (single row).

Most of the templates work amazingly scrolling vertically by default, then adapting the width to every screen in a responsive way. But how about the opposite? I think this is quite a traditional, non-responsive web design solution. But since my design is a combination of responsive and non-responsive, I have been trying to use the different webflow tools, so far unsuccesfully.

I have been trying to customize the webflow native slider without any success since all the images jump from one to another when clicking the arrows. The point would be a smoother transition between pictures just by scrolling with the mouse.

Another idea was to have infinite columns (as much as items to display), keeping a fixed size for every picture, then let the browser swipe from left-right.

I can imagine this requires some more advanced knowledge or is it possible to do it with the current tools?

Anyway, thanks in advance if somebody has any suggestion. This forum is really useful and you guys really excel


#2

Hi @franz If you inspect the code at http://www.normacordova.com/ you will see that they use Lists and they put images in each list item. enter code here

<ul class="gallery">
  <li class="photo"> image </li>
  <li class="photo"> image </li>
  <li class="photo"> image </li>
</ul>

They set a very long width like 42000px on the "gallery" class for the ul element (so it doesn't wrap the List items). Each list item is fluid (fits to the contents inside if it's an image).

Then to make it responsive make the "gallery" class (or whatever you want to call it) have a width "auto" on tablet. Then you can make the list items have 100% width.

Try that and let us know if it works!

Btw: horizontal scrolling is generally bad for usability. Try to create a design that makes it obvious that it's horizontal scroll like this: http://www.clholloway.co.za/


Link to Anchor not working in horizontal scrolling. Any Reason?
#3

It works but can't scroll using the mouse wheel... Anyway since I don't have enough experience with coding and I really don't want to make it complicated, I decided to change my design following your advice


#4

You would have to scroll to the right, not down, with this type of setup. There should be a way to switch it the scrolling behavior using some javascript so it scrolls to the right when you scroll down with your mousewheel.

I decided to change my design following your advice

Great!


#5

Hi sergie, I have a problem with this suggestion in webflow:

***They set a very long width like 42000px on the "gallery" class for the ul element (so it doesn't wrap the List items). Each list item is fluid (fits to the contents inside if it's an image).
Then to make it responsive make the "gallery" class (or whatever you want to call it) have a width "auto" on tablet. Then you can make the list items have 100% width.***

I have tried doing this with list items. I created two list items . I made list items width, "100%" each while the ul width is set to "auto". But Unfortunately, the list items wraps. What could be going on?

This is my link: https://webflow.com/design/verticalmenu-sub?preview=1d6fc3749214ed69ab6a5f2c665db1a4

Thanks.


#6

@thesergie, I'd like to do what franz wanted to do (but in a section like this: http://appliancetecltd.com/). I would like it to scroll continuously as this page does. You said something about writing some javascript to change the horizontal scroll into the vertical scroll. How can I go about writing it? I'm pretty fast with learning the basics of code languages, but I don't know how to override the existing in Webflow. I'm adamant about making my site like this and currently it's the only thing that's keeping me from switching to hosting with Webflow. Thanks for any help.

Em.


#7

Hi @EmilyCaitlin

You can add your custom code here:
http://help.webflow.com/site-settings/custom-code

​Try these steps and let me know if you're successful.

:smile:


#8

I already saw that, but whenever I add any code it shows up when published. I saw something about using an iframe Embed code, but that seems to be solely for widgets, unless I'm misunderstanding. But I'm trying to source a new JavaScript based library called Scrollmagic. I can't seem to do that. :?


#9