jQuery Sequency js

jQuery plugin which enables you to compare the differences between a set of images in sequence as your scroll down and up.

How to use it

1. Create a container for the before/after image comparison interface.

   <div id="sequency-container" >
    
   </div>
   

2. Import jQuery library and the jQuery sequency.js into the webpage.

   <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
   <script src="js/jquery.sequency.js"></script>
   

3. Add the images you want to compare into a JSON object.

   var $jsonSource =  [
       {caption:"Skeleton", img:"img/1.png"},
       {caption:"Projection", img:"img/2.png"},
       {caption:"Muscle groups", img:"img/3.png"},
       {caption:"Muscles", img:"img/4.png"}
   ];
   

4. Initialize the plugin on the container you just created.

   var $jsonSource =  [
       {caption:"Skeleton", img:"img/1.png"},
       {caption:"Projection", img:"img/2.png"},
       {caption:"Muscle groups", img:"img/3.png"},
       {caption:"Muscles", img:"img/4.png"}
   ];
   

5. The required CSS styles. Add the following CSS snippets into your CSS file.

       .seq-wrapper {
         margin: 0 auto;
         width: 980px;
         padding: 40px 0 10px;
         position: relative;
       }
       
       .seq-wrapper:after, .seq-wrapper:before {
         display: table;
         clear: both;
         zoom: 1;
         content: "";
       }
       
       .seq-section { background: #FFF; }
       
       h1.section-title {
         text-align: center;
         font-size: 50px;
         padding-bottom: 40px;
         line-height: 40px;
         font-family: 'Raleway', sans-serif;
         font-weight: 400;
         color: #000;
         text-align: center;
         text-transform: capitalize;
       }
       
       #sequency-flyer { position: absolute; }
       
       #sequency-flyer.anch {
         position: fixed;
         top: 50%!important;
         -webkit-transform: translateZ(0);
       }
       
       #sequency-flyer {
         width: 980px;
         height: 487px;
         margin-top: -243px;
         top: 350px;
   }
   
   #sequency {
     height: 296px;
     width: 465px;
     margin: 0 auto;
     margin-bottom: 95px;
     overflow: hidden;
     position: relative;
   }
   
   #sequency img {
     position: relative;
     height: auto;
     display: inline-block;
     margin: 0 auto;
   }
   
   #sequency .ja, #sequency .jb {
     width: 465px;
     overflow: hidden;
     position: absolute;
     left: 0px;
     height: 100%;
   }
   
   #sequency .ja, #sequency .jb {
     -webkit-transition: height .1s ease-out;
     -moz-transition: height .1s ease-out;
     -ms-transition: height .1s ease-out;
     -o-transition: height .1s ease-out;
     transition: height .1s ease-out;
     text-align: center;
   }
   
   #sequency .ja.no-trans, #sequency .jb.no-trans {
     -webkit-transition: none;
     -moz-transition: none;
     -ms-transition: none;
     -o-transition: none;
     transition: none;
   }
   
   #sequency_bar {
     -webkit-transition: top .1s ease-out;
     -moz-transition: top .1s ease-out;
     -ms-transition: top .1s ease-out;
     -o-transition: top .1s ease-out;
     transition: top .1s ease-out;
   }
   
   #sequency_bar {
     width: 100%;
     margin-left: 0;
   }
   
   #sequency_bar.down {
     box-shadow: 0 5px 5px 5px rgba(33,33,33,.05);
     -moz-box-shadow: 0 5px 5px 5px rgba(33,33,33,.05);
     -webkit-box-shadow: 0 5px 5px 5px rgba(33,33,33,.05);
   }
   
   #sequency_bar.up {
     box-shadow: 0 -5px 5px 5px rgba(33,33,33,.05);
     -moz-box-shadow: 0 -5px 5px 5px rgba(33,33,33,.05);
     -webkit-box-shadow: 0 -5px 5px 5px rgba(33,33,33,.05);
   }
   
   #sequency .ja {
     bottom: 0;
     z-index: 15;
   }
   
   #sequency .jb {
     top: 0px;
     z-index: 20;
     background: #FFF;
   }
   
   #sequency .jb img { visibility: hidden; }
   
   #sequency .jb.active img { visibility: visible; }
   
   #sequency_bar {
     height: 1px;
     background: #c5c5c5;
     position: absolute;
     top: 295px;
     z-index: 1000;
   }
   
   #sequency_bar.full {
     width: 2400px;
     margin-left: -900px;
   }
   
   #sequency_text {
     width: 510px;
     margin: 0 auto;
     margin-bottom: 180px;
   }
   
   #sequency_text ul {
     text-align: center;
     display: block;
     margin: 0 auto;
     padding: 0;
   }
   
   #sequency_text ul li {
     float: none;
     display: inline-block;
     margin-left: 10px;
     margin-right: 10px;
   }
   
   #sequency_text ul li span {
     -webkit-transition: opacity .5s ease-in-out;
     -moz-transition: opacity .5s ease-in-out;
     -ms-transition: opacity .5s ease-in-out;
     -o-transition: opacity .5s ease-in-out;
     transition: opacity .5s ease-in-out;
   }
   
   #sequency_text ul li span, #sequency_text ul li a {
     float: none;
     font-family: "Raleway";
     font-size: 16px;
     color: #636363;
     opacity: 0;
   }
   
   #sequency_text ul li.active span, #sequency_text ul li.active a { opacity: 1; }
   
   #sequency_nav { position: absolute; }
   
   #sequency_nav ul { }
   
   #sequency_nav ul li {
     display: block;
     margin-bottom: 10px;
   }
   
   #sequency_nav ul li a {
     background: #e3e3e3;
     cursor: pointer;
     text-indent: -9999px;
     width: 10px;
     height: 10px;
     display: block;
     cursor: pointer;
     text-indent: 9999px;
     overflow: hidden;
     border-radius: 5px;
     box-sizing: content-box;
     text-align: right;
   }
   
   #sequency_nav ul li.active a { background: #b0b0b0; }
   

6.  Customization options with default values.
 ```
 // data source
 jsonSource:    [],
 
 // plugin title
 title      :  "jQuery.sequency.js", 
 
 // step speed in ms
 stepSpeed    :  1500,
 
 // viewport height
 viewportHeight   :  264,
 
 // viewort padding
 viewportPaddingY :  50,
 
 // fullscreen mode
 barFullscreen  :  false,
 
 // parent container
 container    : window,
 
 // callback
 initiate:    function(){},
 ```