jQuery Page Transition Plugin smoothstate.js
Usage
smoothState.js allows you to implement clean and seamless page transitions on your website. To achieve this effect, smoothState handles several tasks:
- Updates the URL using popState
- Fetches content from your server via AJAX
- Replaces the page content with the new content
Basic Method
To implement this functionality, you can run:
1 | $('#body').smoothState(); |
This line of code allows the content of any internal link within the #body container to be updated without reloading the page.
Adding Page Transitions
In traditional animations, scene transitions require extracting a series of frames and displaying them rapidly in sequence. Similarly, smoothState allows you to define an array of functions that return the markup for the outgoing page. This is useful because it allows you to add the HTML structure required for CSS animations. Here is a basic example of a simple fade effect:
Javascript:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | $('#body').smoothState({ renderFrame: [ // Frame 1: sets up scaffolding needed for CSS animations function ($content, $container) { var currentHTML = $container.html(), newHTML = $('<div/>').append($content).html(), html = [ '<div class=\'content\' style=\'height:' + $container.height() + 'px;\'>', '<div class=\'page page--old\'>' + currentHTML + '</div>', '<div class=\'page page--new\'>' + newHTML + '</div>', '</div>' ].join(''); return html; }, // Frame 2: cleans up extra markup added for CSS animations function ($content) { return $('<div/>').append($content).html(); } ]}); |
CSS:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 | /* Page transitions - simple fade effect------------------------------------------------- */#body .content { position: relative; z-index: 1;}#body .page { position: absolute; top: 0; left: 0; width: 100%;}#body .page--old { animation: fadeOut 0.1s ease; /* Don't forget to add vendor prefixes! */ opacity: 0; z-index: 1;}#body .page--new { visibility: visible; animation: fadeIn 0.4s ease; z-index: 2;}/* Animations classes------------------------------------------------- */@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; }}@keyframes fadeOut { from { opacity: 1; } to { opacity: 2; }} |
You can view this simple demo and apply it to your own website.