background preloader

A Collection of Page Transitions

A Collection of Page Transitions
A showcase collection of various page transition effects using CSS animations. View demo Download source Today we’d like to share a collection of creative page transitions with you. We’ve put together a couple of animations that could be applied to “pages” for creating interesting navigation effects when revealing a new page. While some effects are very simplistic, i.e. a simple slide movement, others make use of perspective and 3d transforms to create some depth and dynamics. Please note that this is just for showcasing some interesting effects and for inspiration. The CSS animations are divided into different sets, depending on what they do. Please note: this only works as intended in browsers that support the respective CSS properties. For showcasing the page transitions, we’ve used the following structure: The perspective container is relative and we add a perspective of 1200px to it. I hope you enjoy this and get inspired to build some exciting things!

Related:  Banque d'effet JSCodropsCSSSite tuiles

Vertical Timeline A responsive vertical timeline layout with icons and example media queries. View demo Download source This is a simple responsive timeline with alternating colors for the labels. An icon font is used for the icons in the timeline waypoints and some example media queries show how to adjust the timeline for smaller screens. The main structure of the timeline is an unordered list. The HTML Multi-Level Push Menu An experimental push menu with multi-level functionality that allows endless nesting of navigation elements. View demo Download source Today we want to share another menu experiment with you. For sure you are familiar with the off-canvas navigation on mobile apps and the implementations for responsive websites like the one by David Bushell. We tried to explore the possibility of creating a nested multi-level menu, something that could be quite useful for menus with lots of content (like navigations of online stores). The result is a “push” menu that can (theoretically) contain infinite nested sub-menus.

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. View demo Download source Today we’d like to share an experimental responsive layout with you. Animated Border Menus A tutorial on how to create a off-canvas icon navigation with an animated border effect. The menu effect is inspired by CreativeDash's bounce menu for mobile apps. View demo Download source The other day I saw a really nice concept of a menu on the UI8 site. CreativeDash implemented that gorgeous concept and I instantly had some ideas for more effects involving border transitions but also with the desktop in mind.

Fixed Background Scrolling Layout A fixed background image scrolling layout with 100% height panels and smooth scrolling. View demo Download source A simple scrolling layout with fixed background images using background-attachment: fixed and a navigation. Page Loading Effects A set of creative page loading effects that use SVG animations with Snap.svg. The idea is to show an overlay with a interesting shape animation while new content gets loaded. View demo Download source If you have visited the brilliantly designed websites of Nicolas Zezuka and Active Theory you might have noticed the slick loading animations that happen before new content is displayed.

Heading Set Styling with CSS We choose to go to the moon. We choose to go to the moon in this decade and do the other things, not because they are easy, but because they are hard, because that goal will serve to organize and measure the best of our energies and skills, because that challenge is one that we are willing to accept, one we are unwilling to postpone, and one which we intend to win, and the others, too. This is a simple title of level 2 The surface is fine and powdery. How To Add Page Transitions with CSS and smoothState.js The following is a guest post by Miguel Ángel Pérez. Miguel has been working at Weblinc on ways to transition pages on websites more gracefully. On single-page applications, we have more opportunity for this since we aren't fighting the page reload. But traditional sites with page reloads, you can still be quite graceful with some help from CSS and JS. In this article Miguel focuses on setting up the CSS to do this and making it work with his plugin. CSS animations (and a little JavaScript trickery) can let us add page transitions and move away from the hard-cut of page loads.