This repository is just a wrapper around the code provided for Codrops article on Page Transitions.
- Next page transition.
- Previous page transition.
- Go to a particular page.
- Add custom animation.
- Add a list of animation to be played randomly.
####Install via Bower
bower install transition.js
###Page Anatomy
-
.pt-wrapper - Add this class to the wrapper div with all the pages and buttons.
-
.pt-trigger - Add this class to the elements to trigger the animation on click.
-
.pt-page - Add this class to all the individual pages.
-
data-animation - This attribute is added to
.pt-triggerelement with values between1to67. If you need random animation then the values should be separated by-
data-animation="57" it does the 57th animation.
data-animation="50-51-52-53-54" it does a random animation from the list.
- data-goto - This attribute is added to
.pt-triggerelement, with values-1or-2or any valid page number starting from 1 inside the.pt-wrapper.
data-goto="-1" trigger next page.
data-goto="-2" trigger previous page.
data-goto="2" trigger to go to page 2.
####Sample in action
Adding the transition.js
<script src="js/jquery-1.9.1.min.js"></script>
<script src="js/transition.js"></script>
Adding the HTML
<div class="pt-wrapper">
<div class="pt-trigger-container">
<button class="pt-trigger" data-animation="1" data-goto="-1">Go to next page</button>
<button class="pt-trigger" data-animation="2" data-goto="-2">Go to previous page</button>
<button class="pt-trigger" data-animation="58" data-goto="1">Go to page 1</button>
<button class="pt-trigger" data-animation="51-52-53-54-55" data-goto="2">Go to page 2</button>
</div>
<!--All Pages-->
<div class="pt-page pt-page-1">
<h1><strong>Page 1</strong></h1>
</div>
<div class="pt-page pt-page-2">
<h1><strong>Page 2</strong></h1>
</div>
</div>
##Down the line
- Add single page highlighting all the available animation.
- Add range for random animation.
something likedata-animation="1:10"will make random animation from 1-10. - More samples.
###Working with Scroll Navigation and Arrow Key Navigation
Download latest jquery.mousewheel for mouse scroll
<script type="text/javascript">
$(document).ready(function (){
// Mouse Scroll
$('body').mousewheel(function(event, delta) {
if (delta < 0 ){
$("#nextpage").trigger("click");
}
else if (delta > 0){
$("#prevpage").trigger("click");
}
});
// Arrow Keys
$("body").keydown(function(e) {
if(e.keyCode == 37) { // left
$("#prevpage").trigger("click");
}
else if(e.keyCode == 39) { // right
$("#nextpage").trigger("click");
}
});
});
</script>
- Fork it.
- Create a branch. (
git checkout -b my_transition) - Commit your changes. (
git commit -am "Added Feature") - Push to the branch. (
git push origin my_transition) - Open a Pull Request.
- Enjoy a refreshment and wait.
All the CSS animations in animation.css were written by Codrops and therefore fall under their license. All other source code is released under the MIT License.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent