Search code examples
jqueryhtmlwordpressfullscreenhorizontal-scrolling

Full Page Horizontal Scroll Content

I've been trying to find something close to what I'm trying to achieve and I can't seem to find anything else close to it. I've attached a quick image of what I'm trying to do:

enter image description here

Basically I am trying to create a horizontal scrolling site where when the content hits the bottom of the page, it starts a new column and continues. I'm currently building a WordPress theme where I would want this to be the single template. Does anyone have any idea where to begin on creating something like this? I'd appreciate any help!

Solution

  • If you're not limited to CSS2 you can use columns in CSS3 to achieve this effect. Set fixed column widths but not fixed column totals (documentation)

    .content {
  -webkit-column-gap: 60px; /* Chrome, Safari, Opera */
  -moz-column-gap: 60px; /* Firefox */
  column-gap: 60px;

  -webkit-column-width: 300px; /* Chrome, Safari, Opera */
  column-width: 300px;
}

    Example: http://codepen.io/anon/pen/pJogEZ