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

View demo Download source

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!

View demo Download source

Previous:
Next:

Tagged with:

Mary Lou (Manoela Ilic) 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.

View all contributions by

Website: http://tympanus.net/

Related Articles

Feedback 152

Comments are closed.
  1. 2

    Hi Manoela,

    We’re using your fullscreen layout Page Transitions code as a base for our html site which will be converted to an ipad app that acts as a product catalog. We have four levels – top level is the four boxes, each of which goes to a menu level (2) that has icons for each product. Each icon links to level 3 which is a static banner image of the product and three icons linking to level 4 pages – Photos / Video / Documents. What we have found is that when we put a jQuery lightbox photo gallery for one product on level 4, we are not allowed to have more than one photo gallery (in other words – the same photo gallery is repeated for each product and the code can’t differentiate between a photo gallery for one product and another). Do you know why this might be and how we can fix this? Many thanks. :)

    • 3

      Hi Ben,

      I was having this issue with one of my wordpress sites, Then I have found a solution for it.

      We need to change lightbox ‘rel’ name for every image group.

      i.e

      group 1:
      <a href=”images/image1.jpg” rel=”nofollow”>
      <a href=”images/image2.jpg” rel=”nofollow”>

      group 2:
      <a href=”images/image3.jpg” rel=”nofollow”>
      <a href=”images/image4.jpg” rel=”nofollow”>
      <a href=”images/image5.jpg” rel=”nofollow”>

      May be this will work for you.

    • 4

      Hi Ben,

      I was having this issue with one my wordpress sites, and I’ve a solution for it.

      You may want to add different ‘rel’ name for every image group.

      group 1:

      anchor tag href=”images/image1.jpg” rel=”lightbox[gallery1] (your image1 here) close anchor tag

      anchor tag href=”images/image2.jpg” rel=”lightbox[gallery1] (your image2 here) close anchor tag

      group 2:

      anchor tag href=”images/image1.jpg” rel=”lightbox[gallery2] (your image1 here) close anchor tag

      anchor tag href=”images/image2.jpg” rel=”lightbox[gallery2] (your image2 here) close anchor tag

      anchor tag href=”images/image3.jpg” rel=”lightbox[gallery2] (your image3 here) close anchor tag

      I hope this will work for you,

      cheers.

  2. 5

    Hi,

    I really love this template and I am playing around to use it as my portfolio site.

    There is one single flaw though. The css file it not mobile first which means that all the code for larger screens like tablet and desktop will be loaded when someone uses his smartphone to visit the site.

    I use a blurred oversized background image for desktop and tablets in the body and all the expanded sections have a opacity of 0.7 and a different background color (gives a nice effect).

    With the default css the background image will also be loaded by the user agent on a smartphone, because this uer agent goes through the complete css file untill it fiinds “it’s” part.

    It would be even better, than it is already, when this would be changed with “min-width” media queries :)

    But, like I said before, this is an awesome theme and I really love it!

    Thnaks for showing and making it available for donwoad.

    Regards,

    Rob van Linda

  3. 6

    Hi

    Can anybody tell how can i add this effect in my existing child theme(attitude is parent theme)

  4. 8

    Hi
    Grate job well dune
    can you help with how to use iframe that will change every time i change the link

  5. 9

    Hello, love the demo! But i was just wondering if there was a way to give every page its specific url? and still keep the same transitions?

  6. 10

    Hey, love this project, but stumbled across a “bug”, that doesn’t seem to be completely related to the code itself.

    Some time ago i used the code for my website, and got the Lato font working flawlessly. Now, neither the demo on this site here, or any of my own pages shows the correct font. Is there any workaround on this?

Comments are closed.