Streaming live at 10am (PST)

How to make a horizontal scrolling page


#1

Anyone interested to see how you can make this in WF?

http://horizontalscrolling.webflow.com/

It's not easy. It took me quite some time, but it's doable and if done right works perfect. If anyone is interested I can write a small tutorial.


Manual: Horizontal Scrolling Website
Recreating Facebook Carousel Effect
#2

Hi @Diu. )))
I recently thought on this topic. And I think I know how you did it. That's interesting.)
But the scroll bar is always pisses me off . Is there any way to change the design of the scroll bar?


#3

wink Thanks.

There are many options. The best is to use JQuery (if you want to have good results in Firefox).

This is a good tutorial.
Some other examples here.


#4

Thank you @Diu , it will help me in the future)


#5

It will be nice you share the public url so we can view the setup. In addition, your implementation have some mousewheel/trackpad issue on the mac. It is not smooth enough like the windows news app.

You can look this plugins: http://manos.malihu.gr/jquery-custom-content-scroller/
or this: (responsive support) http://gromo.github.io/jquery.scrollbar/

example here: http://manos.malihu.gr/repository/custom-scrollbar/demo/examples/complete_examples.html


#6

Great @Topelovely! I'll definitely check that out as I don't have a mac myself.

Sure, here's the link to the preview in Webflow:
https://webflow.com/design/horizontalscrolling?preview=c058130b4bc6f659b65be3dccc34cddd


#7

After looking at your setup. I think you could have made it even simpler, by making those container t_left and t_right generic classes and apply white-space: nowrap; to it as custom css, that way you can spit out unlimited list of containers into the bigger wrapper and WF designer would be more easy to manage.

The bigger wrapper would maintain its 100% width... Just an observation


#8

Thanks for the feedback. I've made some changes accordingly. This works much better for filling the content in WF. Will try the new JQuery suggestion later.

Do you have any thoughts how to make sure the div's are started inside a new column? I tried below, that doesn't solve it. [Neither with: "auto"]

-webkit-column-fill: balance;
-moz-column-fill: balance;
column-fill: balance;

Thanks in advance.


#9

Hi you might want to look at this integration using malihu scrollbar with a lot of customisation. http://rosaworldtravelsconcept.webflow.com/

It works with both osx trackpad, mouse wheel and touch. very versatile; and it is smooth. Inspired by Windows 8.1 News app

When it comes to creating magazine publications. I believe their is always an in-house rule on the number of words an article should have. Maybe this rule or standard can be applied. Dunno, just making a suggestion.


#10

I like it very much. Can you show me how it's done? With what kind of plugin do you allow scrolling?


#11

https://webflow.com/design/rosaworldtravelsconcept?preview=393784b25157e33574170a502fe429dd

CSS:

<link rel="stylesheet" href="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.min.css" />

<style>

html{

    overflow-y:hidden;

}

.dx{

    white-space: nowrap;
}


@media screen and (min-width: 991px){

   .columnus{
    -webkit-column-count: 3; /* Chrome, Safari, Opera */
    -moz-column-count: 3; /* Firefox */
    column-count: 3;

    -webkit-column-gap: 40px; /* Chrome, Safari, Opera */
    -moz-column-gap: 40px; /* Firefox */
    column-gap: 40px;

    -webkit-column-rule: 1px outset #ff00ff; /* Chrome, Safari, Opera */
    -moz-column-rule: 1px outset #ff00ff; /* Firefox */
    column-rule: 1px outset #ff00ff;

    white-space:normal;

    }
    }

    a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
    color:white;
}

a:hover {
    text-decoration: none;
    color:white;
}

a:active {
    text-decoration: none;
}

a { cursor: pointer; }

</style>

JS:

<script src="http://malihu.github.io/custom-scrollbar/jquery.mCustomScrollbar.concat.min.js"></script>
<script>
    (function($){
        $(window).load(function(){
            $(".dx").mCustomScrollbar({
        axis: "x",
        theme:"dark-thin",
		setHeight:"100%",
		setWidth:"100%",
		autoExpandScrollbar:true,
		mouseWheel:{ enable: true },
		mouseWheel:{ axis: "x" },
		advanced:{autoExpandHorizontalScroll:true}
});
});
    })(jQuery);

</script>
  // I used this code to achieve forced 100% height and 100% width: Shared by Bartosz  
<script>
 $(document).ready(function() {
    vph = $(window).height();
    vpw = $(window).width();
    $('.left').css('height',vph);
    $('.left').css('width',vpw);
});

$(window).resize(function(){
    vpw = $(window).width();
    vph = $(window).height();

    $('.left').css('height',vph);
    $('.left').css('width',vpw);

});

</script>

JS : I purposely left it as is because I was testing stuff. I would expect, you avoid the repetitive document ready call. wink


#12

In production mode, you might be looking forward to something like this: http://darsa.in/sly/#!examples

Infinite horizontal scrolling could be a better user experience and there are tons of jquery plugin for that on the web. Which is more closer to Windows 8.1 news app experience. But again, use infinite scrolling when necessary. see this: http://www.smashingmagazine.com/2013/05/03/infinite-scrolling-lets-get-to-the-bottom-of-this/

wink


#14

I moved a post to a new topic: Tutorial: How to make a Horizontal Scrolling Page


#15

I was wanting to do this in my portfolio. Could make a tutorial with code, please?
Can you help me?


#16