Web Design with Parallax Effects: A Step-by-Step HTML CSS and JavaScript Tutorial @rayen-code

Parallax effects are a popular and visually stunning addition to modern web design. They create an illusion of depth and motion as users scroll down a webpage, providing an immersive and engaging user experience. In this tutorial, we'll guide you through the process of creating a captivating parallax effect using HTML and CSS. Enhance your web design skills and make your website stand out with this dynamic design element.

Step 1: HTML Markup:

Begin by setting up the HTML structure for your parallax effect. Create sections that will serve as the different layers of your parallax scene.

<!-- -------------------- HTML -------------------- -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>parallax effect</title>

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

    <div class="hero-section">

        <img src="img/img (1).png" style="top: 10%; left: 40%;" class="move" speed="5" alt="">
        <img src="img/img (2).png" style="top: 20%; left: 20%;" class="move" speed="3" alt="">
        <img src="img/img (3).png" style="top: 30%; left: 70%;" class="move" speed="4" alt="">
        <img src="img/img (4).png" style="top: 40%; left: 6ch;" class="move" speed="7" alt="">
        <img src="img/img (5).png" style="top: 50%; left: 30%;" class="move" speed="6" alt="">
        <div class="header move" speed="3">
            rayen
        </div>
        <img src="img/img (6).png" style="top: 60%; left: 90%;" class="move" speed="6" alt="">
        <img src="img/img (7).png" style="top: 60%; left: 10%;" class="move" speed="-8" alt="">
        <img src="img/img (8).png" style="top: 70%; left: 70%;" class="move" speed="-6" alt="">
        <img src="img/img (9).png" style="top: 70%; left: 60%;" class="move" speed="-7" alt="">
        <img src="img/img (10).png" style="top: 70%; left: 40%;" class="move" speed="-9" alt="">

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

Step 2: Styling with CSS:

Create a separate CSS file (style.css) to style the parallax layers and define the parallax effect.

/*-------------------- CSS --------------------*/
*{
    margin: 0;
    padding: 0
    ;
    box-sizing: border-box;
    font-family: sans-serif;
}

body{
    background: #000;
    color: white;
}

.hero-section{
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    align-items: center
    ;
    justify-content: center;

}

.header{
    position: relative;
    font-size: 8rem;
    text-transform: uppercase;
    font-weight: 700;
}


.hero-section img{
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
}    

Step 3: Adding JavaScript Interaction:

Create a separate CSS file "main.js"

//-------------------- Java Script --------------------//
document.addEventListener("mousemove", paral);

function paral(m){
    this.querySelectorAll(".move").forEach(move =>{
        const speed = move.getAttribute("speed");

        const x = (window.innerWidth - m.pageX*speed)/100;
        const y = (window.innerHeight - m.pageY*speed)/100;

        move.style.transform = `translateX(${x}px) translateY(${y}px) `
    })
}      

You can customize the content, background images, colors, and other styles to match your website's design. Experiment with different layer combinations and scroll speeds to achieve the desired parallax effect.

Congratulations! You've successfully created an immersive parallax effect using HTML and CSS. This effect can transform your website into an engaging and visually captivating experience for visitors.

Implement parallax effects on sections of your website that you want to highlight or make more interactive. The skills you've gained from this tutorial will enable you to create stunning and memorable web designs.