%PDF- %PDF-
Mini Shell

Mini Shell

Direktori : /var/www/html/src/Components/
Upload File :
Create Path :
Current File : /var/www/html/src/Components/Header.js

import { useEffect, useRef } from "react";
import { AdventureTitle, ArrowGroup } from "./Icons";
import parse from "html-react-parser";

import { gsap } from "gsap";
import { ScrollTrigger } from "gsap/dist/ScrollTrigger";

gsap.registerPlugin(ScrollTrigger);

function Header({ data }) {
  let title = useRef(null);

  function scrollToTargetAdjusted(target) {
    let element = document.querySelector(target);
    let headerOffset = document.querySelector(".heroLogo .logo").offsetHeight;
    let elementPosition = element.getBoundingClientRect().top;
    let offsetPosition = elementPosition + window.pageYOffset - headerOffset;
    let mobileOffsetPosition =
      elementPosition + window.pageYOffset - headerOffset - 50;

    window.scrollTo({
      top: headerOffset < 125 ? mobileOffsetPosition : offsetPosition,
      behavior: "smooth",
    });
  }

  useEffect(() => {
    setTimeout(() => {
      const heroText = gsap.timeline({
        scrollTrigger: {
          trigger: ".mainHeader",
          start: "top top",
          end: "+=50%",
          pin: true,
          scrub: 1,
        },
      });

      heroText.to(title, { scale: 60, x: "100%", ease: "none" });
    });
  }, []);

  return (
    <div className="hero-wrapper">
      <div className="mainHeader">
        <div className="intro">
          <h4>{data.small_text}</h4>
          <div
            className="adventure-title-div"
            ref={(element) => {
              title = element;
            }}
          >
            <AdventureTitle />
          </div>
          <p className="atvTours">{parse(data.small_text_second)}</p>

          <a
            href="#aboutScroll"
            onClick={(e) => {
              e.preventDefault();
              scrollToTargetAdjusted(".mainAbout .intro .text h1");
            }}
          >
            <div className="explore">
              <div className="arrows">
                <ArrowGroup />
              </div>
              <span>{data.button_label}</span>
            </div>
          </a>
        </div>
      </div>
    </div>
  );
}

export default Header;

Zerion Mini Shell 1.0