Sprite Animation Programming CSS JavaScript

#bot {
background-image: url(bot.png);
width: 100px;
height: 100px;
animation: jump 0.5s steps(6) infinite alternate;
}
@keyframes jump {
from {background-position: 0px; }
to {background-position: -600px; }
}
------------------------------------------------------------------------
<style>
#ball {
background: url(images/ball_bounce.png);
width: 50px;
height: 50px;
animation: ball-bounce 0.7s steps(6) infinite;
}
@keyframes ball-bounce {
}
</style>
<div id = "ball"></div>
------------------------------------------------------------------------
<script>
//Preload the sprite sheet image
var sheet = new Image();
sheet.src = "images/ball_bounce.png";
//This function is called to run in the window load event
function initCanvas() {
//Get the canvas 2D context object
var ctx = document.getElementById('my_canvas').getContext('2d');
//Get the canvas width and height from the ctx object
var cW = ctx.canvas.width, cH = ctx.canvas.height;
//Make a variable that will help us perform the clipping
var clipX = 0;
//This function runs repeatedly using setInterval or requestAnimationFrame
function animate() {
//Clear the canvas (erase the whole thing)
ctx.clearRect(0, 0, cW, cH);
//If clipX frame position is the last frame
if(clipX > 250) {
//Go back to the first frme
clipX = 0;
}
//drawImage (my_pic, clipX, clipY, clipW, clipH, x, y, w, h);
ctx.drawImage(sheet, clipX, 0, 50, 50, 0, 0, 50, 50);
//Increment clipX by the frame width
clipX += 50;
}
//Make the animate() function run repeatedly
var animateInterval = setInterval(animate, 100);
}
//The load event of the window object fires when th DOM is ready
window.addEventListener("load", initCanvas);
</script>
</head>
<body>
<canvas id = "my canvas" width = "640" height = "480"></canvas>
</body>
</html>
------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<style>
#mode_container {
width: 340px;
height: 240px;
background: #E4E4E4;
border: #000 1px 1px 4px;
}
#slider1 {
width: 340px;
}
/*This keyframe animation rule is for making the model spin freely*/
@keyframes spin {
0% { background-position: 0px;}
100% { background-position: -2700px;}
}
</style>
<script>
//Initialize some variables that the program will need
var model, slider, spin_btn;
//Preload the sprite sheet into the document
var spriteSheet = new Image();
spriteSheet.src = "images/strongman.jpg";
//This function lets us access elements by their ID easier in the program
function_(x) {
return document.getElementById(x);
}
//This function runs via window load event
function docReady() {
//Get the object references for the spin button and slider on the page
spin_btn = _("spin_btn");
slider = _("slider1");
//Add click event listener to spin button function spinFree will fire
spin_btn.addEventListener('click', controlView);
//Add mousemove and change events to the slider which fire controlView()
slider.addEventListener('mousemove', controlView);
slider.addEventListener('change', controlView);
//Start creating the 3D model sprite element
model = document.createElement("div");
//Give the view DIV an ID value
model.id = "model_1";
//Apply CSS style properties
model.style.width = "150px";
model.style.height = "200px";
model.style.margin = "8px auto";
//Apply the sprite sheet as the DIV background image
model.style.background = "url("+spriteSheet.src+")";
//Specify its starting frame value
model.style.backgroundPosition = "0px";
//Put the 3D model sprite DIV into the model_container on the page
document.getElementById("mode_container").appendChild(model);
}
//This function controls which frame is shown when using the slider
function controlView() {
//Remove the spin animation from the model
model.style.animation = "";
//Using the slider value and some simple math we display the
//proper frame according to the slider value
model.style.backgroundPosition = -(slider.value*150-150+"px";)
//This function initiates the CSS @keyframes animation to spin the model
freely
function spinFree () {
//Make the model spin freely by applying taht animation to it
model.style.animation = "spin 1.5s steps(18) infinite";
}
//The window load event listener
window.addEventListener("load", docReady);
</script>
</head>
<body>
<h2> 3D Model Viewer Application</h2>
<div id = "mode_container"></div>
<p>
<input id = "slider1" type = "range" min = "1" max = "18" value = "0" step =
"1">
<button id = "spin_btn">Spin Free</button>
</p>
</body>
</html>
------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<style>
/*A keyframe animation that lies waiting*/
@keyframes chomp {
}
</style>
<script>
//Initialize variable name for the pacman sprite
var pacman;
//These next two lines preload the sprite sheet image into the document
var pacmanSheet = new Image();
pacmanSheet.src = "images/pacman.png";
//Function loadSprites is called for the pacman sprite to live in
function loadSprites() {
//Create a new DIV element for the pacman sprite to live in
pacman = document.createElement("div");
//Specify the sprite width and height
pacman.style.width = "50px";
pacman.style.height = "50px";
//Apply the sprite sheet to the DIV element as background image
pacman.style.background = "url ("+pacmanSheet.src+")";
//Apply the @keyframes animation we desire pacman to have
pacman.style.animation = "chomp 0.5s steps(8) infinite";
//Put the pacman sprite DIV into the body container now
pacman.style.appendChild(pacman);
}
window.addEventListener("load", loadSprites);
</script>
</head>
<body>
</body>
</html>
------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<style>
@keyframes face-forward {
100% { background-position: 0px 0px; }
}
@keyframes walk-right {
0% { background-position: 0px -360px; }
100% { background-position: -9600px -360px; }
}
</style>
<script>
var sprite1;
spriteSheet.src = "images/adam_sprite_sheet_a.png";
sprite1 = document.createElement("div");
sprite1.id = "sprite_1";
sprite1.style.width = "120px";
sprite1.style.height = "180px";
sprite1.style.background = "url("+spriteSheet.src+")";
document.body.appendChild(sprite1);
//Add event listener to the document object for keydown event
document.addEventListener('keydown', function(event) {
var key_press = String.fromCharCode(event.keyCode);
//alert(event.keyCode+" | "+key_press);
if(key_press == "A") {
sprite1.style.animation = "walk-left 0.9s steps(8) infinite";
}
else if(key_press == "D") {
sprite1.style.animation = "walk-left 0.9s steps(8) infinite";
}
});
// Add event listener to the document object for keyup event
document.addEventListener('keyup', funtion(event) {
sprite1.style.animation = "face-forward 0.1s steps(1) 1";
});
}
</script>
</head>
<body>
</body>
</html>
------------------------------------------------------------------------
<style>
#rolling_hills {
background: url (images/ball_bounce.png);
width: 300px;
height: 180px;
animation: roll-along linear 15.0s infinite:
position: absolute;
}
#rolling_hills {
background: url (images/adam_walk_right.png);
width: 120px;
height: 180px;
animation: walk-right 1.0s steps(8) infinite:
position: absolute;
}
@keyframes roll-along {
}
@keyframes walk-right {
}
</style>
<div id = "rolling_hills"></div>
<div id = "adam"></div>
------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<style>
@keyframes spin {
0% { background-position: 0px; }
100% { background-position: -950px; }
}
</style>
<script>
var sprite1;
spriteSheet.src = "images/star.png";
sprite1 = document.createElement("div");
sprite1.id = "sprite_1";
sprite1.style.width = "50px";
sprite1.style.height = "50px";
sprite1.style.background = "url("+spriteSheet.src+")";
sprite.style.animation = "spin" 1.0s steps(19) infinite;
document.body.appendChild(sprite1);
//Add the change event listener to the slider
var slider = document.getElementById("slider1");
slider.addEventListener('change', function(event) {
//change the animation speed according to the slider value
sprite1.style.animationDuration = slider.value+"s";
});
}
</script>
</head>
<body>
</body>
</html>
------------------------------------------------------------------------
<style>
#sprite {
background: url (images/jumping-jacks.png);
width: 100px;
height: 100px;
animation: jumping-jacks 1.0s steps(5) infinite:
}
@keyframes jumping-jacks {
}
</style>
<div id = "sprite"></div>
------------------------------------------------------------------------
<style>
#sprite {
background: url (images/jumping-jacks.png);
width: 100px;
height: 100px;
animation: jumping-jacks 0.5s steps(6) infinite alternate:
}
@keyframes jumping-jacks {
}
</style>
<div id = "sprite"></div>
------------------------------------------------------------------------
------------------------------------------------------------------------
------------------------------------------------------------------------
------------------------------------------------------------------------
------------------------------------------------------------------------
------------------------------------------------------------------------
------------------------------------------------------------------------
------------------------------------------------------------------------
------------------------------------------------------------------------
------------------------------------------------------------------------
------------------------------------------------------------------------
------------------------------------------------------------------------
------------------------------------------------------------------------
------------------------------------------------------------------------
------------------------------------------------------------------------

Sprite Animation Programming CSS JavaScript

Uploaded by

Sprite Animation Programming CSS JavaScript

Uploaded by

#bot {

You might also like