Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width">
- <title>animation</title>
- <style id="jsbin-css">
- .box {
- background-color: tomato;
- color: white;
- padding: 10px;
- color: yellow;
- width: 10vw;
- /*transform: translate3d(50px,0, 0);*/
- }
- /*.box:hover{
- transform: translate3d(50px,0, 0)*/
- }
- </style>
- </head>
- <body>
- <div class="box"></div>
- <script id="jsbin-javascript">
- var clicked=0;
- function animateBox() {
- var target = document.querySelector('.box');
- var player = target.animate([
- {transform: 'translate(0)'},
- {transform: 'translate(90vw, 0)'},
- {transform: 'translate(0)'}
- ], 3000);
- player.addEventListener('finish', function() {
- if(clicked%2 !== 0){
- animateBox()
- } else {
- target.style.transform = 'translate(0px, 0px)';
- }
- });
- }
- var box = document.querySelector('.box');
- box.addEventListener('click', function() {
- clicked=clicked+1;
- animateBox();
- console.log('clicked the div');
- });
- var mElt = document.getElementsByTagName('html')[0];
- //mElt.addEventListener('click', function() {
- // clicked=clicked+1;
- // console.log('you clicked')
- // });
- window.onclick = function(event) {
- if (event.target == mElt) {
- console.log('clicked the html');
- clicked=clicked+1;
- }
- }
- </script>
- <script id="jsbin-source-css" type="text/css">.box {
- background-color: tomato;
- color: white;
- padding: 10px;
- color: yellow;
- width: 10vw;
- /*transform: translate3d(50px,0, 0);*/
- }
- /*.box:hover{
- transform: translate3d(50px,0, 0)*/
- }</script>
- <script id="jsbin-source-javascript" type="text/javascript">var clicked=0;
- function animateBox() {
- var target = document.querySelector('.box');
- var player = target.animate([
- {transform: 'translate(0)'},
- {transform: 'translate(90vw, 0)'},
- {transform: 'translate(0)'}
- ], 3000);
- player.addEventListener('finish', function() {
- if(clicked%2 !== 0){
- animateBox()
- } else {
- target.style.transform = 'translate(0px, 0px)';
- }
- });
- }
- var box = document.querySelector('.box');
- box.addEventListener('click', function() {
- clicked=clicked+1;
- animateBox();
- console.log('clicked the div');
- });
- var mElt = document.getElementsByTagName('html')[0];
- //mElt.addEventListener('click', function() {
- // clicked=clicked+1;
- // console.log('you clicked')
- // });
- window.onclick = function(event) {
- if (event.target == mElt) {
- console.log('clicked the html');
- clicked=clicked+1;
- }
- }
- </script></body>
- </html>
Add Comment
Please, Sign In to add comment