2-blocks-template
July 2, 2015 | 32 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
9+

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).

 

Changelog

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:
        http://codyhouse.co/gem/animated-page-transition-2/

        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();
        updateblock(indexNumber);
        updateblockNavigation(indexNumber);
        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
    advent

  • 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 :-/

    • 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’) {
    updateBlock(indexNumberInt);
    updateBlockNavigation(indexNumberInt);
    } else if (device == ‘mobile’) {
    updateBlock(indexNumberInt, ‘mobile’);
    updateBlockNavigation(indexNumberInt);
    }
    }
    }
    }
    }
    getIndex();