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: monday.com is the last team management and design process tool you’ll ever need. 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.
  1. Fantastic work!
    I tried to put a header at the top of the page with a logo and some text.
    I want that this logo and this title to resize automatiquely (bigger or smaller) depending on the browser window dimension.
    Can someone help me! Please!
    Thank you.

    • You just have to create a @media property on css, that resizes depending on the viewport size. Try to search on google. Is something like:
      .target {
      margin-top:70px;
      @media (min-width: 992px) {
      .target {
      margin-top: 30px;
      }

  2. Hello, I was wondering if there is any way to put more works by row on the work page, I looked at the CSS and didn’t seem to find a way to do it.. Cheers !

  3. Hi! There seems to be something wrong with the Works section. Whenever I click on the sixth (and more) photos, the individual work items won’t display properly. But it works just fine (the individual work items, with enlarged pictures and description, show up) for photos 1 through 5. What gives?

  4. Hi.
    Its been asked before but how would i position the close box in the projects panels at the top right, the same as the main sections ??

  5. Mary Lou your articles are never less than stunning.

    Many thanks 🙂
    xx

  6. Amazing work! To make it fully compatible with IE10 you can just add visibility:hidden; to the:

    .bl-content,
    div.bl-panel-items > div > div {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 37px;
    left: 29px;
    right: 30px;
    bottom: 30px;
    padding: 0 20px;
    overflow: hidden;
    overflow-y: auto;
    }

    and visibility:visible; to:

    section.bl-expand .bl-content,
    section.bl-expand .bl-icon-close {
    pointer-events: auto;
    opacity: 1;
    -webkit-transition: opacity 0.3s linear 0.5s;
    -moz-transition: opacity 0.3s linear 0.5s;
    transition: opacity 0.3s linear 0.5s;
    }

    It will get rid of the mouse events ‘falling’ through div’s.

  7. Excelente tutorial, queria hacer algunas preguntas:
    1- Como cambiar la fuente que figura debajo de los iconos?
    2- En la seccion de WORKS como poder agregar mas de 4 que son lo que vienen por defecto?
    3- Como se podria insertar imagenes en otras partes del sitio y no solo en WORKS?

    Muchas Gracias. Thank You Very Much.

  8. Hi, this is an awesome concept for a user that doesn’t want to be bombarded with image overload. However, I find that even though it scales for mobile, it’s not scrolling at all on Android.

  9. Hey m8, great template !!!

    I have one question … is there a way to ad a previous project button ?

    Tyvm,
    RobertG

    • I know it’s been almost two years since you asked this question, but I thought I’d chime in in case you or someone else might find it useful. Like others here, I also started using this as the base for my portfolio site. I figured out a way to add a previous link by adding the code below to boxlayout.js. Just copied the “next” code, and rejigged one of the lines a little. To have it loop around properly, you need to set the last number to the total number of work panels you have (-1). Hope this helps.

      And Manoela, I’d also like to thank you for this, and all the awesome stuff you share on this site.

      ********************

      First, under:


      // navigating the work panels
      $nextWorkItem = $workPanelsContainer.find( 'nav > span.bl-next-work' ),

      add:


      $prevWorkItem = $workPanelsContainer.find( 'nav > span.bl-prev-work' ),

      Then you can add the following under the main block of “next” code:


      // navigating the work items: current work panel scales down and the previous work panel slides up
      $prevWorkItem.on( 'click', function( event ) {

      if( isAnimating ) {
      return false;
      }
      isAnimating = true;

      var $currentPanel = $workPanels.eq( currentWorkPanel );
      currentWorkPanel = currentWorkPanel > 0 ? currentWorkPanel - 1 : 8; // edit this number to your total number of panels -1
      var $prevPanel = $workPanels.eq( currentWorkPanel );

      $currentPanel.removeClass( 'bl-show-work' ).addClass( 'bl-hide-current-work' ).on( transEndEventName, function( event ) {
      if( !$( event.target ).is( 'div' ) ) return false;
      $( this ).off( transEndEventName ).removeClass( 'bl-hide-current-work' );
      isAnimating = false;
      } );

      if( !supportTransitions ) {
      $currentPanel.removeClass( 'bl-hide-current-work' );
      isAnimating = false;
      }

      $prevPanel.addClass( 'bl-show-work' );

      return false;

      } );

  10. I love it. I want to make it the foundation of my new portfolio. I’m wondering if it possible to use .load() for loading content into work panels. I’m experimenting with that but there’s an issue with CSS transitions applied to an element loaded with Ajax.

  11. Hello Miss, I love your work, its truly awesome. All your CSS work is flawless, you are my inspiration.

  12. Great work. But I have some question. I actually look at the CSS and never found the solution.
    Which of the code that makes the content hide and open when clicking the box?

  13. Hey, great article, I love the result.
    Just one question: how can I get the “blog” and “works” section to work along with wordpress?

    Thanks

  14. Also how to include an email form? After refreshing the page is returns to the index screen. Any solution?