Guest User

Untitled

a guest
Jul 21st, 2018
77
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 2.49 KB | None | 0 0
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8">
  5. <meta name="viewport" content="width=device-width">
  6. <title>animation</title>
  7. <style id="jsbin-css">
  8. .box {
  9. background-color: tomato;
  10. color: white;
  11. padding: 10px;
  12. color: yellow;
  13. width: 10vw;
  14. /*transform: translate3d(50px,0, 0);*/
  15. }
  16. /*.box:hover{
  17. transform: translate3d(50px,0, 0)*/
  18. }
  19. </style>
  20. </head>
  21. <body>
  22. <div class="box"></div>
  23.  
  24. <script id="jsbin-javascript">
  25. var clicked=0;
  26.  
  27. function animateBox() {
  28. var target = document.querySelector('.box');
  29. var player = target.animate([
  30. {transform: 'translate(0)'},
  31. {transform: 'translate(90vw, 0)'},
  32. {transform: 'translate(0)'}
  33. ], 3000);
  34. player.addEventListener('finish', function() {
  35. if(clicked%2 !== 0){
  36. animateBox()
  37. } else {
  38. target.style.transform = 'translate(0px, 0px)';
  39. }
  40. });
  41. }
  42.  
  43. var box = document.querySelector('.box');
  44. box.addEventListener('click', function() {
  45. clicked=clicked+1;
  46. animateBox();
  47. console.log('clicked the div');
  48. });
  49.  
  50. var mElt = document.getElementsByTagName('html')[0];
  51. //mElt.addEventListener('click', function() {
  52. // clicked=clicked+1;
  53. // console.log('you clicked')
  54. // });
  55. window.onclick = function(event) {
  56. if (event.target == mElt) {
  57. console.log('clicked the html');
  58. clicked=clicked+1;
  59. }
  60. }
  61. </script>
  62.  
  63.  
  64. <script id="jsbin-source-css" type="text/css">.box {
  65. background-color: tomato;
  66. color: white;
  67. padding: 10px;
  68. color: yellow;
  69. width: 10vw;
  70. /*transform: translate3d(50px,0, 0);*/
  71. }
  72. /*.box:hover{
  73. transform: translate3d(50px,0, 0)*/
  74. }</script>
  75.  
  76. <script id="jsbin-source-javascript" type="text/javascript">var clicked=0;
  77.  
  78. function animateBox() {
  79. var target = document.querySelector('.box');
  80. var player = target.animate([
  81. {transform: 'translate(0)'},
  82. {transform: 'translate(90vw, 0)'},
  83. {transform: 'translate(0)'}
  84. ], 3000);
  85. player.addEventListener('finish', function() {
  86. if(clicked%2 !== 0){
  87. animateBox()
  88. } else {
  89. target.style.transform = 'translate(0px, 0px)';
  90. }
  91. });
  92. }
  93.  
  94. var box = document.querySelector('.box');
  95. box.addEventListener('click', function() {
  96. clicked=clicked+1;
  97. animateBox();
  98. console.log('clicked the div');
  99. });
  100.  
  101. var mElt = document.getElementsByTagName('html')[0];
  102. //mElt.addEventListener('click', function() {
  103. // clicked=clicked+1;
  104. // console.log('you clicked')
  105. // });
  106. window.onclick = function(event) {
  107. if (event.target == mElt) {
  108. console.log('clicked the html');
  109. clicked=clicked+1;
  110. }
  111. }
  112. </script></body>
  113. </html>
Add Comment
Please, Sign In to add comment