Full Page Transitions with jQuery and CSS3 - cssPageTransitions

File Size: 147 KB
Views Total: 3368
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
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:

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.