Blog

You are currently viewing How to create Website  Header Using Anime.js
How to create Website  Header Using Anime.js

How to create Website  Header Using Anime.js

Hi guys, Today we will learn how to create a website using ReactJS and animate that website using anime js. All the logic part we will discuss in app .js . you can follow the all the senario for header part.

Lets start with App.js where i have write all the logic and for css we will see in style.css .

App.js

import React, { useEffect, useRef } from "react";
import anime from "animejs";
import "./style.css";

const AnimeComponent = () => {
  const containerRef = useRef(null);

  useEffect(() => {
    const container = containerRef.current;

   
    container.innerHTML = "";

    for (let i = 1; i <= 100; i++) {
      let dot = document.createElement("div");
      dot.classList.add("element");
      container.appendChild(dot);
    }

    let dotAll = container.querySelectorAll(".element");
    let animation = anime.timeline({
      targets: dotAll,
      easing: "easeInOutExpo",
      loop: true,
      delay: anime.stagger(100, { grid: [10, 10], from: "center" }),
    });

    animation
      .add({
        rotateZ: 180,
        translateY: anime.stagger(0, { grid: [10, 10], from: "center", axis: "y" }),
        translateX: anime.stagger(0, { grid: [10, 10], from: "center", axis: "x" }),
        opacity: 1,
      })
      .add({
        borderRadius: 50,
      })
      .add({
        scale: 0.2,
        opacity: 0.2,
      })
      .add({
        rotateZ: 180,
        translateY: anime.stagger(0, { grid: [10, 10], from: "center", axis: "y" }),
        translateX: anime.stagger(0, { grid: [10, 10], from: "center", axis: "x" }),
        opacity: 1,
      })
      .add({
        scale: 1,
        borderRadius: 0,
      })
      .add({
        rotateZ: -90,
      });

  }, []);

  return (
    <div>
      <header>
        <a href="#" className="logo">
          Logo
        </a>
        <ul>
          <li>
            <a href="#" className="active">
              Home
            </a>
          </li>
          <li>
            <a href="#">About</a>
          </li>
          <li>
            <a href="#">Work</a>
          </li>
          <li>
            <a href="#">Contact</a>
          </li>
        </ul>
      </header>

      <section>
        <div className="content">
          <h2>
            Level Up Your Website <b>Anime.js</b>
          </h2>
          <p>
            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quibusdam possimus dolorem maiores vitae fuga.
            Fuga cumque voluptates vero commodi quia excepturi eligendi asperiores fugit hic ipsa, dolores explicabo
            consequuntur neque.
          </p>
          <a href="#" className="btn">
            Learn More
          </a>
        </div>
        <div className="container" ref={containerRef}></div>
      </section>
    </div>
  );
};

export default AnimeComponent;

Now lets see how these stufs works and how we can style the animated square and navigation part .

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins", sans-serif;

}

body
{
    min-height: 100vh;
    background:#222;
}

header{
    position: fixed;
    padding: 30px 100px;
    width: 100%;
    display: flex;
    justify-content: space-between;
}

header .logo {

    color: #fff;
    font-size: 2em;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 700;
    letter-spacing: 0.1em;
}

header ul {
    display: flex;
    gap: 40px;
}

header ul li {
  
    list-style: none;

}

header ul li a {
  
   text-decoration: none;
   color: #999;
   text-transform: uppercase;
   letter-spacing: 0.2em;
   transition: 0.5s;
    
}

header ul li a:hover,
header ul li a.active
{ 
    color: #fff;
}

section
{
    display: flex;
    justify-content: space-between;
    align-items: center;
    min-height: 100vh;
    padding: 100px;
    gap: 100px;
}

section .content
{
    max-width: 700px;
}

section .content h2
{
    font-size: 3.5em;
    color: #fff;
    font-weight: 500;
}

section .content h2 b
{
    /* font-size: 3.5em; */
    color: #0f0;
    font-weight: 500;
}

section .content p 
{
    color: #999;
    font-size: 1.1em;
}

section .content .btn
{
    padding: 10px 15px;
    background: #fff;
    color: #222;
    text-decoration: none;
    text-transform: uppercase;
    font-weight: 500;
    display: inline-block;
    margin-top: 25px;
    letter-spacing: 0.2em;
}

section .container 
{
    position: relative;
    right: 100px;
    min-width: 400px;
    width: 400px;
    /* height: 400px; */
    /* background: red; */
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
}

section .container .element
{
    position: relative;
    width: 40px;
    height: 40px;
    background: rgb(255, 255, 255);
   /* margin: 10px; */
    scale: 0.75;
}

Conclusion

I hope you enjoyed this little tutorial. Let me know over on comment and please give me suggestion regarding it which type of content you want. Hope you are comfortable with this tutorial if you kindly comment in the comment box if you are facing any issues with it.

Happy Coding! ?

Tags: , , , , , ,