Full Page Transitions with jQuery CSS3 cssPageTransitions - Download Full Page Transitions with jQuery and CSS3 - cssPageTransitions

Download Full Page Transitions with jQuery and CSS3 – cssPageTransitions

By Posted on

This time I will share jQuery Plugin and tutorial about Full Page Transitions with jQuery and CSS3 – cssPageTransitions, hope it will help you in programming stack.

Full Page Transitions with jQuery CSS3 cssPageTransitions - Download Full Page Transitions with jQuery and CSS3 - cssPageTransitions
File Size: 147 KB
Views Total: 2874
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

Demo Download

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

Basic usage:

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

view source
1 <script src="//code.jquery.com/jquery-2.1.4.js"></script>
2 <script src="jquery.cssPageTransitions.js"></script>

2. Add custom CSS3 animations for the page transitions.

view source
01 @keyframes
02 prev-movein {  from {
03 transform: translate3d(-100%, 0, 0);
04 opacity: 0.5;
05 }
06  
07 to {
08   transform: translate3d(0, 0, 0);
09   opacity: 1;
10 }
11 }
12  
13 @keyframes
14 prev-moveout {  from {
15 transform: translate3d(0, 0, 0);
16 opacity: 1;
17 }
18  
19 to {
20   transform: translate3d(100%, 0, 0);
21   opacity: 0.25;
22 }
23 }
24  
25 @keyframes
26 next-movein {  from {
27 transform: translate3d(100%, 0, 0);
28 opacity: 0.5;
29 }
30  
31 to {
32   transform: translate3d(0, 0, 0);
33   opacity: 1;
34 }
35 }
36  @keyframes
37 next-moveout {  from {
38 transform: translate3d(0, 0, 0);
39 opacity: 1;
40 }
41  
42 to {
43   transform: translate3d(-100%, 0, 0);
44   opacity: 0.25;
45 }
46 }
47  
48 .is-movein-left, .is-movein-right, .is-moveout-left, .is-moveout-right {
49   backface-visibility: hidden;
50   top: 0;
51   left: 0;
52   position: absolute;
53   width: 100%;
54 }
55  
56 .is-movein-left { animation: prev-movein 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95); }
57  
58 .is-moveout-left {
59   animation: prev-moveout 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
60   animation-fill-mode: forwards;
61 }
62  
63 .is-movein-right { animation: next-movein 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95); }
64  
65 .is-moveout-right {
66   animation: next-moveout 0.5s cubic-bezier(0.445, 0.05, 0.55, 0.95);
67   animation-fill-mode: forwards;
68 }

3. Create a link pointing to the next page.

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

4. Add page transitions to the next link.

view source
1 $('.next').cssPageTransitions( {
2   elementsOut: 'article',
3   classOut: 'is-moveout-right',
4   classIn: 'is-movein-right',
5   animationEnded: function() {
6       $('.is-moveout-right').remove();
7       registerCssTransitions();
8   }
9 });

5. Initialize the plugin.

view source
1 $( document ).ready(function() {
2   registerCssTransitions();
3 });

6. Available options.

view source
01 // Where the url to be loaded resides
02 urlAttr: 'href',
03  
04 // Allow external urls
05 externalUrl: false,
06  
07 // what element should be replaced with the newly loaded content
08 elementsOut: 'article',
09  
10 // what elements of the newly loaded page to replace with.
11 elementsIn: 'article',
12  
13 // What class to add to objects that are to be replaced
14 classOut: '.is-moveout',
15  
16 // What class to add to objects that will enter the page
17 classIn: '.is-movein',
18  
19 // Auto align new elements to the top of the window.
20 alignWithPrevious: true,
21  
22 // Disable scrolling events while transitioning.
23 scrollDisable: true,
24  
25 // Up<a href="https://www.jqueryscript.net/time-clock/">date</a> the browser displayed url.

source : jqueryscript.net

Related posts:

26