Transition.js

This repository is just a wrapper around the code provided for Codrops article on Page Transitions.

Features

Next page transition.
Previous page transition.
Go to a particular page.
Add custom animation.
Add a list of animation to be played randomly.

Install

####Install via Bower bower install transition.js

Getting Started

###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-trigger element with values between 1 to 67. 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-trigger element, with values -1 or -2 or 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 like data-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>

Contributing

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.

License

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.

ultraheroe / transition.js