Awwwards

Horizontal Scrolling Tumblr Theme

|

Horizontal Scrolling Tumblr Theme

Client Request: Create a custom horizontal scrolling tumblr theme

Our client, Campfire, hired us to create a horizontal scrolling tumblr theme for the new Cinemax TV show “Banshee.” The tumblr page would house various clips from the show as GIFs. Users can then collect and share GIFs, starting a viral buzz about Banshee.

Working with the Campfire design team, we came up with an idea for a horizontal scrolling tumblr theme. Some key elements to point out are: the sticky nav on the left side, the horizontal scrolling on post pages, vertical scrolling on permalink pages with comments / likes, and adjusting the width depending on the amount of posts.

Horizontal Scrolling Tumblr Theme

How we solved it

All of these design requests made the project a bit tricky. I found tutorials on horizontal scrolling tumblr themes, but not with adjusting width or sticky nav. So with a combination of different tutorials around the web, Stack Overflow posts, coffee, and a little CSS tinkering, we were able to achieve all of the design asks.

We also really pushed the boundaries of tumblr, customizing different pages and posts, based on their tags and enabling vertical scrolling based on the type of page (permalinks.)

Below is a stripped down version (excluding some styling) of the CSS that was used.


html {
height:100%;
}

body {
height:100%;
min-height: 100%;
}

.post-type-one {
width:622px;
height:501px;
float:left;
display:inline-block;
}

.posts {
position:absolute;
top: 50%;
float:left;
display: inline;
margin:-250px -9999px 0 825px;
clear: both;
}

aside {
height:100%;
float:left;
overflow: visible;
position: fixed;
top:0;
bottom:0;
}

Hopefully this helped you get started on your way building a horizontal scrolling tumblr theme.
Please let me know in the comments if you have any questions.
Thanks!

John

Join thousands of subscribers

Original articles on design, tech and business.

  • Usman Shoukat

    Great work John :)

    • avexdesigns

      Thanks!

  • Usman Shoukat

    Great work John :)

    • avexdesigns

      Thanks!

  • Vero Nica

    hello! thanks for your work! but where do i have to put that html-text? after which tag? i don´t have so much experience with this.. thank you very much!