Eye-Catching Parallax Card Effect: HTML, CSS, and JavaScript Tutorial @rayen-code

Rayen

Parallax effects add depth and interactivity to web design. In this tutorial, we'll teach you how to design an attention-grabbing parallax card effect using HTML, CSS, and JavaScript. Elevate your web design skills and make your website more engaging with this dynamic design element.




Step 1: HTML Markup:

Set up the HTML structure for your parallax card effect, defining the card and its content.
<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Card Parallax Effect</title>

    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1 id="heading">CARD PARALLAX EFFECT CSS JS</h1>
    <div class="container">
        <div class="img">
            <img src="img (1).jpg" id="image" alt="">
            <div class="text">
                <h1>Headphone</h1>
                <p class="desc">Lorem ipsum dolor sit amet.</p>
            </div>
        </div>

        <div class="img">
            <img src="img (2).jpg" id="image" alt="">
            <div class="text">
                <h1>Headphone</h1>
                <p class="desc">Lorem ipsum dolor sit amet.</p>
            </div>
        </div>


    </div>
    


    <script src="main.js"></script>
</body>
</html>

Step 2: Styling with CSS:

Create a separate CSS file (style.css) 
/*-------------------- CSS --------------------*/
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

.container{
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 50px;


    perspective: 800px; /*must*/
    background: linear-gradient(45deg, rgb(48, 122, 122), rgb(40, 182, 135));
}
#heading{
    z-index: 2;
    position: absolute;
    width: 100%;
    top: 70px;
    color :rgb(209, 238, 162);
    font-size: 65px;
    text-align: center;
}
.img{
    transform-origin: center;
    position: relative;
    width: 300px;
    height: 400px;
    border-radius: 12px;
    overflow: hidden;
    border: 3px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 10px 10px 10px #0002;
    transition: 0.2s linear;
    cursor: pointer;
}

.img::after{
    content: "";
    position: absolute;
    top: 10px;
    left: 10px;
    bottom: 10px;
    right: 10px;
    border: 1px white dotted;
    border-radius: 10px;
}

#image{
    width: 120%;
    height: 120%;
    object-fit: cover;

    transition: 0.2s linear;
}

.text{
    position: absolute;
    width: 100%;
    bottom: 0;
    left: 0;
    background: #00000071;
    padding: 5px 0 20px 20px ;
    color: white;
    transform: translateY(100%);
    transition: 0.5s;
}
.img:hover .text{
    transform: translateY(0);
}

Step 3: Adding JavaScript Interaction:

Utilize JavaScript to create the parallax effect, making the background image move at a different rate than the card content.
//-------------------- Java Script --------------------//
let img = document.querySelectorAll(".img");


img.forEach((imgs) =>{

    let image_img = imgs.querySelector("#image");

    imgs.addEventListener("mousemove", (move) =>{
        const x = (move.pageX) - (imgs.offsetLeft) - (imgs.clientWidth / 2);
        const y = (move.pageY) - (imgs.offsetTop) - (imgs.clientHeight / 2);

        imgs.style.transform = `rotateX(${-y /10}deg) rotateY(${x /10}deg)`
        image_img.style.transform =  `translateX(${-x/10}px) translateY(${-y/10}px)`
    })
    imgs.addEventListener("mouseleave", () =>{
        setTimeout(()=>{
            imgs.style.transform = `rotateX(0deg) rotateY(0deg)`
            image_img.style.transform =  `translateX(0px) translateY(0px)`
        }, 2000)
       
    })



})

Customize your parallax card effect by adding your own text, graphics, and animations. This dynamic design element is perfect for grabbing users' attention.

0 Comments