Running Character

Developer
Mark Thomes
Size
6,843 Kb
Views
46,552
  1. Running Character Previews
  2. Running Character HTML Codes
  3. Running Character CSS Codes
  4. Running Character JS Codes

How do I make an running character?

What is a running character? How do you make a running character? This script and codes were developed by Mark Thomes on 04 July 2022, Monday.

Running Character Previews
IQ Test

Running Character - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Running Character</title> <link rel='stylesheet prefetch' href='css/7534eb3fb62294822de9eace9.css'> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #333;
}
.streetcircle { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/15979/citywall.png) 0 -5px repeat-x; height: 240px; width: 240px; margin: 50px auto 0; position: relative; overflow: hidden; border-radius: 123px; border: 5px solid white; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5); animation: wallslide 4s linear infinite;
}
.hoodie { animation: run-cycle 0.6s steps(6) infinite; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/15979/running.png) 0 0 no-repeat; height: 160px; width: 112px; position: absolute; bottom: 50px; left: 66px; margin: 0 auto;
}
@keyframes run-cycle { 0% { background-position: 0 0; } 100% { background-position: -672px 0; }
}
@keyframes wallslide { 0% { background-position: 0 -5px; } 100% { background-position: -1053px -5px; }
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <div class="streetcircle"> <div class="hoodie"></div>
</div> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://s3-us-west-2.amazonaws.com/s.cdpn.io/15979/footer-inject.js'></script> <script src="js/index.js"></script>
</body>
</html>

Running Character - Script Codes CSS Codes

body { background: #333;
}
.streetcircle { background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/15979/citywall.png) 0 -5px repeat-x; height: 240px; width: 240px; margin: 50px auto 0; position: relative; overflow: hidden; border-radius: 123px; border: 5px solid white; box-shadow: 0 5px 20px rgba(0, 0, 0, 0.5); animation: wallslide 4s linear infinite;
}
.hoodie { animation: run-cycle 0.6s steps(6) infinite; background: url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/15979/running.png) 0 0 no-repeat; height: 160px; width: 112px; position: absolute; bottom: 50px; left: 66px; margin: 0 auto;
}
@keyframes run-cycle { 0% { background-position: 0 0; } 100% { background-position: -672px 0; }
}
@keyframes wallslide { 0% { background-position: 0 -5px; } 100% { background-position: -1053px -5px; }
}

Running Character - Script Codes JS Codes

/*
Special thanks to 'Rachel Nabors'
for the inspiration and technique
*/
Running Character - Script Codes
Running Character - Script Codes
Home Page Home
Developer Mark Thomes
Username WithAnEs
Uploaded July 04, 2022
Rating 3.5
Size 6,843 Kb
Views 46,552
Do you need developer help for Running Character?

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!

Mark Thomes (WithAnEs) Script Codes
Name
Twitter Feed Loading Animation
CSS Colorado Flag
Save Bar
CSS Books
Pharmacy Loader
CSS Self Portrait
Basic Menu CSS
CSS3 Gradient Stripes
Beer Color
Swaying Open Sign
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!