July 2, 2015 | 38 Feedbacks

2 Blocks Template

A template split in 2 animated blocks of content, inspired by dropbox.com/guide.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera

Today’s nugget is a simple template inspired by the awesome Dropbox Guide website. On bigger devices, the content is split in two main containers. When the user surfs through the content using the navigation, new content overlaps the old one. On smaller devices, we have a simple gallery of projects, with a slide-in panel containing additional project information.

Images: Unsplash

Creating the structure

The html structure is composed by two unordered lists, one (.cd-images-list) containing the project images (set as background-image of the .cd-images-list > li items), the other containing the project descriptions, both wrapped in two different <div> elements.
An additional ul.block-navigation has been used to create the project navigation.

Adding style

On the mobile version, the .cd-content-block element (containing the project descriptions) is in fixed position and translated outside the viewport (to the right) so that only project images are visible. When the user taps/clicks one of the projects, the .cd-content-block is translated back into the viewport (using the .is-visible class), while the .is-selected class is assigned to the list item containing the selected project information (its opacity and visibility properties are set, respectively, to 1 and visible).

On bigger devices (viewport width bigger than 768px), both the .cd-image-block (images container) and .cd-content-block (descriptions container) have  a width: 50%, an height: 100% and an overflow: hidden (this way children elements which are outside this area won’t be visible).

By default, both .cd-image-block > ul > li and .cd-content-block > ul > li are translated to the right (translateX(100%)), so that they are not visible due to their parents overflow value.

When a project is selected, the two corresponding list items (one for the project image and the other for the project info) are moved back (using the .is-selected class) so that they become visible.

Events handling

We used jQuery to implement the project navigation (both keyboard and previous/next navigation) and to detect click events on the .cd-images-list > li > a elements (mobile version) to open the slide-in panel.

The updateBlock() function has been defined to update the visible project, and it is triggered both on mobile (when the user clicks/taps a project image) and desktop version (when the user surfs through projects using the navigation/keyboard).



July 2, 2015
  • Resource released by CodyHouse

Claudia Romano

Web developer, fan of The Big Bang Theory and good food. Co-founder of CodyHouse and Nucleo. You can follow her on Twitter.

  • Nitin

    Awesome, with a definite real world use case

  • Reza

    im gonna kill myself :/ this is awesome !

  • http://www.vigorlean.com Imre

    Nice work as always!!!

    When resized in Chrome and Firefox, there are two scroll bars appearing: http://screencast.com/t/fxOZwKui90S
    Not an issue just doesn’t look nice.

    On the other side, it is not very likely people will resize their browser windows that much.

    On my android phone on chrome it looks nice no double scroll-bar.

    keep up the good work!

  • Debra Chiang

    Love it! Thank you :)

  • https://www.facebook.com/rodrigochavesdesenvolvedor Rodrigo Chaves

    Very useful,and beautiful, thanks o/

  • 陳彥澄

    Awesome!Thank you.

  • Surjith SM

    The UI effects are nice. but I’m not a fan of right side content. It distracts reading. Text should be center. I wonder how dropbox keeps that layout.

    Also, guys can you remove cd- from the class name? its better to have a generic class names, so that everyone can use it :)

    • Juan Pablo Solano

      Yes. What does the cd stands for?

      • Surjith SM

        C & D in Cody maybe

        • http://codyhouse.co Claudia Romano

          Hi, we use the cd- prefix to avoid conflicts with the name of classes other users may be using in their own css. Of course, you can remove it (if you have no conflicts) or replace it with whatever suits your project better.

          • Surjith SM

            mm, That makes sense. Thanks for clarifying.

    • Dillon

      I agree wholeheartedly. It seems cool and interesting until you start to actually read/interact with the content. Having to look towards the side like that is awkward and eye constraining.

      I think it would be better if the landing page options transformed to full-screen when clicked. That way users could experience the best of both worlds :)

  • LotharVM

    As far as I can see it’s not possible to have a direct link to one of the project pages, am I right?

    • Tom Heaps

      I would also find this very useful so people don’t have to press the next button 10 times to get to the page they want. Presumably you would have to alter the javascript to achieve this. Can anyone provide a solution?

      • http://codyhouse.co Claudia Romano

        Hi guys, you should try implementing something like what we did here:

        Basically, you should create a different page for each project, and load the content when the user hits the next/prev button. Hope this helps!

      • Julien Hoste

        I made a list with as many li as pages and added the following code :

        $(‘.nav-numberlist li a’).on(‘click’, function() {
        var indexNumber = $(this).parent(‘li’).index();
        return false;

  • Elena

    Didn’t show up in Safari 7.0.6…

  • http://adventedesigns.com/ adventvk

    can we integrate this design on wordpress??

    Kind Regards

  • https://twitter.com/montecruiseto samir

    Thanks alot Claudia, I used it on this micro-site of mine http://scopemount.startrack.io/.

  • http://www.createaspectacle.com/ Nick Santos

    Well, this is peculiar. I’ll try to integrate to our web design company site but I never really knew much about this.

  • PAryguy

    Is it me or is the download missing some mixins? i’m running the SCSS version but the only mixin contained in the zip file was font smoothing.

  • http://vana.pl flamner

    how to loop this script, and add autoplay?

  • fangge

    thx for sharing! I have translate this blog to Chinese http://www.mrfangge.com/2-blocks-template/

  • bekkr

    Hello Claudia!

    I’m curious if there any way to add links to a certain page (slide).
    I would like to create a kind of a table of contents on the first slide.

    Thanks in advance.

  • Sergey

    There are two scrollbars on the right side in browsers on PC.

    • Julien Hoste

      Did you or anyone else find it out? I’m having the same issue :-/

      • http://www.multireflex.com Managyck

        Hi, to avoid the second scrollbar I have added a display:none to the class “content-block-is-visible” just for mobile. Like this when the panel is open full screen the table of content one (“cd-image-block”) is hidden.
        @media only screen and (max-width: 767px) {
        .content-block-is-visible {display: none;}
        you can check on this exemple http://410.multireflex.com

    • Matija Culjak

      There’s a easy fix for Chrome

      .tb-content-block > ul > li::-webkit-scrollbar { display: none; }

      but still no workaround for Firefox unless you want to use some kind of JS plugin that will alter the styling of browser sidebars.

  • hectorbasktleon

    It looks like you can only have 4 different images. When I try to create 5 or 6 different slides when I get to the number 5 it starts with img-4 again. How can I change this? Thanks

  • http://milkeo.com/ Milkeo Gifs

    Hello, how to change picture when I add a page? Thank you

  • Wajahat MuGhal

    Is it possible to link this 2 block template with my gallery thumbnails (means when user clicks any image in the gallery, it should open in this 2block template (in new tab)

  • Arjen de Jong

    Hey there, I’ve made it possible to navigate to a certain item in the portfolio.
    It’s not bullit proof however, for example, on mobile I can’t get the first case to open up,
    because if I did, the navigation buttons on desktop wouldn’t work anymore.
    However, I’m impressed with myself because I’m still a novice at JavaScript.

    This function is based on hash links. For example, if you href link to “/portfolio/#item-2″, it will open the second item. It figures out the index number and updates the Block and Navigation to use that index number.

    For the function to work, you’ll need to add a class to the “li” inside “cd-image-block” with the name you would like to use. In my example it would be “. You will also need a link that’s using the name of that item, i.e. ” a href=”/portfolio/#item-2″ “.

    function getIndex() {
    var loc = document.location.pathname.indexOf(‘/portfolio/’);

    if (loc >= 0) {
    var hashText = window.location.hash.substr(1),
    articleList = $(‘.portfolio-container .cd-image-block li’);

    if (articleList.hasClass(hashText)) {
    var dot = ‘.’,
    res = dot.concat(hashText),
    indexNumber = articleList.index($(res)),
    indexNumberInt = parseInt(indexNumber);

    if (indexNumberInt > 0) {
    var device = MQ();
    if (device == ‘desktop’) {
    } else if (device == ‘mobile’) {
    updateBlock(indexNumberInt, ‘mobile’);

  • http://www.multireflex.com Managyck

    Bravo Claudia! Once again superbe work!
    Because I have notice that users are always scrolling down without any reason (is important info always at the bottom?)… I used your template to make the index cards of each tool more simple and nicer.
    I hope the result might help to answer many issues I also faced (double scrolling on mobile, visible on desktop and hidden on mobile, fixed add-to-cart buttons, background height100%, scrollTop when the “cd-image-block” has a scrolling bar available, etc…).
    For exemple to make the “cd-image-block” back to top when it’s longer, I just had to add a in your JS (±line 62) after your
    function updateBlock(n, device) {

    My pages are filled by an XML and coded in Php; here an exemple: http://252.multireflex.com
    …hope it helps
    _patryck from Barcelona

  • abot

    hi, is there anyway to use disc navagation instead of “next & “prev” btn??

  • mabi

    Hi! How come mine doesnt seem to be working when uploaded? :(

  • http://www.userfirst.eu Francesco Manciocchi

    Hello and thanks for another great library :) My question is: how to call the sliding effect more than once on the same page? I am building a single page template and would like to use this effect for two separate sections…right now it works only on the first section. I guess it is a matter of js syntaxt. Thanks in advance for any help.

  • http://rexpansive.neweb.info NEWEB

    Hi! We made a theme for WordPress similar to this project, called REXPANSIVE CREATIVE http://rexpansive.neweb.info/demo/creative/ but with many more features!

    For example:

    – You can manage your layout with all possible combinations
    – Customized scroll
    – One Click Demo Install
    – Stunning Animations when opening a new Page (for SEO)
    – Social Wall
    – Layout Blog
    – Layout Portfolio

    and so on!

    Demo: http://rexpansive.neweb.info/demo/creative/
    Features: http://rexpansive.neweb.info/creative/

    What do you think?