123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143 |
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>jquery.pep custom functions</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(){
- function randomColor(){
- return '#'+Math.floor(Math.random()*16777215).toString(16);
- }
- // I scale during movement based on my velocity
- $('.pep1').pep({
- drag: function(ev, obj){
- obj.$el.css({ background: randomColor() });
- var vel = obj.velocity();
- var scale = Math.abs(vel.x + vel.y)/100 ;
- scale = (scale < 0.1) ? 0.1 : scale;
- obj.$el.css({
- "-webkit-transform": "scale("+ scale +")",
- "-moz-transform": "scale("+ scale +")",
- "-ms-transform": "scale("+ scale +")",
- "-o-transform": "scale("+ scale +")",
- "transform": "scale("+ scale +")"
- })
- },
- rest: function(ev, obj){
- obj.$el.css({
- "-webkit-transform": "scale(1)",
- "-moz-transform": "scale(1)",
- "-ms-transform": "scale(1)",
- "-o-transform": "scale(1)",
- "transform": "scale(1)"
- })
- }
- });
- //I tip based on my velocity in the x direction
- $('.pep2').pep({
- useCSSTranslation: false,
- drag: function(ev, obj){
- var vel = obj.velocity();
- var rot = (vel.x)/5;
- obj.$el.css({
- "-webkit-transform": "rotate("+ rot +"deg)",
- "-moz-transform": "rotate("+ rot +"deg)",
- "-ms-transform": "rotate("+ rot +"deg)",
- "-o-transform": "rotate("+ rot +"deg)",
- "transform": "rotate("+ rot +"deg)"
- });
- },
- rest: function(ev, obj){
- }
- });
- // I perk up when I move, I become angry when I am left alone.
- var active = false;
-
- // blink down
- setInterval(function(){ if (!active) return; $('.pep3').html("_ _ </br>() </br> \\_____/").delay(100); }, 300);
- // blink up
- setInterval(function(){ if (!active) return; $('.pep3').html("[] [] </br>() </br> \\_____/"); }, 500);
- $('.pep3').pep({
- start: function(ev, obj){
- active = true;
- obj.$el.html("[] [] </br>() </br> \\_____/").css({ fontSize: 50, textAlign: "center" });
- },
- rest: function(ev, obj){
- console.log('rest')
- active = false;
- obj.$el.html("- - </br>[] </br> ._____. </br>");
- }
- });
- // I change color on start, rotate on end.
- var rotate = 0
- $('.pep4').pep({
- start: function(ev, obj){
- $('body').css({background: '#333'});
- obj.$el.css({
- "-webkit-filter": "blur(100px)",
- "-moz-filter": "blur(100px)",
- "-ms-filter": "blur(100px)",
- "-o-filter": "blur(100px)",
- "filter": "blur(100px)"
- })
- },
- stop: function(ev, obj){
- $('body').css({background: 'white'});
- rotate += 1080;
- obj.$el.css({
- "-webkit-filter": "blur(0px)",
- "-moz-filter": "blur(0px)",
- "-ms-filter": "blur(0px)",
- "-o-filter": "blur(0px)",
- "filter": "blur(0px)"
- })
- }
- });
- }); <!-- doc ready -->
- </script>
- <style type="text/css">
- .pep{ width: 200px; height: 200px; color: white; opacity: 0.8 }
- .pep1{ background: blue; position: absolute; top: 0; left: 0px;}
- .pep2{ background: red; position: absolute; top: 20px; left: 150px;}
- .pep3{ background: green; position: absolute; top: 40px; left: 300px;}
- .pep4{ background: yellow; position: absolute; top: 60px; left: 450px; color: black; z-index: 9999999;}
- .bigspace{ display: inline-block; width: 100px; }
- </style>
- </head>
- <body>
- <div class="pep pep1">I scale during movement based on my velocity. I use the custom drag & rest functions.</div>
- <div class="pep pep2">I tip based on my velocity in the x direction. I use the custom drag function.</div>
- <div class="pep pep3">I perk up when I move, I become angry when I am left alone. I use custom start & rest functions.</div>
- <div class="pep pep4">I become a flashlight. I use custom start & stop functions.</div>
- </body>
- </html>
|