NetPlusMédia

Zoomooz

Retour

http://jaukia.github.io/zoomooz/

 

Ce programme fonctionne avec la librairie Jquery

zoomooz.html

  1. <!DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN'
  2. 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd'>
  3. <html xmlns='http://www.w3.org/1999/xhtml' xml:lang='fr' lang='fr'>
  4. <title>Zoomooz</title>
  5. <meta http-equiv='content-type' content='text/html; charset=iso-8859-1'/>
  6.  
  7.  
  8. <!-- Style CSS -->
  9. <link rel='stylesheet' type='text/css' href='zoomooz.css' />
  10.  
  11.  
  12.  
  13. </head>
  14.  
  15.  
  16. Cliquez sur les carrs pour tester<br />
  17.  
  18. <div class="zoomooz_conteneur zoomooz_1">
  19. <div class="zoomTarget level0">
  20. <div class="zoomTarget level1">
  21. <div class="zoomTarget level2">a11</div>
  22. <div class="zoomTarget level2">a12</div>
  23. <div class="zoomTarget level2">a13</div>
  24. <div class="zoomTarget level2">a14</div>
  25. </div>
  26. <div class="zoomTarget level1">a2</div>
  27. <div class="zoomTarget level1">a3</div>
  28. <div class="zoomTarget level1">a4</div>
  29. </div>
  30. </div>
  31.  
  32.  
  33.  
  34. <div class="zoomooz_conteneur zoomooz_2">
  35. <div id="element1" class="zoomTarget">Test 1 retourn</div>
  36. <div id="element2" class="zoomTarget">Test 2 retourn</div>
  37. <div id="element3" class="zoomTarget">Test 3 tordu</div>
  38. </div>
  39.  
  40.  
  41. <!-- Javascript -->
  42. <script language='Javascript' type='text/javascript'
  43. src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js'></script>
  44. <script language='Javascript' type='text/javascript'
  45. src='jquery.zoomooz.min.js'></script>
  46. <script language='Javascript' type='text/javascript'
  47. src='appli.js'></script>
  48.  
  49. </body>
  50. </html>

zoomooz.css

  1. .zoomooz_conteneur{
  2. float:left;
  3. position:relative;
  4. width:700px;
  5. height:450px;
  6. }
  7.  
  8. .zoomooz_1 div{
  9. float: left;
  10. margin:5% 0 0 5%;
  11. }
  12.  
  13. .zoomooz_1 .level0 {
  14. background:#ccc;
  15. width:90%;
  16. height:90%;
  17. }
  18.  
  19. .zoomooz_1 .level2 {
  20. width:40%;
  21. height:40%;
  22. background: #aaa;
  23. }
  24.  
  25. .zoomooz_1 .level1 {
  26. width:40%;
  27. height:40%;
  28. background: #ddd;
  29. float: left;
  30. font-size:30px;
  31. line-height:2em;
  32. text-align:center;
  33. }
  34.  
  35.  
  36.  
  37. .zoomooz_2 #element1 {
  38. position:absolute;
  39. width:300px;
  40. height:200px;
  41. background-color:#cfc;
  42. top:300px;
  43. left:700px;
  44. border:1px solid green;
  45. -webkit-transform: rotate(175deg);
  46. -khtml-transform: rotate(175deg);
  47. -moz-transform: rotate(175deg);
  48. -ms-transform: rotate(175deg);
  49. -o-transform: rotate(175deg);
  50. transform: rotate(175deg);
  51. }
  52.  
  53. .zoomooz_2 #element2 {
  54. position:absolute;
  55. width:400px;
  56. height:200px;
  57. top:400px;
  58. left:400px;
  59. background-color:#cff;
  60. border:1px solid cyan;
  61. -webkit-transform: rotate(-175deg);
  62. -khtml-transform: rotate(-175deg);
  63. -moz-transform: rotate(-175deg);
  64. -ms-transform: rotate(-175deg);
  65. -o-transform: rotate(-175deg);
  66. transform: rotate(-175deg);
  67. }
  68.  
  69. .zoomooz_2 #element3 {
  70. position:absolute;
  71. width:100px;
  72. height:100px;
  73. top:20px;
  74. left:100px;
  75. background-color:#ccf;
  76. border:1px solid cyan;
  77. -webkit-transform: skewX(25deg) skewY(10deg);
  78. -khtml-transform: skewX(25deg) skewY(10deg);
  79. -moz-transform: skewX(25deg) skewY(10deg);
  80. -ms-transform: skewX(25deg) skewY(10deg);
  81. -o-transform: skewX(25deg) skewY(10deg);
  82. transform: skewX(25deg) skewY(10deg);
  83. }

jquery.zoomooz.min.js

appli.js

  1. jQuery().ready(function(){
  2.  
  3. $(".zoomTarget").click(function(evt) {
  4. evt.stopPropagation();
  5. $(this).zoomTo({targetsize:0.7,debug:true});
  6. });
  7.  
  8. $(document).click(function(evt) {
  9. evt.stopPropagation();
  10. $("body").zoomTo({targetsize:1.0,debug:true});
  11. });
  12.  
  13. $("body").zoomTo({targetsize:1.0,debug:true});
  14.  
  15. });

Démonstration

Zoomooz Cliquez sur les carrs pour tester
a11
a12
a13
a14
a2
a3
a4
Test 1 retourn
Test 2 retourn
Test 3 tordu
yoyo    Posté le : 13/05/2017 - 23:49
Trop génial cette animation ! Ca me fait penser aux anim's Flash de l'époque
Merci !!!

Laissez-nous un commentaire


Votre pseudo/nom/prénom :
Votre commentaire :
Plan du site - Contact - Google+ - FaceBook - Twitter