Scroll | Html Css And JavaScript

Author - personCodeatnow

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodeAtNow - Scroll Effect</title>
  <link rel='stylesheet' href='https://use.typekit.net/xlj8lcy.css'><link rel="stylesheet" href="./style.css">

</head>
<body>
<!-- partial:index.partial.html -->
<main id="container">
  <h1>CodeAtNow<span>Free Source Code on Telegram Channel!</span> </h1>
</main>
<!-- partial -->
  <script src='https://unpkg.co/gsap@3/dist/gsap.min.js'></script>
<script src='https://unpkg.com/gsap@3/dist/ScrollTrigger.min.js'></script><script  src="./script.js"></script>

</body>
</html>

CSS

body {
  font-family: "proxima-nova", sans-serif;
  padding: 0;
  margin: 0;
}

#container {
  --target: 100%;
  width: 100%;
  background: linear-gradient(to right, #000 var(--target), #fff var(--target));
  display: flex;
  height: 100vh;
  justify-content: center;
  align-items: center;
}

h1 {
  color: white;
  font-size: clamp(2.5rem, 8vw, 6rem);
  text-align: center;
  letter-spacing: -0.02em;
  background: linear-gradient(to right, #fff var(--target), #000 var(--target));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: 100%;
  display: block;
  line-height: 0.95;
}
h1 span {
  font-size: 0.3em;
  display: block;
}

console.clear();
gsap.config({ trialWarn: false });
gsap.registerPlugin(ScrollTrigger);
gsap.to("#container", {
  "--target": "0%",
  ease: "none",
  scrollTrigger: {
    trigger: "#container",
    markers: {
      startColor: "yellow",
      endColor: "#42a6e0",
      fontSize: "14px"
    },
    start: "top top",
    end: "+=1000",
    pin: true,
    scrub: 1
  }
});

Get Full Source Code Zipped File

Telegram link