WebAppers

/ best free open source web resources /

Graphic Resources

How to Make FullScreen Page Transitions with CSS

Posted · Category: Information, License Free

Codrops has shared Fullscreen Layout with Page Transitions with us. 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.

full-screen-transitions

Requirements: JavaScript Framework
Demo: http://tympanus.net/Development/FullscreenLayoutPageTransitions/
License: License Free

2 Comments
  • Last few days, i am confused about the full page transitions and search out a lot on it but haven’t succeed before i came here. Now, I got complete knowledge and looking for implement it on my work.

  • BK Alley

    Correction, they show the transitions. They really don’t teach how. More like showing off their knowledge. As a newbie I still have no idea how to actually do it.

Supported By

Deals

Web Browsers Icon Set
Food Icon Set
Flat Icon Set

Flat Icon Set

100 icons