sliding-panels-template
February 17, 2016 | 49 Feedbacks

Sliding Panels Template

A simple portfolio template, with project preview images that slide out to reveal the selected project.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

We’re not new to experimenting with portfolio templates. This time, we’ve been playing around with the idea of moving blocks of content as a way to transition from the main/gallery page to the project page. All panels move along the y-axis (x-axis on smaller devices), and the movement is triggered by whether the user wants to learn more about a project, or wants to access the navigation.

Images: unsplash.com

Creating the structure

The HTML structure is composed of two unordered lists, the ul.cd-projects-previews for the project preview images and the ul.cd-projects for the project details, and a nav.cd-primary-nav wrapping the main navigation.

Adding style

On small devices, each project preview <li> has width equal to the viewport width and height equal to one-fourth of the viewport height (4 projects in our demo). The project preview image is set as background-image of its <a> child element; it has height equal to the viewport height and is translated to the top to cover the entire viewport.

As for the project details (.cd-projects > li), each list item has an absolute position, a width and height equal to the viewport width and height respectively and is hidden by default.

When a user selects a project, the .selected class is added to the corresponding .cd-projects > li, while the .slide-out class is added to the project previews (in a random order and with a delay to create the slide-out effect).

On bigger devices (viewport width bigger than 1024px), the project previews height is set to 100% and its width to one-fourth of the viewport width while the <a> child is translated to the left to cover the entire viewport.

As for the full-page navigation, the .cd-primary-nav is placed below the .cd-projects-container; when the user clicks the .cd-nav-trigger, the .slide-out class is added to the project previews to reveal the navigation.

About the projects number: if you need to create more than 4 projects, you then need to update width/height of the project previews (and translate value of its <a> children). If you use SASS, though, you can update the $items variable inside partials > _variables.scss.

Events handling

We used jQuery to detect click events on project previews and .cd-nav-trigger element.
When a user selects a project/opens the main navigation, the slideToggleProjects() function takes care of sliding-in/out the projects, while the makeUniqueRandom() function is used to extract random numbers (between 1 and 4) for the projects exit order.

Changelog

Feb 17, 2016
  • 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.

  • http://creativetemple.co/ Timur

    Guys, you never stop to amaze! :) Yet another beautiful gem in your ever-growing collection.

    • http://codyhouse.co Claudia Romano

      Thanks! :)

  • jeponkz

    Wow! Just wow!

  • Dmitri Andronik

    I like it! Good job

  • Boba Fett

    Claudia: You do great stuff. Your tutorials work for me (most of the time). We have something in common. My first job was also in a Tire (Tyre) company (it was during the time when dinosaurs roamed the earth). Keep up the good work and keep me away from Alzheimer’s decease !!

  • Michael Mashay

    Great work as always! Already use similiar effect on my site when select some portfolio item.

    • Boba Fett

      Your site is great. Why not pay forward and share the tricks?

      • Michael Mashay

        We specialize in Squarespace sites and some Squarespace tricks published to blog. I used some pretty animations on this site, but I’m not as creative as @claudiarrromano:disqus

  • Jekyll

    Looks very cool! Please note that the project previews seem not to work in safari iOS 7 as they should. At least there are issues when opening the demo page on an iPhone4. The preview items stay at 100% height each. The items now appearing below the fold are not rendered correctly. See screenshots below. Hope it helps :)

  • The Master

    Sweet !

  • mrpresident

    is it easy to implement for Bootstrap Framework?

  • http://www.e11world.com e11world

    Very amazing. Thank you for taking the time to do this.

  • Anton

    Yes! This ist really great, Claudia – thank you!

    Just one Question: What’s about Browser-Support.
    Seems pretty good, but “better asking then wondering” … ;-)

    Thanx
    Anton

    • http://codyhouse.co Claudia Romano

      Hi Anton, it’s right below the title of the article ;)

      • Anton

        OMG – sorry. I didnt see it because of the add, which moved it to the right … (blame).

  • Scott J Freeman

    Beautifully done!

  • Miguel G

    Hi there

    Is there a way to add an offset of 100px to the scroll?
    I tried replacing this:

    {‘scrollTop':$(window).height()

    with:

    {‘scrollTop':target.offset().top + 100}

    But it does not work.

    Can anyone help, please?

    Thanks so much!

    • http://codyhouse.co Claudia Romano

      Hi Miguel, try with $(window).height() + 100. Cheers!

      • Miguel G

        Hi Claudia

        Thank you so much for your reply, however it does not work. I actually had tried that too.

        Full line is:
        projectsContainer.animate({‘scrollTop':$(window).height() + 100}, 500)

        Any other suggestions?

        Cheers

      • Miguel G

        Hi Claudia,
        Just wondering if you can have another look as the code provided does not work. :(
        Thanks

  • http://www.chinacoder.cn/ Nicky

    Good Job! perfect UE!

  • Cathy

    Hi there, this is great – how do I create a menu link that would link to one of the individual project panels?

    • Katia Zanotti

      Hi. Here what you have to do:

      – remove the from the menu (you cna change it with a )

      – add a class to the menu, let’s say ,

      – here the code you need to add in main.js:
      $(‘.menu’).on(‘click’, ‘a’, function(event){
      event.preventDefault();

      if( animating == false ) {
      animating = true;

      navigationTrigger.removeClass(‘nav-visible’);
      navigation.removeClass(‘nav-visible nav-clickable’);
      $(‘body’).removeClass(‘b-dark-bg’);
      navigationTrigger.add(projectsContainer).addClass(‘project-open’);
      openProjectFromMenu($(this).parent(‘li’));
      }

      });

      function openProjectFromMenu(projectPreview) {
      var projectIndex = projectPreview.index();
      projects.children(‘li’).eq(projectIndex).add(projectPreview).addClass(‘selected’);
      projects.children(‘li’).eq(projectIndex).addClass(‘content-visible’);
      animating = false;

      }

      • Fernando Jg

        thanks a lot Katia!!! i found to do this.

  • Betoneira

    Hi there! Is it possible to add an div with a image on top of the projects (a logo image)? I can do it on screen but on mobile it doesn’t work. Regards!

  • Sidzwozz

    You guys are awesome..I don’t have any words to explain..Speechless..really want to take animation course but don’t have money..I am a jobless poor indian student..btw thanks learned lot from above template!

  • http://njengah.com Joe Njenga

    Awesome stuff…You guys always surprise me with your creativity and passion for frontend development. Cant wait to see the next thing. Thanks

  • http://www.southernstartech.us JY

    Who are you people?? You continue to produce some amazing work.

  • H Max

    You guys never stop killing it! I’d add a more detailed comment, but I want to second all the wows already posted. Every Codyhouse post is a “must” read.

  • Monsters As Humans

    Is there a way of making this work in IE8? or even a suitable fall back?

  • kieran boyce

    I’m a little lost as to what the index paramater is in this function here can some one explain slideToggleProjects(projectsPreviewWrapper, projectIndex, index, bool) what does does feeding that an argument actually do

    • http://codyhouse.co Claudia Romano

      Hi there, when you select a project, the index you pass is the one of the project you just selected; this way the slideToggleProjects() can ‘slideUp’ the all the others. Hope this was clear!

  • Alex

    Has troubles with animation, if in “cd-project-info” are or

  • Kenjirou

    What syntax theme are you using in your code examples? It’s awesome!

  • mrpresident

    Hi Claudia, i try to use this resource in a Bootstrap template for format the content inside the single sections. But when i access to single section i see a double scrollbar. If i comment bootstrap.min.css from html i see only one scroll bar. Why this? can you help me?

  • Pine Creative Labs

    This doesn’t work on Chrome on Android phones. The 4 panes don’t show up. However, the button shows up and displays the hidden menu.
    Works fine in Firefox on Android, though.

    • codyhouseweb

      Hi there, I’ve just tested it on Safari (9.0) and Chrome (Android 6.0.1) and it’s working just fine. Is this an issue you are having with our demo?

  • shunluoifong

    This is great, nice work! I noticed one issue, however. When I change the number of panels to 2 by editing $items in _variables.scss (I’m using Sass), it creates a problem for the title of each panel. When I click the panel, the title doesn’t slide to the center of the window…rather, it slides to the far right of the window and is partially hidden, as if the right edge of the window is treated as the “center”. In style.scss, on line 414 I changed “@include transform(translateX(150%));” to “@include transform(translateX(50%));” and it then worked correctly. Note that with 4 panels I needed to leave it at 150% to work correctly. I treated this as a quick fix, although I’m sure there is a more elegant way to fix this so that it correctly handles any number of panels.

  • Elena Calvillo

    Thanks to you guys now our website looks much better! http://www.cerobugs.com/

    • http://creacrea.net CREA Studio

      Looks good! : )

  • http://creacrea.net CREA Studio

    This is just what I’ve been looking for! Thank you so much!! : )

  • Yogie Prasetia

    thank you so much : ) http://www.jakartawebdesign.net

  • Coupons 4fun

    Hey can i install 5 panels? and what to change in javascript?

  • Elton Behari

    First of all i just came across your work and its absolutely amazing. thank you. Second, i want to keep 4 or a random number, but i want them aligned by two in a row. How can i do that? Thank you in advance

  • Katia Zanotti

    Hi codyhouse lover I’m getting an error using chrome canary. probably I should change some settings in chrome://flags/#enable-experimental-web-platform-features. Any idea?

  • Florian Norbert Bepunkt

    I found a strange sort of bug (reproducable with your demo). What I wanted to do is to color the background images by css by replacing your definition:

    .cd-projects-previews li:nth-of-type(4) a,
    .cd-projects > li:nth-of-type(4) .preview-image {
    background: #835531 url(../img/img-4.jpg) no-repeat center center;
    background-size: cover;
    }

    with mine:

    .cd-projects-previews li:nth-of-type(4) a,
    .cd-projects > li:nth-of-type(4) .preview-image {
    background: linear-gradient( rgba(0,0,0, 0.95), rgba(0,0,0, 0.05) ), url(../img/img-4.jpg) no-repeat center center;
    background-size: cover;
    }

    This works fine for the first three images. If you add the same code to the fourth and last image, all images disappear.

    Any idea?

    Cheers,
    Florian

    • Florian Norbert Bepunkt

      Anyone any idea?

  • http://ladesigns.co.uk Sean Lee-Amies

    Hi there, just wanted to say, this is another awesome piece of code and we’ve been waiting to be able to use it in a project for a long time! We knew it wouldn’t be easy, but we’ve gotten as far as we can – we’ve hit a brick wall.

    We are integrating this into WordPress, using CPT’s and ACF to pull in the content on the scrolling panel, all via a loops and various template parts. It’s working, but only some of the time, and we cannot understand why. The issues happen when trying to click on the portfolio items, using the close and/or navigation icon in the top right. Some times it will work for a bit, and then completely fail and cease to function….

    Any help would be greatly appreciated!! http://letsgo.canny-creative.com/search-results-page/?currency=USD&continent=americas

  • julienstuder

    Hi !
    how do you manage to have to top right menu button when you are in page other than a project ?