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 monthly sponsor: Create your beautiful portfolio website with Squarespace. Start your free trial.Advertisement

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:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 158

Comments are closed.
    • 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)

  1. 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 !!!

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

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

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

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

  5. 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?

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

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

    thanks, Mary

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

  9. 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?

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

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

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

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

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

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

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