squeezebox-portfolio-template
September 4, 2015 | 100 Feedbacks

Squeezebox Portfolio Template

An intro block that slides out to uncover a gallery of portfolio items.
Browser support
  • ie
  • Chrome
  • Firefox
  • Safari
  • Opera
9+

We’ve been experimenting with some motion effects to build a simple portfolio template. The idea is to show a gallery of projects as a separate, secondary module, with the first block still partially visible – just one click away.

This is a UX pattern we’re used to in mobile apps: if you tap on an element and it slides out, but not entirely, you know you can tap on it to bring it back. The challenge here was to make this work on bigger devices too.

Here is a quick animation that shows the flow of the resource:

squeezebox-animation

This resource was inspired by this dribbble shot by the talented Javi Pérez.

Creating the structure

The HTML structure is composed by 3 main blocks: a .cd-intro-block element, containing the action button to reveal the projects slider, an unordered list (.cd-slider), which is the projects gallery/slider, and a .cd-project-content element with the single project.

Adding style

When user clicks the a[data-action="show-projects"], the .projects-visible class is added to the .cd-intro-block and the .cd-projects-wrapper: this class triggers the intro section animation and the projects slider entrance.
The .cd-intro-block is translated (along the Y axis) by 90%, while the .cd-projects-wrapper visibility is set to visible.

For the project slides entrance animation, the .slides-in class is added to each project item (with a delay of 50ms); this class triggers a different animation according to the screen size.
On mobile devices, each list item has, by default, width: 100% and opacity: 0; when the .slides-in class is added, the cd-translate animation is applied:

On desktop devices (viewport width more than 900px), each list item has, by default, width: 26%,  translateX: 400% and a rotate: -10deg; when the .slides-in class is added, each project is moved back to its original position (translateX:0) and rotated to 0 degree:

For the projects slider (desktop version only), all list items are in relative position, have a fixed width (26%) and a float: left; the .cd-slider total width is properly changed (using javascript – more in the Events handling section) so that all list items are placed on the same row.
When a user clicks the .next/.prev button, the .cd-slider list element is translated (to the left/right respectively) by an amount equal tree times a single list item width + its left margin.
To create the ‘squeezebox’ animation, each list item is also animated using the cd-slide-n animation:

Basically, a different animation has been defined for each list item visible during the .cd-slider translation (a total of 6); each animation differs in the translateX value set in the 50% keyframe.

The following gif shows the movement of 3 visible elements when user clicks the .next button (the .cd-slider translation has been removed):

delay-explained

Events handling

On desktop devices, we change the .cd-slider width so that its <li> children stay on the same row; we used the setSliderContainer() function to set this width (and change it on resize); plus, on window resize, we update the .cd-slider translate value:

Besides, we used jQuery to add/remove classes (eg .projects-visible class when the user clicks the action button) and implement a basic slider navigation (next/prev buttons, keyboard and swipe navigation).

Changelog

Oct 10, 2015
  • Fixed bug - project4 content not showing on mobile
  • Fixed bug when less than 6 projects are available
Sep 16, 2015
  • Fixed bug on mobile - projects disappearing on swipe
Sep 4, 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.

  • http://www.easypeasy.ie Dave Beirne

    Beautiful Clean design and UX as usual :)

  • http://www.webgearmedia.com Ashraf Suleiman

    Thx Claudia , just there is a small bug on Chrome at windows , after you scroll the carousel when you hover over the items the vertical and horizontal scroll bar appear , i add overflow , hidden to the body and its gone !! i don’t know if this cause the bug !!

    • http://codyhouse.co Claudia Romano

      Hi Ashraf, I was trying to reproduce the bug with no success. Were you testing the demo on the latest version of Chrome (45.0)? thanks

      • http://www.webgearmedia.com Ashraf Suleiman

        Hi Claudia yes i am using Chrome 45.0 !!

        • http://codyhouse.co Claudia Romano

          Hi Ashraf, I wasn’t able to replicate the bug yet, but I’ll keep looking into this. Thanks!

  • itsjms

    What do you guys think a good solution for filtering would be with this flow? Anyone have any thoughts? I love the mobile responsiveness of this.

  • http://www.sfpcoder.com/ sina

    perfect as always.
    I have a suggestion: I think it’s be more nice to have a draggable project list. if it possible how can i do that?
    tanx

  • Nicholas

    how do you add more project pages? Sorry. I’m not a coder

  • Jelo Beltran de Vera

    Awesome Work!

    i don’t think if its a bug or not but when i continue clicking the right arrow in the end of the cards and then i clicked the left arrow again it didn’t slide or go back. maybe you should check it. its on the demo and currently viewing it on chrome.

    thanks a lot!

  • alessandro canè

    great effect! by the way I have to say that on my iPhone (I have not tested any other mobile) if your try to scroll projects sideways (for mistake, of course) instead of vertically, the boxes disappears and the only way to get them back is to reload the page. Hope this helps, and thank you for sharing your code! Ciao

    • alessandro canè

      i’m testing on iPhone4 / Safari and iOS 7.1.2

      • http://codyhouse.co Claudia Romano

        Thanks for the heads-up! Fixed now ;)

  • Matúš Ralbovský

    Hi, its really cool, thanks!
    One question plesae, is it possible to access the individual project pages with a direct URL? if not, how to deal with SEO in this case?

    thanks

    • Gérard Mathiuet

      Sure! With a little bit help of HTML5 History API / pushstate you could update the URL at the open project/card event.

      • Matúš Ralbovský

        Thanks Gérard, will look into it.

  • Mike Raymond

    This is like all the others you guys have made, super awesome. I have used a couple other scripts and modified for my needs. Anyways, I was wondering if there is a way to have more than one project content area, lets say one per project box? All the project boxes link to the same content. I wanted to use something like this for a portfolio, but I need individual descriptions per project. I hope that explains it.

  • OXO

    Hi people, how can you do to make each project a different content?

  • Marcel Epp

    Can someone explain how to add more content to the projects? Different text for each project? that would be great!

  • Trevor Rose

    Hello! Please, I need help on how to add contents for each image. Thanks!

  • app geek

    I also need help adding content to the page. Anybody an idea how to do it?

  • rodrigoleles

    Hi! That’s awesome… it is possible to add / manage content with http://www.xpos.it/?

  • Got

    Hi everyone!

    I tried this template in a real use case: a holiday portfolio, after seeing it on Codrops.

    To add content to the .cd-project-content, I just get the element from the .cd-slider li with JS and put it (with changes) into the .cd-project-content. You could see it in live here:

    http://squaregot.net/divers/vacancesIslande/

    and see my fix in the main.js on line 47 here:

    http://localhost:8888/vacancesIslande/js/main.js

    but I’ve got a bug with Chrome. If I’ve got more than 50 elements in .cd-slider, the content is stuck on top of the screen, transform: translateY(-50%) seems not working. Here is a version with less than 50 elements that works in Chrome: http://squaregot.net/divers/vacancesIslande/index-chrome.html

    Anyone to fix it?

  • Got

    Oups, made a wrong copy/paste for the link to the main.js, you’ll correct it without an hesitation ;-)

  • Nicholas Johnson

    Great Work. I too would love the ability to have multiple project contents but it is beyond my ability. Any help would be greatly appreciated.

    • http://codyhouse.co Claudia Romano

      @disqus_Dc0R3ZlooW:disqus @disqus_MYygn6mS4e:disqus @disqus_7oI3S1BAGT:disqus @marcelepp:disqus @disqus_EJiCkJOHnS:disqus @disqus_S0MXomUh4y:disqus @disqus_Bpt5kxVmjc:disqus Hi guys, you can give a look at how we did it in this resource:
      http://codyhouse.co/gem/animated-page-transition-2/

      Hope this helps!

  • tosapon waikitja

    good design

  • Valeriy Berkovich

    Tell me please, how toll the script that way that contant of each photo is down load while clicking on it?

    • Daniel Alvarez

      Hi Valeriy. I did it just like this:

      I put an ID for each

      ex:

      After, I made a little change in JS:

      //select a single project – open project-content panel
      projectsContainer.on(‘click’, ‘.cd-slider a’, function(event) {
      event.preventDefault();
      if( jQuery(this).parent(‘li’).next(‘li’).is(‘.current’) ) {
      prevSides(projectsSlider);
      } else if ( jQuery(this).parent(‘li’).prev(‘li’).prev(‘li’).prev(‘li’).is(‘.current’)) {
      nextSides(projectsSlider);
      } else {
      var id= jQuery(this).attr(‘href’);
      //singleProjectContent.addClass(‘is-visible’);
      jQuery(”+id+”).addClass(‘is-visible’);
      }
      });

      I hope this works for you.

      • Harsh Bharvada

        I dont know js and jquery so can you give me solutions for giving different content to different projects.

  • Daniel Alvarez

    This a way to add content for each project:

    I put an ID for each .cd-project-content

    ex:

    After, I made a little change in JS:

    //select a single project – open project-content panel
    projectsContainer.on(‘click’, ‘.cd-slider a’, function(event) {
    event.preventDefault();
    if( jQuery(this).parent(‘li’).next(‘li’).is(‘.current’) ) {
    prevSides(projectsSlider);
    } else if ( jQuery(this).parent(‘li’).prev(‘li’).prev(‘li’).prev(‘li’).is(‘.current’)) {
    nextSides(projectsSlider);
    } else {
    var id= jQuery(this).attr(‘href’);
    //singleProjectContent.addClass(‘is-visible’);
    jQuery(”+id+”).addClass(‘is-visible’);
    }
    });

    I hope this works for you guys.

    • Valeriy Berkovich

      Hi Daniel!
      I tried your script, but its still has not work.
      Can you send me the example your realisation of properly working site?
      Thank you beforehead!

      • Daniel Alvarez

        Hi Valeriy,

        Try adding a href=”#project-number” for each link. The current links has an href=”#0″ you have to change it.

        In my case I had to change the links to each project, ex:

        Project 1
        Lorem ipsum dolor sit amet.

        I hope this helps.

        • Daniel Alvarez

          I don’t know why, but my code is not showing like it is really. I’ve posted an image replying my comment above.

          • Valeriy Berkovich

            Now everything works fine! Thank Daniel great work, I’m walking on air!

    • Daniel Alvarez

      You have to change the href attribute for each link to each project, I’ts comes like #0 but you have to chait to #project-1 or #project-2 according you have in each id for projects content.

      • uyku

        hi daniel.. thanks for that. you are awesome!

        i’ve trouble with the close button. not working when i separate each project with this code..
        (btw “esc” still work)

    • Dmitriy Horolskiy

      Hi, Daniel! Can you please help with scroll?

      “When single-project is big scroll appears – that’s ok, but to scroll it with mouse wheel you need first to click somewhere on page. How to do so that you don’t need to click to scroll down?”

    • uyku

      hi daniel.. thanks for that. you are awesome!

      i’ve trouble with the close button. not working when i separate each project with this code..
      (btw “esc” still work..)

    • Kendell Daniel

      Hey Daniel,
      where did you make the change in the js to add this code?

    • Joshua

      Daniel, I could kiss you right now!! Thank you!

      • Daniel Alvarez

        hahahahaha Glad to have helped you. Regards.

    • http://www.webwoods.co.uk Aziz Hamra Webwoods

      you are the man! thanks so much for this!

      • http://www.webwoods.co.uk Aziz Hamra Webwoods

        although, this has broken something else: once I slide /swipe all the way to the right-hand side, I can use the arrow to slide back to the beginning of the slides :(
        any workaround?

        • Daniel Alvarez

          Hi Aziz. I’m trying to find the error to correct. I will tell you when it succeeds.

    • http://mcmiv.com/ ddrt

      Any idea why (only) the item in the fourth slot (regardless of it’s name being 4,5,6,9,800,etc.) will produce a negative value for ‘translatex’ onclick? I’ve replaced the updated code to fix the issue and I’m narrowing everything down to the js and it’s producing:

      That negative value is the problem. I’m having trouble narrowing down what exactly is wrong because 1-3 and then 5-∞ will work properly but not the fourth slot.

  • Dmitriy Horolskiy

    Hi! Thank you for this great work!
    Can someone please help me? When single-project is big scroll appears – that’s ok, but to scroll it with mouse wheel you need first to click somewhere on page. How to do so that you don’t need to click to scroll down?

    • Guillaume Firmin

      Hi!
      In the CSS › Project Content :
      1/ remove the overflow-y: auto; from .cd-project-content > div { … }
      2/ paste it in .cd-project-content { … }
      +

      • Dmitriy Horolskiy

        Thank you, Guillaume! It works, but now close link is not fixed to the top :) Do you know how to fix it? If not – nevermind, thanks again for reply.

  • brassmonkey601

    I’m having trouble with the top-bar staying fixed while the slider is open, you’re somehow able to scroll and shows the whole intro slide, when all I want to show is the exit button. Any idea on a quick fix for this?

  • Fernando Souza

    Awesome project!

  • Glennyboy

    Seems to be an issue with Nav arrows navigating left / back in grid mode

    • Glennyboy

      It’s intermittent after the elements realign by the looks of it…

      • http://blog.pixelpudding.com PixelPudding

        Hmm yeah. I’m having the same issue. Any joy?

      • http://codyhouse.co Claudia Romano

        Hi @glennyboy:disqus, could you please provide more info on how to recreate the bug? Also, which browser are you using? thanks!

        • http://blog.gaijindesign.com/ Lawrie Malen

          Hi @claudiarrromano:disqus – I’m with @pixelpudding:disqus. Not sure if it’s the same issue as @glennyboy:disqus, but: In any browser, if there is a low number of slides (i.e. 4), the initial scroll works as expected (right-to-left), but scrolling back (left to right) doesn’t work as expected. In FF41, the initial click only triggers the ‘bounce’ as per your GIF, but without actually sliding across; however a second click triggers the scroll as expected. In Webkit (Chrome/Safari on Mac or Chrome on PC), scrolling back doesn’t work at all. Doesn’t seem to trigger any errors in the console; just doesn’t work.

          You can see an example of the implementation here: http://villagenurserygroup.co.uk/

          • http://codyhouse.co Claudia Romano

            Just uploaded a new version which should solve the bug! @pixelpudding:disqus

  • Dylon Smith

    thanks for this i love it. definitely gonna try in my next project

  • Abdul Razak

    Nice Templete But have an Issue Can anyone solve it. Slider should also work in responsive mobile screen.

  • Joshua

    Simply wanted to say thank you! You guys are really talented developers.

  • Joshua

    Hi Claudia, I think I may have found a little bug. I’ve notice on mobile that the fourth and seventh project won’t load on click. I tried a few iPhones and one Android. Here’s a short YouTube clip of what I’m talking about: https://youtu.be/Isbk6IpMfm0

    • http://codyhouse.co Claudia Romano

      Hi Joshua, thanks for the heads-up! fixed now ;)

      • Joshua

        Thank you, Claudia. You’re amazing. I really appreciate the work you guys are doing. I’m totally grabbing that course when it’s released.

  • Muhammad Junaid

    @disqus_C62KJSQmsi:disqus thanks for a great way of pulling diffrent project content for every link I need exactly the same result but the problem I am having is that I am using a jquery for smooth scroll effect which also works on ids and instead of pulling the id mentioned in the link it scrolls to the id, so can you do it in another way maybe using data-id or something like that , help will be really appreciated :)

    • feamoignargfaionakfj9ajfopamjv

      You can do this on your own…

    • Alex Pearson

      @disqus_E5OxjfYZwr:disqus, I’ve come up with a solution like you’ve described. You can find it here: https://github.com/NAlexPear/squeezebox-portfolio-template … this version is a work in progress, but it allows for separate project content as well as multiple sliders on the same page. Hope this helps!

  • Bon van Chovée

    Fantastic bit of kit!

    is there a way to add text links to the bottom of the initial (show projects) page that are repeated on the ‘back to top’ bar on the project page? (see pix)

    ta

    bvc

  • 548kb

    Is there a way to turn this into a grid instead of a slideshow?

    • Tony Tambe

      The short version is that you will make your grid, giving each box in the grid a separate id and each section of content a separate id. Then you will keep almost all of the same CSS as used in the codyhouse example, but you don’t need all of their jQuery, since so much of it has to do with the slider function. I just did this:

      $(‘#vendor-1′).click(function(){

      $(‘#vendor-1-content’).addClass(‘is-visible’);

      });

      $(‘#close’).click(function(){

      $(‘.vendor-content’).addClass(‘close-content’).removeClass(‘is-visible’);

      });

      Note that I used my own class names for my project, but otherwise it’s all the same. You would need to do this for each id, or figure out the code to dynamically recognize the ids. I didn’t get to that yet.

  • Katia Zanotti

    Hi guys.
    I added just few lines of jQuery in order to open the content of each project

    • sachin K

      Excellent!

    • Kendell Daniel

      The html markup under the comment “the content” goes where? Should it be placed around each list with a different ID for the different projects? Thanks

  • Ron ter Borg

    Hi all,

    I am new to this discussion, as a starting programmer in HTML5, CSS3, jQuery, and Sass.
    First of all, my compliments for the great Bourbon project and the solution offered for multiple project show.
    Yet I have an issue opening the webpage in Safari 5.1.7 under Windows 7. Only half of the opening page is shown, and the project slider shows only 5 of the 9 projects, all in cards with different dimensions.
    Is there a workaround for this?

  • http://www.thejonesjournal.com/ Christopher Jones

    Thank you for this. I am going to try to implement several stacked galleries on top of one another, for several different gallery themes. Wish me luck!

  • http://www.webwoods.co.uk Aziz Hamra Webwoods

    Hi guys, when I click on different projects, it keeps sliding up the same project details panel, how can I make it display different content for each project?
    thanks

    • Dave Morales

      Daniel Alvarez provided the best answer below. I’ve tried it and it works wonderfully.

      • http://www.webwoods.co.uk Aziz Hamra Webwoods

        got it thanks!

  • Dave Morales

    Hello all, quick question. I was trying to use these gallery images to point me to another page instead of the project info sheet(s) that they are currently set up to run. These links I’ve made wont take me anywhere, however. Is there something in the javascipt I need to remove? I don’t know much about JS.

    • Dave Morales

      OR … my original issue was that if I have a long “project details” page, it doesn’t scroll down. If I could fix that I might not have to link to other pages. But the first route would load faster for me.

  • Dave Morales

    If enough content is added in to warrant vertical scroll, I’m running into an issue with Safari where the page won’t scroll unless manually dragging the slider or resizing the window (larger or smaller).

    It’s not doing this for me on Firefox or Chrome. I haven’t changed anything but add a few extra Lorems. Any ideas?

  • Simon

    @548kb:disqus regarding making this a grid (rather than a slider). I’m not a coder, and I’m still working on this, but I have been able to combine this Squeezebox and the Content Filter (https://codyhouse.co/gem/content-filter/) successfully. I did use the Squeezebox version from Alex Pearson on Github (https://github.com/NAlexPear/squeezebox-portfolio-template). Best trick I found is to start with the Content Filter and bring over the Squeezebox components.

    As an aside, I also implemented Angular.js (my first ever play with that) to pull in the .cd-gallery html content (that’s just the full screen text part) from seperate flat HTML files. I just replaced the sample text content with (and of course include angular.js). If anyone has any advice on how best to create a link back to other ‘.cd-gallery content pages’, or even a next link, with Angular or some Ajax method, please share. I’m a bit stumped, not being a proper coder like you guys. Thanks Codyhouse for the great code and design!

  • Gustavo Leitão JS

    Boa tarde,

    Não estou conseguindo adicionar texto, toda vez que eu abro uma caixa ele apresenta o mesmo texto, como eu faço para que ele apresente texto diferentes??????

    HELP

    Project title here

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt, ullam.

    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illum praesentium officia, fugit recusandae ipsa, quia velit nulla adipisci? Consequuntur aspernatur at, eaque hic repellendus sit dicta consequatur quae, ut harum ipsam molestias maxime non nisi reiciendis eligendi! Doloremque quia pariatur harum ea amet quibusdam quisquam, quae, temporibus dolores porro doloribus.

    Illum quaerat asperiores aliquam voluptate saepe omnis porro excepturi in atque veritatis sapiente ipsam voluptates iste amet deserunt ullam error pariatur, magni consectetur optio nostrum minima dolorum. Soluta animi nihil doloremque ipsa incidunt vitae architecto beatae, maxime libero, dolore corporis vero porro tenetur ipsam modi repudiandae magnam enim, quibusdam sit.

    Illum quaerat asperiores aliquam voluptate saepe omnis porro excepturi in atque veritatis sapiente ipsam voluptates iste amet deserunt ullam error pariatur, magni consectetur optio nostrum minima dolorum. Soluta animi nihil doloremque ipsa incidunt vitae architecto beatae, maxime libero, dolore corporis vero porro tenetur ipsam modi repudiandae magnam enim, quibusdam sit.

    Close

  • Tofanelli

    Hi @claudiarrromano:disqus… how’s going? Hope ok… quick question… how to make hooks to each card? In case I want to fav a card or something…..

    Cheers =)

  • http://himandherdaily.com/ himandherdaily.com

    Code works great thank you @disqus_C62KJSQmsi:disqus

  • Neil Paterson

    HELP! i have tried and tried and i cannot get this to work using chrome on a mobile, the fourth project will not display. my home pages are at http://www.worldofnosh.com and i am currently tearing whats left of my hair out trying to get this to work.

    i have used both the fix by Daniel Alvarez and the updated source files without success.

    What am I doing wrong?

  • Apply

    Please can you Update this version because it’s really good job but any bug is not correct for this design for this page for example and for the links.

    Cordialement

  • Pranav Raghaw

    can you suggest any way to how do I embed tiltviewer(a flash based gallery) on the third screen,i.e., the project-info screen. I tried to do it myself, but it shows just blank space.The code given by tiltviewer team is given at https://www.simpleviewer.net/tiltviewer/support/embedding.html .Please help guys @claudiarrromano:disqus @disqus_C62KJSQmsi:disqus

  • Pranav Raghaw

    Hey, can you guys suggest any ways to make 2 sliders, such that when the website is loaded, the sequence from top-to-bottom is–>intro–>slider—>another slider(which must be different for each element in previous slider)–>project info(different for each element in the slider above). please help @claudiarrromano:disqus @disqus_C62KJSQmsi:disqus @katiazanotti:disqus

  • Stanescu Eduard-Dan

    Thanks for the share, i just did my portfolio using this template. You can see it here: http://eduardstanescu.com/

    • Vishnoi Sunny

      Source code??

    • wossen

      can you please share the source code???? Your Portfolio is Amazing!

    • Freddie Valdez

      I really like what you did with your site. You’re an inspiration Stan!
      Hope to follow you on twitter.

    • Claudia Giles

      did you experiment with using multiple background images? having trouble with repeating them correctly with scroll feature.

  • Darani

    Haii guys…How to add links to the cd-project-content ??

  • Naseebullah Ahmadi

    Hi guys, feedback would be appreciated for my portfolio. Thanks!
    http://www.fullstackdeveloper.co

  • Naseebullah Ahmadi

    Hi Sebastiano. How did you create the code syntax above for the code snippets? Did you use any plugins?

  • Freddie Valdez

    Will this work? out of the box?
    Based on the comments below it requires fiddling. Is this version the latest?

  • Freddie Valdez

    It’d be nice If I could just plug in my pics

  • Claudia Giles

    @claudiarrromano:disqus @disqus_C62KJSQmsi:disqus any suggestions on how to do a multi image background with this? When I set multiple images as the background image it only shows one, i think the scrolling feature is overriding. Any suggestions? Thanks!

  • Ashley Tonkin

    Hey @claudiarrromano:disqus how would i go about making each project show a different project information.
    So every time i click on a different project it will display the correct information for that project rather then the same information for all projects ?