Looping through a sprite sheet
How do I make an looping through a sprite sheet?
What is a looping through a sprite sheet? How do you make a looping through a sprite sheet? This script and codes were developed by Jon Ambas on 19 October 2022, Wednesday.
Looping through a sprite sheet Previews
Looping through a sprite sheet - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Looping through a sprite sheet</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div></div> <script src="js/index.js"></script>
</body>
</html>Looping through a sprite sheet - Script Codes CSS Codes
html { background: #fff;
}
@-webkit-keyframes loop { 0% { background-position: 0px 0px; } 1.19048% { background-position: -807px 0px; } 2.38095% { background-position: 0px -400px; } 3.57143% { background-position: -807px -400px; } 4.7619% { background-position: 0px -800px; } 5.95238% { background-position: -807px -800px; } 7.14286% { background-position: 0px -1200px; } 8.33333% { background-position: -807px -1200px; } 9.52381% { background-position: 0px -1600px; } 10.71429% { background-position: -807px -1600px; } 11.90476% { background-position: 0px -2000px; } 13.09524% { background-position: -807px -2000px; } 14.28571% { background-position: 0px -2400px; } 15.47619% { background-position: -807px -2400px; } 16.66667% { background-position: 0px -2800px; } 17.85714% { background-position: -807px -2800px; } 19.04762% { background-position: 0px -3200px; } 20.2381% { background-position: -807px -3200px; } 21.42857% { background-position: 0px -3600px; } 22.61905% { background-position: -807px -3600px; } 23.80952% { background-position: 0px -4000px; } 25% { background-position: -807px -4000px; } 26.19048% { background-position: 0px -4400px; } 27.38095% { background-position: -807px -4400px; } 28.57143% { background-position: 0px -4800px; } 29.7619% { background-position: -807px -4800px; } 30.95238% { background-position: 0px -5200px; } 32.14286% { background-position: -807px -5200px; } 33.33333% { background-position: 0px -5600px; } 34.52381% { background-position: -807px -5600px; } 35.71429% { background-position: 0px -6000px; } 36.90476% { background-position: -807px -6000px; } 38.09524% { background-position: 0px -6400px; } 39.28571% { background-position: -807px -6400px; } 40.47619% { background-position: 0px -6800px; } 41.66667% { background-position: -807px -6800px; } 42.85714% { background-position: 0px -7200px; } 44.04762% { background-position: -807px -7200px; } 45.2381% { background-position: 0px -7600px; } 46.42857% { background-position: -807px -7600px; } 47.61905% { background-position: 0px -8000px; } 48.80952% { background-position: -807px -8000px; } 50% { background-position: 0px -8400px; } 51.19048% { background-position: -807px -8400px; } 52.38095% { background-position: 0px -8800px; } 53.57143% { background-position: -807px -8800px; } 54.7619% { background-position: 0px -9200px; } 55.95238% { background-position: -807px -9200px; } 57.14286% { background-position: 0px -9600px; } 58.33333% { background-position: -807px -9600px; } 59.52381% { background-position: 0px -10000px; } 60.71429% { background-position: -807px -10000px; } 61.90476% { background-position: 0px -10400px; } 63.09524% { background-position: -807px -10400px; } 64.28571% { background-position: 0px -10800px; } 65.47619% { background-position: -807px -10800px; } 66.66667% { background-position: 0px -11200px; } 67.85714% { background-position: -807px -11200px; } 69.04762% { background-position: 0px -11600px; } 70.2381% { background-position: -807px -11600px; } 71.42857% { background-position: 0px -12000px; } 72.61905% { background-position: -807px -12000px; } 73.80952% { background-position: 0px -12400px; } 75% { background-position: -807px -12400px; } 76.19048% { background-position: 0px -12800px; } 77.38095% { background-position: -807px -12800px; } 78.57143% { background-position: 0px -13200px; } 79.7619% { background-position: -807px -13200px; } 80.95238% { background-position: 0px -13600px; } 82.14286% { background-position: -807px -13600px; } 83.33333% { background-position: 0px -14000px; } 84.52381% { background-position: -807px -14000px; } 85.71429% { background-position: 0px -14400px; } 86.90476% { background-position: -807px -14400px; } 88.09524% { background-position: 0px -14800px; } 89.28571% { background-position: -807px -14800px; } 90.47619% { background-position: 0px -15200px; } 91.66667% { background-position: -807px -15200px; } 92.85714% { background-position: 0px -15600px; } 94.04762% { background-position: -807px -15600px; } 95.2381% { background-position: 0px -16000px; } 96.42857% { background-position: -807px -16000px; } 97.61905% { background-position: 0px -16400px; } 98.80952% { background-position: -807px -16400px; }
}
@keyframes loop { 0% { background-position: 0px 0px; } 1.19048% { background-position: -807px 0px; } 2.38095% { background-position: 0px -400px; } 3.57143% { background-position: -807px -400px; } 4.7619% { background-position: 0px -800px; } 5.95238% { background-position: -807px -800px; } 7.14286% { background-position: 0px -1200px; } 8.33333% { background-position: -807px -1200px; } 9.52381% { background-position: 0px -1600px; } 10.71429% { background-position: -807px -1600px; } 11.90476% { background-position: 0px -2000px; } 13.09524% { background-position: -807px -2000px; } 14.28571% { background-position: 0px -2400px; } 15.47619% { background-position: -807px -2400px; } 16.66667% { background-position: 0px -2800px; } 17.85714% { background-position: -807px -2800px; } 19.04762% { background-position: 0px -3200px; } 20.2381% { background-position: -807px -3200px; } 21.42857% { background-position: 0px -3600px; } 22.61905% { background-position: -807px -3600px; } 23.80952% { background-position: 0px -4000px; } 25% { background-position: -807px -4000px; } 26.19048% { background-position: 0px -4400px; } 27.38095% { background-position: -807px -4400px; } 28.57143% { background-position: 0px -4800px; } 29.7619% { background-position: -807px -4800px; } 30.95238% { background-position: 0px -5200px; } 32.14286% { background-position: -807px -5200px; } 33.33333% { background-position: 0px -5600px; } 34.52381% { background-position: -807px -5600px; } 35.71429% { background-position: 0px -6000px; } 36.90476% { background-position: -807px -6000px; } 38.09524% { background-position: 0px -6400px; } 39.28571% { background-position: -807px -6400px; } 40.47619% { background-position: 0px -6800px; } 41.66667% { background-position: -807px -6800px; } 42.85714% { background-position: 0px -7200px; } 44.04762% { background-position: -807px -7200px; } 45.2381% { background-position: 0px -7600px; } 46.42857% { background-position: -807px -7600px; } 47.61905% { background-position: 0px -8000px; } 48.80952% { background-position: -807px -8000px; } 50% { background-position: 0px -8400px; } 51.19048% { background-position: -807px -8400px; } 52.38095% { background-position: 0px -8800px; } 53.57143% { background-position: -807px -8800px; } 54.7619% { background-position: 0px -9200px; } 55.95238% { background-position: -807px -9200px; } 57.14286% { background-position: 0px -9600px; } 58.33333% { background-position: -807px -9600px; } 59.52381% { background-position: 0px -10000px; } 60.71429% { background-position: -807px -10000px; } 61.90476% { background-position: 0px -10400px; } 63.09524% { background-position: -807px -10400px; } 64.28571% { background-position: 0px -10800px; } 65.47619% { background-position: -807px -10800px; } 66.66667% { background-position: 0px -11200px; } 67.85714% { background-position: -807px -11200px; } 69.04762% { background-position: 0px -11600px; } 70.2381% { background-position: -807px -11600px; } 71.42857% { background-position: 0px -12000px; } 72.61905% { background-position: -807px -12000px; } 73.80952% { background-position: 0px -12400px; } 75% { background-position: -807px -12400px; } 76.19048% { background-position: 0px -12800px; } 77.38095% { background-position: -807px -12800px; } 78.57143% { background-position: 0px -13200px; } 79.7619% { background-position: -807px -13200px; } 80.95238% { background-position: 0px -13600px; } 82.14286% { background-position: -807px -13600px; } 83.33333% { background-position: 0px -14000px; } 84.52381% { background-position: -807px -14000px; } 85.71429% { background-position: 0px -14400px; } 86.90476% { background-position: -807px -14400px; } 88.09524% { background-position: 0px -14800px; } 89.28571% { background-position: -807px -14800px; } 90.47619% { background-position: 0px -15200px; } 91.66667% { background-position: -807px -15200px; } 92.85714% { background-position: 0px -15600px; } 94.04762% { background-position: -807px -15600px; } 95.2381% { background-position: 0px -16000px; } 96.42857% { background-position: -807px -16000px; } 97.61905% { background-position: 0px -16400px; } 98.80952% { background-position: -807px -16400px; }
}
div { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 807px; height: 400px; background: url(http://www.melanie-f.com/en/img/sprite-lookbook.png) no-repeat; background-size: 1614px 16800px; -webkit-animation: loop 1.4s steps(1) infinite; animation: loop 1.4s steps(1) infinite;
}
Looping through a sprite sheet - Script Codes JS Codes
//http://www.melanie-f.com/en/
| Developer | Jon Ambas |
| Username | jonambas |
| Uploaded | October 19, 2022 |
| Rating | 3 |
| Size | 2,897 Kb |
| Views | 18,216 |
Do you need developer help for Looping through a sprite sheet?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Jon Ambas (jonambas) Script Codes
| Name | Size |
| Sidebar Thing | 2,779 Kb |
| Happy New Years | 7,291 Kb |
| Playing with SVGs | 3,215 Kb |
| Polygons with clip-path | 4,602 Kb |
| Coffee | 2,651 Kb |
| Cell Focusing | 4,757 Kb |
| Bee Mine | 5,531 Kb |
| Cubes | 3,469 Kb |
| Drip Drop | 3,011 Kb |
| A Pen by Jon Ambas | 1,826 Kb |
Create amazing video scripts with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Fluid Responsive Typography | Jonmilner | 4,205 Kb |
| Speech bubbles | Something | 1,547 Kb |
| Vertically rotating text with CSS | Nopr | 2,141 Kb |
| Headroom.js demo | WickyNilliams | 3,982 Kb |
| Sign Up Form | Sicontis | 5,272 Kb |
| Simple Responsive Text | Fbrz | 2,282 Kb |
| 3D-box | Parthviroja | 2,346 Kb |
| Vertical Pan Hammer.js example | Jtangelder | 2,144 Kb |
| CSS3 keyframe onload animation. | Samueljseay | 1,706 Kb |
| Buttons for autumn | Nikazawila | 1,795 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!