WebAnaya - Web Development & Digital Marketing Agency
Back to Blog
CSS3
WebAnaya TeamWebAnaya Team

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.

fullscreen-page-transition-effect

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.

DemoAccess TutorialDownload Source

Related Posts

Create inside look book preview like Amazon in css3 and html5

In digital age almost everyone buy or order books either paper pack or digital ebook from ecommerce websites i.e. Flipkart, Amazon, ebay etc. These books selling ecommerce websites offer preview of the book before reader finally purchase it, to do that they showcase preview with different layout, you also must have notice the amazon way […]

Learn how to animate thumbnail grids
October 23, 2013WebAnaya TeamCSS3

Thumbnail grids are highly used to show items of a web page in list view with the help of Ajax driven pagination, you can animate thumbnail grid with the help of CSS3 animations. Codrops team has created a wonderful tutorial to give different kind of animations to your thumbnail grids. With the help of this […]

Showcase your mobile app with 3D effects
August 17, 2013WebAnaya TeamCSS3

There are millions of mobile apps are available for different devices irrespective of their operating systems. Due to increasing uses of smartphones demand of mobile apps are increasing day by day and mobile developers are putting their best of efforts to fulfill those demands. Selling or increasing the user base for a particular mobile app […]