DEV Community

Cover image for Part 2 : Capturing Attention with Motion UI CSS Animations 🎨- : Bounce Animation, Parallax Scrolling, and Hover Animations 🫠
Pratik Tamhane
Pratik Tamhane

Posted on • Updated on

Part 2 : Capturing Attention with Motion UI CSS Animations 🎨- : Bounce Animation, Parallax Scrolling, and Hover Animations 🫠

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.

Image description

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>

Enter fullscreen mode Exit fullscreen mode

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.

Image description

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>

Enter fullscreen mode Exit fullscreen mode

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.

Image description
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>

Enter fullscreen mode Exit fullscreen mode

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)