Thursday, May 16, 2013

CSS 3 Full Screen Page Transitions

While doing my research on cool CSS3 properties and new ideas, I ran across a website called Cod Drops. They have some really cool tutorials and inventions on their site. One of my favorite inventions that they had come up with was to make a website feel more like software. I think our goal for every project is to take the user experience to the next level which requires a more cohesive design and a smooth experience that makes you feel like you are having an experience rather than point and clicking on a website.


When closing the current view, it will move back to the initial 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 controlled by applying classes with JavaScript. The whole layout is flexible and some media queries are added to size down things for smaller screens. 

If you feel like you are trapped, use the 'escape' key to get back to the homepage.

This is my variation of the CSS 3 Fullscreen Page Transitions.

For example - this is how I would display the work panel on click:
  z-index: 1000; 
 opacity: 1; 
 -webkit-transform: translateY(-100%); 
 -webkit-transition: -webkit-transform 0.5s ease-in-out;
 -moz-transform: translateY(-100%); 
 -moz-transition: -moz-transform 0.5s ease-in-out; 
 transform: translateY(-100%); 
 transition: transform 0.5s ease-in-out; 
 -ms-transform: translateY(-100%); 

This is how I would hide that work panel upon close:
  opacity: 0; 
 -webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; 
 -webkit-transform: translateY(-100%) scale(0.5); 
 -moz-transition: -moz-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; 
 -moz-transform: translateY(-100%) scale(0.5); 
 transition: transform 0.5s ease-in-out, opacity 0.5s ease-in-out; 
 transform: translateY(-100%) scale(0.5); 
 -ms-transform: translateY(-100%) scale(0.5); 
 z-index: 0; 

All of the transformations occur with valid css, but the actions are triggered by basic javascript functions. The functions are kept in a separate JS file just for the ease of visualizing how the triggers work. You might have an easier time viewing the actual source once you check out the live demo.

11 comments:

  1. Great.. Tutorial is just awesome..It is really helpful for a newbie like me...

    JavaScript Online Training JavaScript Online Training JQuery Online Training JQuery Online Training
    JavaScript Course | HTML5 Online Training

    ReplyDelete
  2. Good post and I like it very much. By the way, anybody try this app development company for iOS and Android? I find it is so professional to help me boost app ranking and increase app downloads.

    ReplyDelete
  3. Hello There,

    A spot on observation on what probably is “the” underlying details of the.Too many people don’t even think about wherever there will be actual demand and more importantly what happens if this demand comes later (or maybe a lot later) than they expect

    I Want to Know All about Sorting and Searching , Can Someone Help???

    Great effort, I wish I saw it earlier. Would have saved my day :)

    Best Regards,
    Preethi

    ReplyDelete