Get a free trial // Grow your CSS skills // Land your dream job

horizontal web page

  • # March 24, 2013 at 8:41 pm

    Hello Everyone!
    I am attempting to make a webpage that scrolls horizontally. I.E. mouse wheel up, page goes left; mouse wheel down, page goes right. Kind of like the windows 8 metro interface.

    I was wondering if there would be something like

    Or something like that. Any thoughts?

    # March 24, 2013 at 8:55 pm

    Check out this [plugin]( “mouse wheel”) if it helps.

    # March 24, 2013 at 9:00 pm

    Okay let me get this straight

    jQuery(function($) {
    .bind(‘mousewheel’, function(event, delta) {
    var dir = delta > 0 ? ‘Up’ : ‘Down’,
    vel = Math.abs(delta);
    $(this).text(dir + ‘ at a velocity of ‘ + vel);
    return false;

    Where it says “$(this)” would I write something like “animate left”?

    # March 24, 2013 at 9:07 pm

    I’ve not implemented it in a project before, but I thought it could get you started. You may need to read his [documentation]( “documentation”) if you find it helpful to your needs.

    # March 25, 2013 at 7:42 pm

    Okay, I found something that works! However, I when I tried to implement it locally it didn’t work. Can anyone help me? :(

    # March 25, 2013 at 7:51 pm

    @mdrd88, it’s ok! we all make these mistakes from time to time..

    I would also see about finding the source because dropbox is not a reliable cdn for hosting code.

    EDIT: You can download it from the source.

    # March 26, 2013 at 11:26 am

    YES!!! It took me a while to find the button. That’s awesome thank you so much!

    I really need to get more comfortable with javascript, I’m not to shabby at css but javascript… well, that’s a different story.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed