jquery.cssPageTransitions
Jquery plugin to simplify implementation of full page transitions via Ajax.
The plugin is inspired by http://tympanus.net/codrops/2013/10/30/medium-style-page-transition/
Usage
jQuery.cssPageTransitions depends on jQuery. Include them both in end of your HTML code:
<script src=âjquery.jsâ type=âtext/javascriptâ></script> <script src=âjquery.cssPageTransitions.jsâ type=âtext/javascriptâ></script>
Prepare your CSS with classes for âslide-inâ animations and âslide-outâ animations. For example:
@keyframes next-movein { from { transform: translate3d(100%,0,0); opacity: 0.5; } to { transform: translate3d(0,0,0); opacity: 1; } } @keyframes next-moveout { from { transform: translate3d(0,0,0); opacity: 1; } to { transform: translate3d(-100%,0,0); opacity: 0.25; } } .is-movein, .is-moveout { top: 0; left: 0; position: absolute; width: 100%; } .is-movein { animation: next-movein 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95); } .is-moveout { animation: next-moveout 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95); animation-fill-mode: forwards; }
then all you need to do in your code is to attach cssPageTransitions to your internal page links:
$( document ).ready(function() { $(âaâ).cssPageTransitions( { elementsOut: â.elemToReplaceâ }); });
This causes the targeted class element named â.elemToReplaceâ to transition out and the new source will be loaded to take itâs place.
Settings
These are all the available settings that can be called together with the cssPageTransitions plugin:
$(âaâ).cssPageTransitions( { urlAttr: âhrefâ, onClicked: function() {}, onLoaded: function() {}, elementsOut: âarticleâ, elementsIn: âarticleâ, classOut: â.is-moveoutâ, classIn: â.is-moveinâ, alignWithPrevious: true, scrollDisable: true, updateUrl: true, animationEnded: function() {}, onErrorLoading: null });
urlAttr
Where the url to be loaded resides, default location is in the href-attribute.
onClicked (function)
Custom function that is called when the user has clicked the link.
onLoaded (function)
Custom function that is called when the new page has been loaded successfully.
elementsOut
Determines what element should be replaced with the newly loaded content.
elementsIn
Determines what elements of the newly loaded page to replace with. Enter blank for entire page.
classOut
What class to add to objects that are to be replaced (the class should contain the âfade outâ-animation).
classIn
What class to add to objects that will enter the page (the class should contain the âfade inâ-animation).
alignWithPrevious
Auto align new elements to the top of the window. (requires classIn to have position: absolute to work properly).
scrollDisable
Disable scrolling events while transitioning.
updateUrl
Update the browser displayed url. If the clicked link contained a âtitleâ-attribute then the page title will also be set.
animationEnded (function)
Custom function that is called when the animation or transition of classOut is completed.
onErrorLoading (function)
Custom function that is called if the new page failed to load. If no custom function is defined the destination page will be called again; without ajax and transition effects.
Install
Feel free to install via bower
bower install jquery.cssPageTransitions
License
All code licensed under the MIT License.