Fullscreen Layout with Page Transitions

A simple responsive layout with some fancy page transitions. The idea is to show four items initially and expand them. Some additional page transitions are added for inner items.

FullscreenLayoutPageTransitions

From our sponsor: Try Mailchimp today.

Today we’d like to share an experimental responsive layout with you. Initially, the layout shows four flexible boxes. When clicking on a box, it will expand to fullscreen and the others will scale down and fade out. When closing the current view, it will move back to the intial position while the other boxes come back up again. Another type of page transition can be seen on the works section where we will show a portfolio item by sliding in a panel from the bottom. The current view gets scaled down and disappears in the back.

All effects are done with CSS transitions and controled by applying classes with JavaScript. The whole layout is flexible and some media queries are added to size down things for smaller screens.

Please note: this only works as intended in browsers that support the respective CSS properties.

The beautiful illustrations used in the works section of the demo are by talented Isaac Montemayor.

Let’s take a look at some screenshots:

FullscreenLayoutPageTransitions01

The initial screen has the four flexible boxes. Resize the browser window to see them adapting fluidly.

FullscreenLayoutPageTransitions02

When clicking on a box, it get’s expanded to fullscreen.

FullscreenLayoutPageTransitions03

The view of a box that is expanded. A content are is revealed and we add a scroll to it when needed.

FullscreenLayoutPageTransitions04

In the works section, we add a thumbnail grid which will reveal a details panel once we click on an item. The page transition here is the new item sliding in from the bottom and the old view scaling down and disappearing in the back.

FullscreenLayoutPageTransitions05

The navigation through the items has the same page transition. When we close the item view, it will transition back down and the works view will scale back up again.

We hope you like this little experiment and find it inspiring!

Tagged with:

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 158

Comments are closed.
  1. Hi Mary,

    it’s a great page. thanks for inspiration. hopefully you will submit next great idea. thanks.

  2. I like it. It’s simple yet beautiful. I love the color harmony.

  3. IE ‘question mark’? Why do people still hate on it? If you’re compliant IE 10 will work just fine, and IE 9 may if you’re not using anything too outrageous… Disclaimer: haven’t looked at the source yet.
    Works on my WP8 version of IE10.

    At least treat the browser like a first class citizen; as of 10 it can hold it’s own reasonably well..

  4. in regards to your browser support, this actually works in ie10, and has an error in the latest firefox.

  5. H i _ ! ! !
    . . . what to say . . .
    . . . inspiring . . . “As Always” . . . @Mary Lou
    After so much [ S t e a l i n g ]_ my first written “silly” & “easy” contribution
    To avoid Standard scrollbars, use this (just webkit browsers).
    Ty , Ichtyo

    ::-webkit-scrollbar { width: 12px; } /* Track */ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; /*background: rgba(255,0,0,0.8); */ -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } ::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }

    • . . . you_R_welcome
      P.S.
      . . . 4_the_Rookies: tht code goes into the css
      ^__^

    • In reply to this awesome solution for the scrollbar (kudos, ichtyo!), I tweaked it a little to fit the style of “X” buttons perfectly:

      ::-webkit-scrollbar { width: 10px; } /* Track */ ::-webkit-scrollbar-track { background-color: rgba(255, 255, 255, 0.2); -webkit-border-radius: 10px; border-radius: 10px; } /* Handle */ ::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: #FFF; } ::-webkit-scrollbar-thumb:window-inactive { background: #DDD; }

  6. Hi Mary,

    I love Your fantasy and I would like to use this demo for my portfolio site. Please help me, because it does not work in ie 8, 9. And it is problem for me, because a lot of people use older browsers in my site. I use Analytics and it show me browsers versions.

    Thanks, for Your answer.

    Marion

    • In response to your reply on my earlier comment – you can add the keydown function just about wherever you want to be honest. I’d advise putting it just before the closing body tag in the html – so the html would look like:

      $(document).on(‘keydown’, function(e){
      if (e.keyCode === 27){
      $(‘span.bl-icon-close’).click(); }
      });

      It won’t just send you back one page – it’ll take you back to the home page bit each time because it will act as though you are clicking on every one of the closing tags at once (because they all have the same class). If you want it to just send you back one step then you’ll have to play about with some if functions.

    • Sorry – my other comment didn’t put the html tags in (I forgot that they weren’t allowed). I always put my jquery just before the closing body tag:
      *script*
      $(document).on(‘keydown’, function(e){
      if (e.keyCode === 27){
      $(‘span.bl-icon-close’).click(); }
      });
      */script*
      */body*

      (in place of * use the arrow keys where you normally would)

  7. BY FAR…. The coolest Web Interface I have seen thus far on the Internet…. This could open up so many possibilities for design!
    MARY LOU: THIS GIRL IS ON FIRE !!!

  8. Awesome nav plugin! I’m using it.

    Can I go from one panel to other panel in expanded view?

  9. Hi, I’m sorry if I’m posting this once again. It’s just that the first one didn’t go through somehow.
    Anyway, is there anyway that I can add “Previous Project” in the image slides? This will be very convenient if there are more than 10 images.
    By the way, this works perfectly fine with Internet Explorer 9. I’ll update after I try with 8.
    Hope somebody give me some solution. Thanks.

  10. Can I use or open the script in a tablet or touch based device like iPhone, Samsung Galaxy Tab or touch enabled laptop with WIndows 8? Thanks. This is awesome. I really want to use it there.

  11. Is there a way to start out with one of the sections expanded (i.e. About or Works) on page load, then clicking the close button will return to four boxes/nav?

  12. Hello,

    This script works quite well on my android phone. Nice transition effects.

    However i have an issue with scrollbars wich wouldn’t work while i’m scrolling with my finger.

    Is there a way I can have them efficient ?

    Thank you

    • Scrolling does not work for Android when using the overflow: auto/hidden property. It’s a bug. There is a workaround solution here:

      http://chris-barr.com/2010/05/scrolling_a_overflowauto_element_on_a_touch_screen_device/

      You simply pass the id of the element you want to be able to scroll, however; that is not very efficient for this project because you’ll have to call the function everytime and pass it an id for each element you want to have the scrolling ability since the solution assumes you only have one element you need to have scroll.

      You could try to modify the solution by referencing a class name instead of an id. Maybe use jQuery’s .on() method (with the newer jQuery source).

  13. Anyway to just start from the Works page and not have the main page with the 4 boxes?

    thanks, Mary

  14. Hi – This is beautiful code!!
    But i am a beginner.

    can you explain to me how the content is intially hidden behind the box?
    I would like to reduce the intial size of the four boxes but still have them open to a %100 width and %100 height.
    when i reduce the container size the pages are no longer full screen and i would like them to be

  15. is there anyway to add a back button when viewing the individual portfolio projects? along with the next button, i would like to add a back button. how do i go about this?

  16. I would like to use larger images in the Work section, but when seen on mobile the margins are too large. Where do I adjust those?

    • You can adjust your media styles at the bottom of the .css file
      @media screen and (max-width: 46.5em) { .bl-content, .bl-box { font-size: 75%; } .bl-expand .bl-box { height: 130px; } .bl-content > ul li { width: 40%; } }

    • just to add a bit of info:

      @media is a media query and “and (max-width: 46.5em)” is the qualifier.

      It’s basically saying “if the browser width is 46.5em or smaller then push the css below to the browser”
      It’s intended for iPads and such as I’m sure you know.

      It needs to be added last so that it can override any changes and as we all know css stands for cascading style sheet.

  17. Hi, I like it very much!
    One question though, has been asked before, but I don’t see an answer, is it possible to use different icons? Whether they are png, jpg or svg-files?

    Thanks.

    • Hi Wouter,
      First and foremost Mary Lou you’ve changed my life. The best I’ve ever seen. Thanks!

      1: You can generate/download your icons from http://icomoon.io/app.
      2: Unzip your downloaded file
      3: Copy/past fonts folder to yoursite/where-fonts-ares/fonts/
      4: Open component.css and change from line 170 your icons name to match the new ones
      5: Update “lte-ie7.js” into yoursite/where-JS-ares/ with the one at the root of unziped file.

      Hope this help.

  18. edit: added in some code that fell out.

    Hey Mary Lou,
    I’ve been messing around with the js for a while now but can’t seem to get the —div class=”bl-panel-items” id=”bl-panel-work-items”— to duplicate correctly. I’m trying to style multiple —div class=”bl-panel-items” id=”bl-panel-work-items”—s, each dependent on which bl-box they come from.

  19. Thanks nick, that helped! What about the work items themselves? Adjusting the media styles seems to have no effect on those. Only on the thumbnails themselves.

  20. Hi, I like it very much! Very Cool work!
    Is there a possibility to get it running with older browsers (IE8, 9)?
    Thanks

  21. Woww… simply amazing. I didn’t liked only 1 thing … the scroll bar in the Blog section.

  22. Great, nice, smooth… simple… really nice… Thanks a lot for this great job.

    I would like to know: how can I add other bouttons to go to the home or to the gallery?

    Thank you very much

  23. Hello, excellent work!

    Is it possible to simulate the hover effect when hovering a menu (in a different part of the page)?
    I managed to simulate the click by doing the code below but the same “logic” doesn’t work (nothing happens) with hover.
    $("#menuItemID").on('click', function() { $(".bl-expand").children('.bl-icon-close').trigger('click'); $('#idOfInnerSpan').trigger('click'); });

  24. I´m experimenting with this using a WordPress framework and got it to work with 6 boxes also. Question: Does anybody know a polyfill to make the page-transitions (translateY and similar) work in older browsers, too (especially IE of course, urgh…)?

    • SiGa.

      Have you got this into WordPress as it’s own theme? I would be sooo interested in that….

  25. Wow, Mary Lou! I must say that you continually impress and me and have inspired me to take my understanding of javascript and css to the next level. Also, how awesome would this be combined with the Gamma gallery? Off tha hook! Thanks again! You are the best! 🙂

  26. Hello,
    I’m new here and was wondering if it was possible to change the icons? How would I go about it?
    thank you

  27. what if I want to make 6 boxes?
    and each box is the same style with the box “work” (can display images, and each image description)
    I tried to multiply the id ‘work-items’ but it doesn’t work
    and I can not make a responsive 6 boxes stack ( I tried to modified the nth child- and it doesn’t work too 🙁 _
    can anyone help me? thank you in advance
    ! bad english sorry

    • make these changes in css and put two more div
      .bl-main > section {
      position: absolute;
      width: 32%;
      height: 48%;
      }

      .bl-main > section:first-child {
      top: 0;
      left: 0;
      background: #F06060;
      }

      .bl-main > section:nth-child(2) {
      top: 0;
      left: 33%;
      background: #FA987D;
      }

      .bl-main > section:nth-child(3) {
      top: 0%;
      left:66%;
      background: #72CCA7;
      }

      .bl-main > section:nth-child(4){
      top: 50%;
      left: 0;
      background: #F06060;
      }

      .bl-main > section:nth-child(5) {
      top: 50%;
      left: 33%;
      background: #FA987D;
      }

      .bl-main > section:nth-child(6) {
      top: 50%;
      left:66%;
      background: #72CCA7;
      }
      🙂

  28. hi! truly inspiring stuff!

    one thing i could need a piece of advice on though:

    in the works section the close button is on the top-right corner:

    .bl-main > section .bl-icon-close {
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    }

    how can i apply this same positioning (top right) to the close button and ‘next project’ link for the individual work? – i.e.:

    div.bl-panel-items nav {
    position: absolute;
    z-index: 9999;
    width: 216px;
    left: 50%;
    top: 0px;
    margin-left: -108px;
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-in-out 0.5s;
    -moz-transition: opacity 0.2s ease-in-out 0.5s;
    transition: opacity 0.2s ease-in-out 0.5s;
    }

    have tried a good number of things with this – any help appreciated!

    • I see that the ‘top’ value here can be manipulated to move the individual works’ close buttons around:

      div.bl-panel-items.bl-panel-items-show nav {
      opacity: 1;
      top: -70px;
      }

      however it isn’t ideal, as it does not match the position of the other close button, and gets really messy on browser re-size!

  29. Thank you for this great design. Again I learn a lot in website creations. Ik do have a question though: Has anyone used Lightbox in this design? I’ve tried to get it in here but for some reason it keeps refusing whatever I try to do. Because I’m not a pro I might be doing something silly so any help would be appreciated.

  30. Hi!

    I tried to change just the font from the texts in the home page but i couldn’t.
    It’s possible to have the icons with the icomoon font and the texts with another font?

    Thanks!

  31. Hi,

    I tried experimenting with this layout. However, i have trouble writing <a> tags in the html file. Whenever I try putting a link, it always have the index.html file as its base url. Any idea how to correct that?

    thanks

  32. I’m very thankful to you for this wonderful code…
    but i’m having a problem using this design , i’m applying form inside a box and submit button doesn’t work in that …
    as i click on Submit the page Reloads , Please help me out…

  33. Thanks for your great work!
    I tried to put a flash content in the details panel. I am able to see my flash content but the interaction in my flash content doesn’t work. Do you know why?