Animations are a great way to bring your web projects to life. In this post, we'll explore three CSS effects that can add a touch of interactivity and style to your website: Bounce, Parallax Scrolling, and Hover Animations.
1. 🎾 Bounce Animation
The Bounce effect is a playful animation where an element moves up and down, creating a bouncing illusion. This effect can be useful for drawing attention to a button or call to action.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bounce Animation</title>
<style>
.bounce {
display: inline-block;
padding: 10px 20px;
background-color: #007bff;
color: white;
border-radius: 5px;
animation: bounce 2s infinite;
}
@keyframes bounce {
0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
40% { transform: translateY(-30px); }
60% { transform: translateY(-15px); }
}
</style>
</head>
<body>
<div class="bounce">Bounce Me!</div>
</body>
</html>
2. 🌄 Parallax Scrolling
Parallax scrolling creates an illusion of depth by moving the background at a slower speed than the foreground content. It’s great for creating visually appealing sections.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Parallax Scrolling</title>
<style>
body, html {
margin: 0;
padding: 0;
height: 100%;
}
.parallax {
background: url('background.jpg') no-repeat center center;
background-attachment: fixed;
background-size: cover;
height: 100vh;
}
.content {
padding: 20px;
text-align: center;
background-color: rgba(0, 0, 0, 0.5);
color: white;
margin: 0;
}
</style>
</head>
<body>
<div class="parallax"></div>
<div class="content">
<h1>Parallax Effect</h1>
<p>This background moves at a different speed than the content above.</p>
</div>
</body>
</html>
3. 🌀 Hover Animations
Hover animations are simple but effective ways to make your UI interactive. A common example is rotating an icon when it’s hovered.
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hover Animation</title>
<style>
.icon {
font-size: 40px;
transition: transform 0.3s ease;
display: inline-block;
margin: 20px;
}
.icon:hover {
transform: rotate(45deg);
}
</style>
</head>
<body>
<div class="icon">🔄</div>
</body>
</html>
Conclusion
These three effects—Bounce, Parallax Scrolling, and Hover Animations—are easy to implement and can greatly enhance the user experience on your website. Try integrating them into your next project and see how they transform your design!
| Part | Title | Link |
|---|---|---|
| 1 | Capturing Attention with Motion UI CSS Animations ✨- : Fade In/Out, Slide In/Out, and Scale Up Effects 🫠| Read |
| 2 | Capturing Attention with Motion UI CSS Animations 🎨- : Bounce Animation, Parallax Scrolling, and Hover Animations 🫠| Read |
LinkedIn : https://www.linkedin.com/in/pratik-tamhane-583023217/
Behance : https://www.behance.net/pratiktamhane
Top comments (0)