•1 min read•Tutorial•

Page transition effect with full screen layout

fullscreen-page-transition-effect

In my previous post I shared a wonderful tutorial to create responsive multilevel navigation.

Here in this post I am going to share a tutorial on full screen page layout with transition effect. It enables you to open your webpage content with a transition effect with full screen layout.

The layout shows four flexible boxes each box has link over it when you click on a particular box the content of the box will expand with transition effect and cover your entire browser screen with full screen layout, on revealed page you can see the close button icon once you will click on it the content of page will wiped out and the previous page lout will remain visible with four boxes.

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

About the Author

Durgesh Gupta

Author

Content Writer at WebAnaya

Published: April 24, 2013Updated: November 12, 2026

Related Posts

How to Install Zpanel in Centos 6.4+ ?
July 4, 2015•Durgesh Gupta•Tutorial

How to Install Zpanel in Centos 6.4+ ?

Zpanel is an open source Linux/Windows-based (in order to install it on Windows you need Apache, PHP, Mysql installed) control panel. This is alone kind of open source control panel of its kind with rich user interface. To install the Zpanel you need a freshly installed Centos (tested on centos particularly, also compatible with other […]
Read article
Full screen overlays navigation for Inspiration by Codrops Team
February 11, 2014•Durgesh Gupta•Tutorial

learn to create full screen overlay navigation

Codrops has just shared a very nice inspirational full screen overlay navigation built in CSS3 and HTML5. With the help of this beautiful tutorial you can learn to create full screen overlay navigation web page in CSS3 and HTML 5 by using variety of transition effects i.e. huge inc, corner, slide down, scale, door, content […]
Read article