Commit 3fd3dc5

committed

DOM-Animation

1 parent 20f1e9b commit 3fd3dc5Copy full SHA for 3fd3dc5

File tree

+63

-0

lines changed

+63

-0

lines changed

Lines changed: 21 additions & 0 deletions

4.15 KB

Lines changed: 25 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,25 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html lang="en">`
	`3`	`+`
	`4`	`+<head>`
	`5`	`+ <meta charset="UTF-8">`
	`6`	`+ <meta http-equiv="X-UA-Compatible" content="IE=edge">`
	`7`	`+ <meta name="viewport" content="width=device-width, initial-scale=1.0">`
	`8`	`+ <title>DOM-Animation</title>`
	`9`	`+ <link rel="shortcut icon" href="images/js-logo.png" type="image/x-icon">`
	`10`	`+ <link rel="stylesheet" href="css/style.css">`
	`11`	`+</head>`
	`12`	`+`
	`13`	`+<body>`
	`14`	`+ <h1>DOM Animation</h1>`
	`15`	`+ <h2>Example</h2>`
	`16`	`+ <button onclick="Move()">Click Me</button>`
	`17`	`+ <div class="container">`
	`18`	`+ <div class="animate">`
	`19`	`+ <p>Hello</p>`
	`20`	`+ </div>`
	`21`	`+ </div>`
	`22`	`+ <script src="script.js"></script>`
	`23`	`+</body>`
	`24`	`+`
	`25`	`+</html>`

Lines changed: 17 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,17 @@`
	`1`	`+function Move() {`
	`2`	`+ let id = null;`
	`3`	`+ const elem = document.querySelector('.animate');`
	`4`	`+ let pos = 0;`
	`5`	`+ clearInterval(id);`
	`6`	`+ id = setInterval(frame, 5);`
	`7`	`+`
	`8`	`+ function frame() {`
	`9`	`+ if (pos == 350) {`
	`10`	`+ clearInterval(id);`
	`11`	`+ } else {`
	`12`	`+ pos++;`
	`13`	`+ elem.style.top = pos + "px";`
	`14`	`+ elem.style.left = pos + "px";`
	`15`	`+ }`
	`16`	`+ }`
	`17`	`+}`

Comments

(0)