Last active
March 1, 2016 21:59
-
-
Save Kurobyte/09c795d7cede2151d1b4 to your computer and use it in GitHub Desktop.
Css animation example
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>CSS animation example - By Ivan M.</title> | |
| <style> | |
| #background { | |
| background-image: url(back.jpg); | |
| background-repeat: repeat-x; | |
| background-size: contain; | |
| height: 344px; | |
| width: 350px; | |
| } | |
| #yoshi { | |
| background-image: url(yoshi_walk.png); | |
| background-repeat: repeat-x; | |
| background-size: cover; | |
| height: 80px; | |
| width: 80px; | |
| position: relative; | |
| top: 150px; | |
| left: 100px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="background" style=""> | |
| <div id="yoshi"></div> | |
| </div> | |
| <div> | |
| <label>Done by Ivan M.</label><br/> | |
| <label>Images are property of Nintendo.</label> | |
| </div> | |
| <script> | |
| document.getElementById("background").style.backgroundPositionX = 0; | |
| document.getElementById("yoshi").style.backgroundPositionX = 0; | |
| setInterval(function() { | |
| var backPos = parseInt(document.getElementById("background").style.backgroundPositionX); | |
| var yoshiPos = parseInt(document.getElementById("yoshi").style.backgroundPositionX); | |
| document.getElementById("background").style.backgroundPositionX = backPos - 5+"px"; | |
| document.getElementById("yoshi").style.backgroundPositionX = yoshiPos - 80+"px"; | |
| }, 100); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment