Full Page Transitions with jQuery and CSS3 - cssPageTransitions

cssPageTransitions is a jQuery plugin which utilizes AJAX method and CSS3 animations to create smooth transition effects as you jump to other web pages.

See also:

• Awesome Page Transition Effects with jQuery and CSS3 - PageTransitions

Basic usage:

1. Include the jQuery cssPageTransiitons plugin after jQuery JavaScript library as follow:

<script src="//code.jquery.com/jquery-2.1.4.js"></script>
<script src="jquery.cssPageTransitions.js"></script>

2. Add custom CSS3 animations for the page transitions.

@keyframes 
prev-movein {  from {
transform: translate3d(-100%, 0, 0);
opacity: 0.5;
}

to {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
}

@keyframes 
prev-moveout {  from {
transform: translate3d(0, 0, 0);
opacity: 1;
}

to {
  transform: translate3d(100%, 0, 0);
  opacity: 0.25;
}
}

@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-left, .is-movein-right, .is-moveout-left, .is-moveout-right {
  backface-visibility: hidden;
  top: 0;
  left: 0;
  position: absolute;
  width: 100%;
}

.is-movein-left { animation: prev-movein 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95); }

.is-moveout-left {
  animation: prev-moveout 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  animation-fill-mode: forwards;
}

.is-movein-right { animation: next-movein 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95); }

.is-moveout-right {
  animation: next-moveout 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
  animation-fill-mode: forwards;
}

3. Create a link pointing to the next page.

<a href="page2.html" class="next">Next Article</a>

4. Add page transitions to the next link.

$('.next').cssPageTransitions( {
  elementsOut: 'article',
  classOut: 'is-moveout-right',
  classIn: 'is-movein-right',
  animationEnded: function() {
      $('.is-moveout-right').remove();
      registerCssTransitions();
  }
});

5. Initialize the plugin.

$( document ).ready(function() {
  registerCssTransitions();
});

6. Available options.

// Where the url to be loaded resides
urlAttr: 'href',

// Allow external urls
externalUrl: false,

// what element should be replaced with the newly loaded content
elementsOut: 'article',

// what elements of the newly loaded page to replace with.
elementsIn: 'article',

// What class to add to objects that are to be replaced
classOut: '.is-moveout',

// What class to add to objects that will enter the page
classIn: '.is-movein',

// Auto align new elements to the top of the window.
alignWithPrevious: true,

// Disable scrolling events while transitioning.
scrollDisable: true,

// Update the browser displayed url.
updateUrl: true,

// Callbacks
onLoaded: function() {},
onClicked: function() {},
animationEnded: function() {},
onErrorLoading: function() {}

Change logs:

2015-09-02

• better selector for animationEnd target

2015-09-01

• various optimizations
• Disables mobile scrolling during transitions

2015-08-28

• height edjustment after transition

2015-08-14

• Fixed back button in chrome

2015-08-13

• Added onClicked function support and fixed safari page refresh bug

---

This awesome jQuery plugin is developed by erikfriberg. For more Advanced Usages, please check the demo page or visit the official website.