Animation can add life to your website, creating interactive and engaging user experiences. This tutorial will show you how to build a side-scrolling effect with a walking character using HTML, CSS, and JavaScript. With keyboard controls, users can move the character in both directions while the background scrolls smoothly.
The images used in the source code is given below:
Key Features of the Animation
- A seamless, horizontally scrolling background.
- A walking character controlled using the arrow keys.
- Realistic sprite-based animation for the character.
The HTML Framework
The layout consists of a container for the scrolling background and the character. The character is wrapped inside a div to facilitate animations while maintaining a fixed position on the screen.
Styling with CSS
CSS handles the background scrolling and character animations.
- Background Animation: A repeating background image scrolls horizontally, creating a sense of movement.
- Sprite Animation: The character’s walking motion is achieved by transitioning between different frames of a sprite sheet using CSS @keyframes and steps().
Interactivity with JavaScript
JavaScript captures keyboard inputs to control the character and background:
- Pressing the right arrow key (ArrowRight) moves the character forward.
- Pressing the left arrow key (ArrowLeft) moves the character backward.
- The character’s animation toggles between walking forward and walking backward.
Follow this video for complete guidance :
Step 1: Designing the Character and Background
Prepare the images:
- A background image (bg.jpg) that repeats seamlessly.
- A sprite sheet (man.png) for the character walking forward.
- A reverse sprite sheet (reverse-man.png) for the character walking backward.
Step 2: Adding Keyboard Controls
Using JavaScript, detect the arrow key presses and update the background’s position accordingly. The keydown event initiates the character’s walking animation, while the keyup event stops it.
Step 3: Animating the Sprite
The walking effect is created by shifting the sprite’s position horizontally within a fixed-width container. CSS animations are used to cycle through the frames of the sprite sheet.
Optimizations
- Preloading Images: Preload the reverse sprite to avoid rendering delays when switching directions.
- Performance Enhancements: Use optimized sprite sheets and minimal DOM updates for smoother animation.
Full Source Code
<style type="text/css">
body{
margin: 0;
overflow: hidden;
}
.bg{
height: 100vh;
background-image: url(bg.jpg);
background-repeat: repeat-x;
background-color:darkgray;
}
.player{
position: absolute;
z-index: 10;
bottom: 12%;
}
.player-wrap{
width: 210px;
height: 230px;
overflow: hidden;
}
.player-image{
width: 30400px;
height: 600px;
background-image: url(man.png);
transform: scale(0.4);
background-repeat: no-repeat;
transform-origin: top left;
}
.walking{
animation: walk .8s steps(38) infinite;
}
.reverse-man{
background-image: url(reverse-man.png);
}
.walking-reverse{
animation: walk .8s steps(38) infinite reverse;
}
@keyframes walk{
0%{
background-position: 0 0;
}
100%{
background-position: -30400px 0;
}
}
</style>
<body>
<div class="environment">
<div class="bg"></div>
<div class="player" style="left:40%">
<div class="player-wrap">
<div class="player-image"></div>
</div>
</div>
</div>
<img src="reverse-man.png" style="display:none;">
<script type="text/javascript">
const player = document.getElementsByClassName('player-image')[0];
const bg = document.getElementsByClassName('bg')[0];
var offset = 0;
document.addEventListener('keydown', handleKeyDown);
document.addEventListener('keyup', handleKeyUp);
function handleKeyUp(e){
player.classList.remove('walking');
player.classList.remove('walking-reverse');
}
function handleKeyDown(e) {
if (e.key === 'ArrowLeft') {
player.classList.remove('walking');
player.classList.add('walking-reverse');
player.classList.add('reverse-man');
offset += 10;
} else if (e.key === 'ArrowRight') {
player.classList.add('walking');
player.classList.remove('walking-reverse');
player.classList.remove('reverse-man');
offset -= 10;
}
bg.style.backgroundPosition = `${offset}px 0`;
}
</script>
</body>
This technique is perfect for building interactive web games, storytelling platforms, or any application requiring dynamic character movement.
By combining HTML, CSS, and JavaScript, you can create a visually appealing side-scrolling animation that responds to user input. Try enhancing it further with features like obstacles, scoring, or multi-level environments for a full-fledged interactive experience.
