bachir
/
jeunes-et-engages-d7


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566
							<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>jquery.pep demo - slider</title>

    <!-- Load local jQuery.  -->
    <script src="../libs/jquery/jquery.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.min.js"></script>

    <!-- Load local lib and tests. -->
    <script src="../src/jquery.pep.js"></script>

    <script type="text/javascript">

      $(document).ready(function(){

        var $obj        = $("#object");
        var $parent     = $("#parent");
        var height      = $parent.height();
    
        var $pep        = $(".pep");
        var objHeight   = $pep.height();

        $('.peppable').pep({ 
          constrainTo:        'parent', 
          shouldEase:         false,
          drag:               function(ev, obj){
            var vals = obj.getMovementValues();
            var percent = vals.pos.y / (height-objHeight);

            $obj.css({ 
              "-webkit-transform": "scale("+ (1 - percent) +") rotate("+ 100*percent +"deg)",
                 "-moz-transform": "scale("+ (1 - percent) +") rotate("+ 100*percent +"deg)",
                  "-ms-transform": "scale("+ (1 - percent) +") rotate("+ 100*percent +"deg)",
                   "-o-transform": "scale("+ (1 - percent) +") rotate("+ 100*percent +"deg)",
                      "transform": "scale("+ (1 - percent) +") rotate("+ 100*percent +"deg)"
            }) 
          }
        });
      });

    </script>

    <style type="text/css">
      body{ padding: 0; margin: 0; }
      #parent   { border: 1px solid #666; width: 100px; height: 300px; margin: 30px; }
      .pep      { width: 100%; height: 60px; background: rgb(243, 200, 200); color: white; }
      #object   { position: absolute; top: 50%; left: 50%; width: 300px; height: 300px; margin-left: -150px; margin-top: -150px; background: rgb(120, 200, 200); }
    </style>


  </head>


  <body>

    <div id="parent">
      <div class="pep peppable"></div>
    </div>

    <div id="object"></div>
  </body>


</html>