Developing a Modern Animated Hero Section using HTML, CSS, and JavaScript can help to make a first impression on your webpage.

Modern Animated Hero Section Using HTML, CSS and JavaScript (Free Source Code)

Byjvcodes

Developing a Modern Animated Hero Section using HTML, CSS, and JavaScript can help to make a first impression on your webpage.

The hero section is an excellent representation of a website, and when done correctly, will help to create the proper context for the rest of the site.

This article will give you free codes that you can apply to improve and add animations on, to the home page of your website. This source code is written according to good coding practices.

GitHub Source: Modern Animated Hero Section

Features

  • Dynamic Typing Effect: Entertains users via an animation of the typing effect of the letters with roles or messages scrolling in a loop.
  • Scroll Reveal Animations: Featured items such as text, images, or buttons slide into view as the page is scrolled down.
  • Active Section Links: Brings focus to the active section link in the navigation bar while scrolling through the page.
  • Easy to Customize: It is a clean cut code and well deployed to allow you change content, colors or the animations in-line with your branding.
  • Responsive: It is most responsive so the design of your site is going to look great on desktops, tablets and other devices.
  • Compatibility: The hero section works perfectly fine with all major browsers and is responsive too.
  • Clean Code: The code written is neat with comments which make it very easy even for a new user to understand.

Technologies Used

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)
  • JS (JavaScript)

Recommended for You

Video Tutorial

Video thumbnail Watch on YouTube

Steps to Build Hero Section

  • Create Project Folder: The first step is to create a new folder for the project, this will help in the organization of files throughout the project.
  • Create index.html: Within the project folder to be created, create an HTML file with the title index.html, and organize the hero section.
  • Create style.css: Create a CSS file identified as style.css to enable adding of styling and animations of the hero section.
  • Create script.js: Add a JavaScript file that should be called ‘script.js’, which has contents that implement special effects such as typing effects, and scroll reveals.
  • Copy & Paste the Code: Please insert the source code given below in the corresponding files.

HTML

Here is the HTML code for your index.html file:

<!DOCTYPE html>
<html lang="en">
    <!-- Designed by Shokat Javed at JV Codes (www.jvcodes.com) -->
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.8/css/line.css">
        <link rel="stylesheet" href="style.css">
        <!-- Website favicon -->
        <link rel="shortcut icon" href="images/favicon.jpg" type="image/x-icon">
    
        <title>Portfolio | Katherine</title>
    </head>
    <body>
       <div class="container">
    
        <!-- --- HEADER SECTION (NAVIGATION BAR) ------ -->
        <nav id="header">
            <!-- Logo Section -->
            <div class="nav-logo">
                <p class="nav-name">Katherine</p>
                <span>.</span>
            </div>
    
            <!-- Navigation Menu -->
            <div class="nav-menu" id="myNavMenu">
                <ul class="nav_menu_list">
                    <!-- Each navigation item links to a section on the page -->
                    <li class="nav_list">
                        <a href="#home" class="nav-link active-link">Home</a>
                        <div class="circle"></div>
                    </li>
                    <li class="nav_list">
                        <a href="#about" class="nav-link">About</a>
                        <div class="circle"></div>
                    </li>
                    <li class="nav_list">
                        <a href="#portfolio" class="nav-link">Portfolio</a>
                        <div class="circle"></div>
                    </li>
                    <li class="nav_list">
                        <a href="#contact" class="nav-link">Contact</a>
                        <div class="circle"></div>
                    </li>
                </ul>
            </div>
    
            <!-- Call-to-Action Button -->
            <div class="nav-button">
                <button class="btn">Download Portfolio <i class="uil uil-file-alt"></i></button>
            </div>
    
            <!-- Mobile Menu Toggle Button -->
            <div class="nav-menu-btn">
                <i class="uil uil-bars" onclick="myMenuFunction()"></i>
            </div>
        </nav>
    
        <!-- -------------- MAIN SECTION ---------------- -->
        <main class="wrapper">
    
           <!-- -------------- HERO SECTION ---------------- -->
           <section class="featured-box" id="home">
              <div class="featured-text">
                  <!-- Featured Name and Title -->
                  <div class="featured-text-card">
                      <span>Katherine</span>
                  </div>
    
                  <!-- Dynamic Text Introduction -->
                  <div class="featured-name">
                      <p>I'm <span class="typedText">a Model</span></p>
                  </div>
    
                  <!-- Short Bio -->
                  <div class="featured-text-info">
                      <p>Passionate about sharing stories through captivating visuals and connecting with audiences worldwide. Empowering individuals to embrace their unique style and confidence.</p>
                  </div>
    
                  <!-- Action Buttons -->
                  <div class="featured-text-btn">
                      <button class="btn blue-btn">Collaborate with Me</button>
                      <button class="btn">Download Portfolio <i class="uil uil-file-alt"></i></button>
                  </div>
    
                  <!-- Social Media Icons -->
                  <div class="social_icons">
                      <div class="icon"><i class="uil uil-instagram"></i></div>
                      <div class="icon"><i class="uil uil-linkedin-alt"></i></div>
                      <div class="icon"><i class="uil uil-twitter"></i></div>
                      <div class="icon"><i class="uil uil-youtube"></i></div>
                  </div>
              </div>
    
              <!-- Hero Image -->
              <div class="featured-image">
                  <div class="image">
                      <img src="images/avatar.jpg" alt="Katherine">
                  </div>
              </div>
    
              <!-- Scroll Down Indicator -->
              <div class="scroll-icon-box">
                  <a href="#about" class="scroll-btn">
                      <i class="uil uil-mouse-alt"></i>
                      <p>Scroll Down</p>
                  </a>
              </div>
           </section>
        </main>
       </div>
    
        <!-- ----------- SCRIPTS ----------- -->
        <!-- Typing Effect Library -->
        <script src="https://unpkg.com/typed.js@2.0.16/dist/typed.umd.js"></script>
    
        <!-- Scroll Reveal Animation Library -->
        <script src="https://unpkg.com/scrollreveal"></script>
    
        <!-- Main JavaScript File -->
        <script src="main.js"></script>
    </body>
    </html>

CSS

Here is the complete code for style.css file to style the hero section:

/* ----- Import Google Font (Poppins) ----- */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

/* ----- VARIABLES ----- */
:root {
    --body-color: rgb(250, 250, 250);
    --color-white: rgb(255, 255, 255);

    --text-color-second: rgb(68, 68, 68);
    --text-color-third: rgb(160, 3, 76);

    --first-color: rgb(201, 87, 224);
    --first-color-hover: rgb(40, 91, 212);

    --second-color: rgb(160, 3, 76);
    --third-color: rgb(201, 72, 21);
    --first-shadow-color: rgba(0, 0, 0, 0.1);
}

/* ----- BASE STYLES ----- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

/* ----- GLOBAL REUSABLE STYLES ----- */

/* Button Styling */
.btn {
    font-weight: 500;
    padding: 12px 20px;
    background: #efefef;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: 0.4s;
}
.btn > i {
    margin-left: 10px;
}
.btn:hover {
    background: var(--second-color);
    color: var(--color-white);
}

/* Icon Styling */
i {
    font-size: 16px;
}

/* Body Background */
body {
    background: var(--body-color);
}

/* General Container */
.container {
    width: 100%;
    position: relative;
}

/* ----- NAVIGATION BAR ----- */
nav {
    position: fixed;
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 90px;
    line-height: 90px;
    background: var(--body-color);
    padding-inline: 9vw;
    transition: 0.3s;
    z-index: 100;
}
.nav-logo {
    position: relative;
}
.nav-name {
    font-size: 30px;
    font-weight: 600;
    color: var(--text-color-third);
}
.nav-logo span {
    position: absolute;
    top: -15px;
    right: -20px;
    font-size: 5em;
    color: var(--text-color-second);
}
.nav-menu, .nav_menu_list {
    display: flex;
}
.nav-menu .nav_list {
    list-style: none;
    position: relative;
}
.nav-link {
    text-decoration: none;
    color: var(--text-color-second);
    font-weight: 500;
    padding-inline: 15px;
    margin-inline: 20px;
}
.nav-menu-btn {
    display: none;
}
.nav-menu-btn i {
    font-size: 28px;
    cursor: pointer;
}
.active-link {
    position: relative;
    color: var(--first-color);
    transition: 0.3s;
}
.active-link::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: -15px;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 5px;
    background: var(--first-color);
    border-radius: 50%;
}

/* ----- MAIN CONTENT WRAPPER ----- */
.wrapper {
    padding-inline: 10vw;
}

/* ----- FEATURED SECTION ----- */
.featured-box {
    position: relative;
    display: flex;
    height: 100vh;
    min-height: 700px;
}

/* Featured Text Area */
.featured-text {
    position: relative;
    display: flex;
    justify-content: center;
    align-content: center;
    min-height: 80vh;
    flex-direction: column;
    width: 50%;
    padding-left: 20px;
}
.featured-text-card span {
    background: var(--third-color);
    color: var(--color-white);
    padding: 3px 8px;
    font-size: 12px;
    border-radius: 5px;
}
.featured-name {
    font-size: 50px;
    font-weight: 600;
    color: var(--text-color-second);
    margin-block: 20px;
}
.typedText {
    text-transform: capitalize;
    color: var(--text-color-third);
}
.featured-text-info {
    font-size: 15px;
    margin-bottom: 30px;
    color: var(--text-color-second);
}
.featured-text-btn {
    display: flex;
    gap: 20px;
}
.featured-text-btn > .blue-btn {
    background: var(--first-color);
    color: var(--color-white);
}
.featured-text-btn > .blue-btn:hover {
    background: var(--first-color-hover);
}

/* Social Icons */
.social_icons {
    display: flex;
    margin-top: 5em;
    gap: 30px;
}
.icon {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.25);
    cursor: pointer;
}
.icon:hover {
    color: var(--first-color);
}

/* Featured Image Area */
.featured-image {
    display: flex;
    justify-content: right;
    align-content: center;
    min-height: 80vh;
    width: 60%;
}
.image {
    margin: auto 0;
    width: 420px;
    height: 420px;
    border-radius: 55% 45% 55% 45%;
    overflow: hidden;
    animation: imgFloat 7s ease-in-out infinite;
}
.image img {
    width: 420px;
    height: 420px;
    object-fit: cover;
}

/* Animation for Floating Image */
@keyframes imgFloat {
    50% {
        transform: translateY(10px);
        border-radius: 45% 55% 45% 55%;
    }
}

/* ----- MAIN SECTION ----- */
.section {
    padding-block: 5em;
}
.row {
    display: flex;
    justify-content: space-between;
    width: 100%;
    gap: 50px;
}
.col {
    display: flex;
    width: 50%;
}

/* Header Styles */
.top-header {
    text-align: center;
    margin-bottom: 5em;
}
.top-header h1 {
    font-weight: 600;
    color: var(--text-color-second);
    margin-bottom: 10px;
}
.top-header span {
    color: #999;
}
h3 {
    font-size: 20px;
    font-weight: 600;
    color: var(--text-color-second);
    margin-bottom: 15px;
}

/* ----- MEDIA QUERIES ----- */

/* Tablet Screens */
@media only screen and (max-width: 1024px) {
    .featured-text {
        padding: 0;
    }
    .image, .image img {
        width: 320px;
        height: 320px;
    }
}

/* Small Screens */
@media only screen and (max-width: 900px) {
    .nav-button {
        display: none;
    }
    .nav-menu.responsive {
        left: 0;
    }
    .nav-menu {
        position: fixed;
        top: 80px;
        left: -100%;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        background: rgba(255, 255, 255, 0.7);
        backdrop-filter: blur(20px);
        width: 100%;
        min-height: 450px;
        height: 90vh;
        transition: 0.3s;
    }
    .featured-box {
        flex-direction: column;
        justify-content: center;
        height: 100vh;
    }
    .featured-image {
        justify-content: center;
        width: 100%;
        margin-top: 65px;
    }
    .image, .image img {
        width: 150px;
        height: 150px;
    }
}

/* Extra Small Screens */
@media only screen and (max-width: 540px) {
    .featured-name {
        font-size: 32px;
    }
}

JavaScript

Here is the complete code for script.js file to function the section:

/* ----- NAVIGATION BAR FUNCTION ----- */
function myMenuFunction(){
  var menuBtn = document.getElementById("myNavMenu");
  if(menuBtn.className === "nav-menu"){
    menuBtn.className += " responsive";
  } else {
    menuBtn.className = "nav-menu";
  }
}

/* ----- ADD SHADOW ON NAVIGATION BAR WHILE SCROLLING ----- */
window.onscroll = function() {headerShadow()};

function headerShadow() {
  const navHeader = document.getElementById("header");
  if (document.body.scrollTop > 50 || document.documentElement.scrollTop > 50) {
    navHeader.style.boxShadow = "0 1px 6px rgba(0, 0, 0, 0.1)";
    navHeader.style.height = "70px";
    navHeader.style.lineHeight = "70px";
  } else {
    navHeader.style.boxShadow = "none";
    navHeader.style.height = "90px";
    navHeader.style.lineHeight = "90px";
  }
}

/* ----- TYPING EFFECT ----- */
var typingEffect = new Typed(".typedText",{
  strings : ["TikToker","Youtuber","Designer"],
  loop : true,
  typeSpeed : 100, 
  backSpeed : 80,
  backDelay : 2000
});

/* ----- SCROLL REVEAL ANIMATION ----- */
const sr = ScrollReveal({
  origin: 'top',
  distance: '80px',
  duration: 2000,
  reset: true     
});

sr.reveal('.featured-text-card',{});
sr.reveal('.featured-name',{delay: 100});
sr.reveal('.featured-text-info',{delay: 200});
sr.reveal('.featured-text-btn',{delay: 200});
sr.reveal('.social_icons',{delay: 200});
sr.reveal('.featured-image',{delay: 300});
sr.reveal('.project-box',{interval: 200});
sr.reveal('.top-header',{});

const srLeft = ScrollReveal({
  origin: 'left',
  distance: '80px',
  duration: 2000,
  reset: true
});

srLeft.reveal('.about-info',{delay: 100});
srLeft.reveal('.contact-info',{delay: 100});

const srRight = ScrollReveal({
  origin: 'right',
  distance: '80px',
  duration: 2000,
  reset: true
});

srRight.reveal('.skills-box',{delay: 100});
srRight.reveal('.form-control',{delay: 100});

/* ----- CHANGE ACTIVE LINK ----- */
const sections = document.querySelectorAll('section[id]');

function scrollActive() {
  const scrollY = window.scrollY;
  sections.forEach(current =>{
    const sectionHeight = current.offsetHeight,
        sectionTop = current.offsetTop - 50,
        sectionId = current.getAttribute('id');

    if(scrollY > sectionTop && scrollY <= sectionTop + sectionHeight) { 
        document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.add('active-link');
    } else {
      document.querySelector('.nav-menu a[href*=' + sectionId + ']').classList.remove('active-link');
    }
  });
}

window.addEventListener('scroll', scrollActive);

Download Source Code

There is no copyright restrictions on the download of the complete source code for this hero section. Click on the download button below to be able to access the files.

Download Source Code

Conclusion

The use of modern interactive animated superhero section with HTML, CSS and JavaScript is an effective step to make a website appealing for users. You can use the following code to improve the appearance of your site while crediting JV Source Codes through the link.

Please also remember to share your positive response in the comments section below and do not forget to subscribe to this channel for more tutorials.

Have any questions? Feel free to drop a comment below this piece and I’ll be more than willing to help you out!

Download JV Source Codes

Similar Posts

How to Create a Simple Sidebar Menu in HTML CSS JavaScript
| | |

Simple Sidebar Menu in HTML, CSS and JavaScript

Building a simple sidebar menu is an excellent idea that will allow adding valuable features and stunning looks to your website. A sidebar menu is useful for clients to find their way to different items without feeling that they are being given too many choices, thus, creating simplicity and order. Today, I’m going to share…

Let me give you a free source code for creating a Hero Section with Content Left in HTML and CSS in this article.
| |

Hero Section with Content Left Using HTML and CSS

Hero section is a section that appears in the website landing page when a visitor first opens it. It is an effective approach for building a favorable communication, and conveying essential information. This code is written in good programming practices! Let me give you a free source code for creating a Hero Section with Content…

Do you have a question on how to properly create a pricing table on your website that is both aesthetic and effective? Look no further! Here in this post, you’ll learn about Creating a Pricing Table with a Two Cards Toggle using HTML, CSS & JavaScript.
| | |

Pricing Table with Two Cards Toggle Using HTML, CSS, and JavaScript

Do you have a question on how to properly create a pricing table on your website that is both aesthetic and effective? Look no further! Here in this post, you’ll learn about Creating a Pricing Table with a Two Cards Toggle using HTML, CSS & JavaScript. This template is for ready use and will enable…

Leave a Reply

Your email address will not be published. Required fields are marked *