Creating a Hero Section Color Change Hover Effect: HTML, CSS, and JavaScript @rayen-code

Rayen
A hero section is often the first thing visitors see when they land on your website. Adding interactive elements can captivate your audience and leave a memorable impression. In this tutorial, we'll walk you through the process of creating an eye-catching hero section with a color change hover effect using a combination of HTML, CSS, and JavaScript.

Step 1: Setting Up the HTML Structure:

Begin by setting up the basic HTML structure for your hero section.
<!-- -------------------- HTML -------------------- -->
<nav>
        <img src="logo.png" alt="img">
        <p>HOME</p>
        <p>HTML</p>
        <p>CSS</p>
        <p>JAVA SCRIPT</p>
    </nav>
    <section id="hero">
        <div class="textarea">
            <h2>ROBOTO</h2>
            <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolore nobis doloribus quia sint voluptates exercitationem eius quod voluptatem asperiores itaque, ad quas, hic recusandae error culpa adipisci iusto, eaque repudiandae ducimus unde perspiciatis sapiente et.</p>
        </div>
        <div class="heroimg">
            <img src="https://www.pngitem.com/pimgs/m/545-5451073_ouch-illustrations-website-hero-section-hd-png-download.png" alt="hero image">
        </div>
    </section>

    <!-- cursor -->
    <div id="cursor"></div>

Step 2: Styling with CSS:

Create a separate CSS file (style.css) and style the hero section. Apply colors, font sizes, and other properties to make the section visually appealing.
/*-------------------- CSS --------------------*/
 <style>
        *{
            margin: 0;
            padding: 0;
            font-family: sans-serif;
            box-sizing: border-box;
        }
        /* navbar */
        nav{
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(0, 21, 80);
            height: 80px;
            color: white;
        }
        nav img{
            height: 40px;
            position: absolute;
            left: 50px;
        }
        nav p{
            font-size: 25px;
            margin: 0 20px;
        }
        /* hero section  */
        #hero{
            height: 300px;
            display: flex;
            justify-content: space-around;
            align-items: center;
            background-color: rgb(0, 15, 100);
            color: white;
        }
        #hero .textarea{
            width: 40vw;
        }
        #hero .heroimg{
            width: 40vw;
        }
        #hero img{
            height: 250px;
        }
        h2{
            font-size: 4rem;
        }
        #hero p{
            font-size: 0.9rem;
        }

        /* cursor  */
        #cursor{
            position: fixed;
            transform: translate(-50%, -50%);
            mix-blend-mode: difference;
            pointer-events: none;
            background-color: white;
            border-radius: 20px;
        }

    </style>

Step 3: Adding JavaScript Interaction:

Create a JavaScript file (main.js) and add interactivity to the hero section. We'll use JavaScript to handle the color change on hover.
//-------------------- Java Script --------------------//
        let hero = document.getElementById("hero");
        let textarea = document.querySelector(".textarea");

        textarea.addEventListener("mouseenter", Mouseenter => {
            hero.style.backgroundColor = "white"
            textarea.style.color = "black"
            cursor.style.width = "100px"
            cursor.style.height = "100px"
        })
        textarea.addEventListener("mouseleave", Mouseleave => {
            hero.style.backgroundColor = ""
            textarea.style.color = ""
            cursor.style.width = ""
            cursor.style.height = ""
        })


        let cursor = document.getElementById("cursor");
        document.addEventListener("mousemove", (e) =>{
            cursor.style.left = e.pageX + 'px';
            cursor.style.top = e.pageY + 'px';
        })
Congratulations! You've successfully created a captivating hero section with a color change hover effect using HTML, CSS, and JavaScript. This engaging effect can add a dynamic touch to your website's landing page, drawing visitors' attention and creating an immersive experience. Feel free to experiment with different colors, transition speeds, and interactive elements to tailor the effect to your website's unique style.

By combining these three technologies, you've unlocked a powerful way to make your website more interactive and visually appealing. Incorporate this effect into your website to give it a modern and professional look that will leave a lasting impression on your visitors.



0 Comments