Scroll Animation | Html And Css And JavaScript With Free Source Code

Scroll Animation is a technique used to create visually appealing effects when scrolling through a webpage.

By combining HTML, CSS, and JavaScript, you can animate elements on your webpage as the user scrolls down or up

Follow Us On Telegram   Telegram link

Download Code

<!DOCTYPE html>
<html lang="en" >
  <meta charset="UTF-8">
  <title>CodeAtNow | ScrollTrigger SVG Text Mask</title>
  <link rel="stylesheet" href="">
<link rel="stylesheet" href="./style.css">

<!-- partial:index.partial.html -->
<div class="scrollDist"></div>
<div class="main">
  <svg viewBox="0 0 1200 800" xmlns="">
    <mask id="m">
      <g class="cloud1">
        <rect fill="#fff" width="100%" height="801" y="799" />
        <image xlink:href="" width="1200" height="800"/>
    <image class="sky" xlink:href=""  width="1200" height="590" />
    <image class="mountBg" xlink:href="" width="1200" height="800"/>    
    <image class="mountMg" xlink:href="" width="1200" height="800"/>    
    <image class="cloud2" xlink:href="" width="1200" height="800"/>    
    <image class="mountFg" xlink:href="" width="1200" height="800"/>
    <image class="cloud1" xlink:href="" width="1200" height="800"/>
    <image class="cloud3" xlink:href="" width="1200" height="800"/>
    <text fill="#fff" x="350" y="200">EXPLORE</text>
    <polyline class="arrow" fill="#fff" points="599,250 599,289 590,279 590,282 600,292 610,282 610,279 601,289 601,250" />
    <g mask="url(#m)">
      <rect fill="#fff" width="100%" height="100%" />      
      <text x="350" y="200" fill="#162a43">FURTHER</text>
    <rect id="arrowBtn" width="100" height="100" opacity="0" x="550" y="220" style="cursor:pointer"/>
<!-- partial -->
  <script src=''></script>
<script src=''></script>
<script src=''></script>
<script src=''></script><script  src="./script.js"></script>

@import url('');

body, html {
  font-family: 'Montserrat', sans-serif;

div {
body::-webkit-scrollbar {
  display: none;

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
gsap.set('.main', {position:'fixed', background:'#fff', width:'100%', maxWidth:'1200px', height:'100%', top:0, left:'50%', x:'-50%'})
gsap.set('.scrollDist', {width:'100%', height:'200%'})
gsap.timeline({scrollTrigger:{trigger:'.scrollDist', start:'top top', end:'bottom bottom', scrub:1}})
    .fromTo('.sky', {y:0},{y:-200}, 0)
    .fromTo('.cloud1', {y:100},{y:-800}, 0)
    .fromTo('.cloud2', {y:-150},{y:-500}, 0)
    .fromTo('.cloud3', {y:-50},{y:-650}, 0)
    .fromTo('.mountBg', {y:-10},{y:-100}, 0)
    .fromTo('.mountMg', {y:-30},{y:-250}, 0)
    .fromTo('.mountFg', {y:-50},{y:-600}, 0)

$('#arrowBtn').on('mouseenter', (e)=>{'.arrow', {y:10, duration:0.8, ease:'back.inOut(3)', overwrite:'auto'}); })
$('#arrowBtn').on('mouseleave', (e)=>{'.arrow', {y:0, duration:0.5, ease:'power3.out', overwrite:'auto'}); })
$('#arrowBtn').on('click', (e)=>{, {scrollTo:innerHeight, duration:1.5, ease:'power1.inOut'}); }) // scrollTo requires the ScrollTo plugin (not to be confused w/ ScrollTrigger)

Post a Comment

Post a Comment (0)