ग्रेडिएंट और बादलों के साथ SVG एनिमेटेड दृश्य

95 eshgh2ab

संपादक में खोलें अपना कोड प्रकाशित करें

ग्रेडिएंट और बादलों के साथ SVG एनिमेटेड दृश्य

अनुशंसित

25 August 2024

ऑनस्क्रॉल एनिमेशन: स्क्रॉलमैजिक के साथ गतिशील सामग्री स्क्रॉल

28 August 2025

सौर पैनल स्थापना | सेवाएँ और कीमतें

6 August 2025

चमकता हिंडोला: गति में ग्रेडिएंट टेक्स्ट और पॉपअप

HTML

<!DOCTYPE html>
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Andev Web</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="./style.css">

</head>
<body>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 750 500" preserveAspectRatio="xMidYMax slice">
    <defs>
        
        <linearGradient id="grad1" x1="-154.32" y1="263.27" x2="-154.32" y2="374.3"
            gradientTransform="matrix(-1, 0, 0, 1.36, 231.36, -100.14)" gradientUnits="userSpaceOnUse">
            <stop offset="0.07" stop-color="#9c536b" />
            <stop offset="0.98" stop-color="#d98981" />
        </linearGradient>
        <radialGradient id="bg_grad" cx="375" cy="-35" r="318.69" gradientUnits="userSpaceOnUse">
            <stop offset="0.1" stop-color="#F5C54E" id="sun" />
            <stop offset="0.1" stop-color="#FFDBA6" />
            <stop offset="0.0" stop-color="#F7BB93" />
            <stop offset="0.0" stop-color="#F2995E" />
            <stop offset="0.0" stop-color="#f07560" />
            <stop offset="0.8" stop-color="#FFAB93" />
        </radialGradient>
        <linearGradient id="grad2" x1="242.5" y1="356.25" x2="750" y2="356.25" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#fbbd93" />
            <stop offset="0.98" stop-color="#c46976" />
        </linearGradient>
        <linearGradient id="grad3" x1="467.26" y1="500" x2="467.26" y2="225.47" gradientUnits="userSpaceOnUse">
            <stop offset="0.01" stop-color="#ffb8bd" />
            <stop offset="1" stop-color="#914d64" />
        </linearGradient>
        <linearGradient id="grad4" x1="216.56" y1="227.64" x2="191.14" y2="600.82"
            gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#70375a" />
            <stop offset="0.96" stop-color="#8a6e95" />
        </linearGradient>
        <linearGradient id="grad5" x1="1" y1="413.12" x2="340.58" y2="413.12" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#433d6c" />
            <stop offset="1" stop-color="#392e54" />
        </linearGradient>
        <linearGradient id="grad6" x1="454.13" y1="295.96" x2="454.13" y2="498.93"
            gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#2b2850" />
            <stop offset="0.99" stop-color="#563a6a" />
        </linearGradient>
        <linearGradient id="grad7" x1="434.38" y1="391.96" x2="474.27" y2="516.33"
            gradientUnits="userSpaceOnUse">
            <stop offset="0.3" stop-color="#1c1b38" />
            <stop offset="0.38" stop-color="#201e3e" />
            <stop offset="0.9" stop-color="#383263" />
        </linearGradient>
        <linearGradient id="grad8" x1="259.18" y1="335.54" x2="213.65" y2="500.39"
            gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#0e0a1a" />
            <stop offset="0.3" stop-color="#100d1f" />
            <stop offset="0.64" stop-color="#17142c" />
            <stop offset="0.95" stop-color="#201f3f" />
        </linearGradient>
        <linearGradient id="grad9" x1="508.16" y1="321.39" x2="726.97" y2="623.69"
            gradientUnits="userSpaceOnUse">
            <stop offset="0.01" stop-color="#120e22" />
            <stop offset="1" stop-color="#221d42" />
        </linearGradient>

<linearGradient id="lg4" x1="641.98" y1="274.9" x2="638.02" y2="334.36" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#2c2c50" />
            <stop offset="1" stop-color="#434375" />
        </linearGradient>
        <linearGradient id="lg5" x1="172.37" y1="286.02" x2="171.33" y2="343.08" xlink:href="#lg4" />
        <linearGradient id="lg6" x1="505.71" y1="261.55" x2="504.61" y2="322.08" xlink:href="#lg4" />
        <linearGradient id="lg7" x1="301.32" y1="260.99" x2="295.66" y2="345.9" xlink:href="#lg4" />
        <linearGradient id="lg8" x1="375.59" y1="381.01" x2="373.3" y2="507.08" xlink:href="#lg4" />

<radialGradient id="bg2-grad" cx="365.22" cy="500" r="631.74"
            gradientTransform="translate(750 552.6) rotate(180) scale(1 1.11)" gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="hsla(349, 94%, 75%, 1)" />
            <stop offset="0.12" stop-color="hsla(342, 49%, 62%, 1)" />
            <stop offset="0.18" stop-color="hsla(328, 37%, 56%, 1)" />
            <stop offset="0.33" stop-color="hsla(281, 33%, 48%, 1)" />
            <stop offset="0.41" stop-color="hsla(268, 38%, 48%, 1)" />
            <stop offset="0.45" stop-color="hsla(266, 38%, 43%, 1)" />
            <stop offset="0.55" stop-color="hsla(261, 37%, 32%, 1)" />
            <stop offset="0.64" stop-color="hsla(253, 36%, 24%, 1)" />
            <stop offset="0.72" stop-color="hsla(244, 33%, 19%, 1)" />
            <stop offset="0.78" stop-color="hsla(240, 33%, 17%, 1)" />
        </radialGradient>
        <radialGradient id="fstar-grad" cx="1362.39" cy="-53.7" r="39.39"
                    gradientTransform="matrix(0.89, -0.45, -0.45, -0.89, -473.7, 640.57)"
                    gradientUnits="userSpaceOnUse">
                    <stop offset="0" stop-color="#fff" />
                    <stop offset="0.06" stop-color="#fff" stop-opacity="0.8" />
                    <stop offset="0.12" stop-color="#fff" stop-opacity="0.62" />
                    <stop offset="0.19" stop-color="#fff" stop-opacity="0.45" />
                    <stop offset="0.26" stop-color="#fff" stop-opacity="0.31" />
                    <stop offset="0.33" stop-color="#fff" stop-opacity="0.2" />
                    <stop offset="0.41" stop-color="#fff" stop-opacity="0.11" />
                    <stop offset="0.49" stop-color="#fff" stop-opacity="0.05" />
                    <stop offset="0.59" stop-color="#fff" stop-opacity="0.01" />
                    <stop offset="0.72" stop-color="#fff" stop-opacity="0" />
        </radialGradient>
        <linearGradient id="linear-gradient" x1="472" y1="461.56" x2="872.58" y2="461.56"
            gradientUnits="userSpaceOnUse">
            <stop offset="0" stop-color="#fd75a8" />
            <stop offset="1" stop-color="#5a2d81" />
        </linearGradient>
        <linearGradient id="linear-gradient-2" x1="214.61" y1="508.49" x2="166.09" y2="361.12"
            xlink:href="#linear-gradient" />
        <linearGradient id="linear-gradient-3" x1="57.65" y1="508.01" x2="448.08" y2="508.01"
            xlink:href="#linear-gradient" />
        <linearGradient id="linear-gradient-4" x1="193.48" y1="508.3" x2="761.05" y2="508.3"
            xlink:href="#linear-gradient" />
    </defs>

<g id="scene2">

<g id="scene3" style="visibility: hidden;">

<g id="scene1">
        <g id="hills1">
            <path id="h1-9"
                d="M696.36,409H75V335.47c10.19-.52,20.5-.36,30.05-3.65,8.11-2.8,15.84-8.49,23.78-11.33s18.18,1.84,25.36-4.85C165,305.56,172,289.79,186.71,292.8c6.21,1.27,12.09,3.66,18.43.84,6-2.65,9.73-9.46,14.69-13.54,2.87-2.35,6.42-3.2,9.35-5.49,1.65-1.28,5.45-6.37,7-6.92,7.94-2.93,10.34,2.69,18.56-3.47,6.45-4.84,8.52-8.21,15.45-5,5,2.35,11.89,10.09,16,15.37C294.9,286,302,297.77,312.71,307.53c11.62,10.63,21.59,9.37,34.67,5.83,16.12-4.37,18.32,9.06,32.24,15.28,7.45,3.32,13.23-1.7,19.6-2.08,3.64-.22,5.85,2.12,9.37,1.82,3.12-.27,4.08-4.44,8.33-3,7.32,12.31,15.75,20,28.21,20.59,14.32.7,27.12.76,39.73-4.94A145.24,145.24,0,0,0,502.11,332c8.71-5.36,11.22-2.82,19.35,1.5,11.66,6.21,25.31,1.08,36.56,9.18,5.53,4,8.36,12.23,14.64,14.79,4.86,2,15.59.38,20.4-1.18,13.47-4.38,21.52-16.59,36.56-17.33,13.57-.67,25.19-4.17,39.11-2.31,10.91,1.46,18.72-.1,27.63-2.61Z"
                fill="url(#grad1)" />
            <path id="h1-8"
                d="M750,500V212.49a19.09,19.09,0,0,0-11.54,8.17c-2.21,3.35-4.39,7.9-7.92,7.69-1.44-.08-2.78-1-4.23-1.08-5.12-.2-7.87,10.11-12.84,8.66a2.7,2.7,0,0,0-2.57-3.34c-1.49.1-2.72,1.38-3.77,2.67a46.94,46.94,0,0,0-7.7,14c-1.76-6-8.53-7.93-13.43-5.51s-8.31,7.76-11.48,12.87l-17.31,27.92c-4.54,7.33-11.47,15.57-18.52,12.15-3.38-1.64-5.76-5.76-9.32-6.73s-7.55,1.64-11.18.48c-5.45-1.76-8.37-11.36-14-10.4-3.13.54-5.93,4.55-8.87,3.14-1.52-.73-2.44-2.76-4-3.36s-3.32.52-5,1.13c-7.4,2.73-14.16-5.41-21.27-9.08-12.35-6.38-26.85,1.31-36.59,12.45-3.1,3.54-6,7.5-9.78,9.89-3.22,2-6.88,2.8-10.48,3.54L480,303.58c-15,3.07-30.14,6.2-44.07,13.54-6.63,3.48-13,7.91-19.94,10.16-10.83,3.5-22.26,1.5-33.47,1.18-9.18-.27-102.2,122.09-140,171.54Z"
                fill="url(#grad2)" />
            <path id="h1-7"
                d="M749.79,500,750,239.12c-.58-.62-1.15-1.25-1.74-1.87-5.67-5.95-12.57-12.05-20.78-11.77s-15.44,7.12-23.74,6.87c-7.55-.23-14.09-6.33-21.65-6.11-5.79.17-10.74,4-15.29,7.6C639.78,255.2,328.89,423.17,184.52,500Z"
                fill="url(#grad3)" />
            <path id="h1-6"
                d="M0,410.67V493H412.06c-35.38-101.16-98.42-78-131.23-117.2-32.36-10.29-64.31-17.76-94-31.31a5.83,5.83,0,0,1-.41-1,7.21,7.21,0,0,1-3.62.65c-.21-1.41-.42-2.83-.64-4.24-2.79.75-.89,3.32-3.9,3.95l-1.37-1.1a9.26,9.26,0,0,0-2.34,1l.12,0-.14,0,0,0-.92-.27.07.15a23.67,23.67,0,0,1-6.55-2.05l6.48,1.9c-1.55-3.22,1.78-7.31-3.91-7.15-.21-1.94-.43-3.88-.64-5.82a11.45,11.45,0,0,0-3.47,3.65l-.93-1.37c-1.28,1.74-1.15,5-4.08,2.84l-1,.27c-.33-2.48-.76-5.65-4-4.32a8.17,8.17,0,0,0-.7-4.34l-4.11,3.91c-.6-.27-1.21-.5-1.82-.74a12.42,12.42,0,0,1-1.26-2.53l-1.37,0a7.91,7.91,0,0,0-1-4.51,18.65,18.65,0,0,0-2.83,1.73l1.17-7.63c-3.59.35-3.37,4.37-5.21,6.67-.05-1.15-.09-2.3-.14-3.45-1.34,1.72-1.11,5.49-4.13,4.87v-3.4c-2.61,2.44-.21,7.7-5.37,5.82a7.46,7.46,0,0,0,.48-5.37l-2,4.83c-6.31-4.21-9.12-12.77-16.39-16.25-.1-.77-.21-1.53-.31-2.3a5.08,5.08,0,0,0-.88,1.59,35.35,35.35,0,0,0-8.44-3.48c-.71-1.26-2.37-2.1-3.57-1.32q-.85-7.06-1.7-14.12a46.56,46.56,0,0,0-2.74,10.63l-1.17-3a15.46,15.46,0,0,0-.45,6.63c-1.5,0-3,.08-4.53.08-.53-2.47-.42-9.91-4.23-5.49A44.26,44.26,0,0,0,81.32,290l-4,13.74a44,44,0,0,1-3-8.85l-1.35.55a39.63,39.63,0,0,0-1.85-10.68,47.8,47.8,0,0,0-2.47,5.58l-.24-19.43c-4.18,4.6-2.3,13-3.9,18.92-.26-2.83-.51-5.66-.77-8.49-.51,4.12-.73,8.28-1.38,12.38-.64-.11-1.28-.19-1.93-.26L60,286.83a32.55,32.55,0,0,0-.91,6.45c-1.11-.09-2.24-.15-3.37-.19-.12-1-.26-1.94-.45-2.9-.08,1-.16,1.91-.25,2.87-19.76-2.69-34.56-16.84-55-21.54Z"
                fill="url(#grad4)" />
            <path id="h1-5"
                d="M300.32,425.63c-7.78-5.38-17.22-7.93-25.57-12.43-14.59-7.87-25.69-21.55-39.79-29.71l-.42-3.55a7,7,0,0,0-1.09,2.71,51.13,51.13,0,0,0-7.74-3.43,7.19,7.19,0,0,0-.31-1.19c-.62-1.64-2.43-2.82-3.72-1.84q-.84-8.26-1.69-16.51a62.62,62.62,0,0,0-2.73,12.43l-1.17-3.48a19.73,19.73,0,0,0-.56,6.46c.05.58.12,1.19.13,1.79-1.51-.21-3-.39-4.55-.53q-.42-3-.82-6a2.73,2.73,0,0,0-.59-1.63c-.88-.85-2.11.31-2.8,1.37a60,60,0,0,0-1.47-12.2q-2,8-4,16.06a58.3,58.3,0,0,1-3-10.35l-1.34.65a53.76,53.76,0,0,0-1.85-12.48,59.91,59.91,0,0,0-2.46,6.52l-.24-22.71c-1.52.77-1.93,3-2.12,5l-1.77,17.15-.78-9.93-1.2,13.51c-.13,1.39-.82,3.26-2,2.83-.2-3.29-.41-6.58-.61-9.86a44.38,44.38,0,0,0-.86,12.34,18.5,18.5,0,0,1-.07,5.66,5.13,5.13,0,0,1-.41,1.11c-.92-.17-1.85-.33-2.77-.53a62.45,62.45,0,0,0-.61-14.65q-.52,7.14-1.06,14.28l-1.91-.44a14.36,14.36,0,0,0-1.77-3.85c-.07,1.13-.17,2.25-.28,3.38-2.83-.7-5.64-1.49-8.44-2.33a46.58,46.58,0,0,1-.7-7.73c0-2.21.08-4.65-1.13-6.35q-1.16,5.75-2.32,11.5l-2.94-5.22a10.84,10.84,0,0,1-1.43,2.94,70.76,70.76,0,0,1-2.06-19.48,5.51,5.51,0,0,0-.28-2.47c-.34-.74-1.22-1.21-1.81-.72a2.32,2.32,0,0,0-.58,1.35c-.62,3.45-.58,7.51-2.89,9.76a71.71,71.71,0,0,0-2.09-7.57c-2.17.41-.33,6-2.51,6.33a2.8,2.8,0,0,1-1.22-.29c-1.88-.61-4.05.95-4.43,3.18A36.92,36.92,0,0,0,138,349c-1,1-1.37,2.63-1.93,4.05s-1.61,2.84-2.94,2.73c-1.18-.09-2-1.43-2.29-2.79a16.05,16.05,0,0,1,.11-4.15,24,24,0,0,0-1.22-9.68q-1.32,6.12-2.65,12.23a2.46,2.46,0,0,1-.84,1.52l-1-.49a3.24,3.24,0,0,1-.19-.52q-.7-2.39-1.39-4.77a4.89,4.89,0,0,0-3.28,2.8q-2.15-1.11-4.28-2.25c-.4-1.45-.1-3.37-.22-5a14.5,14.5,0,0,0-1.82-5.32,28.44,28.44,0,0,1-1.43,8.47c-11.66-6.3-23.87-12.92-37.13-12.57C47.46,334,28.3,364.93,1,369.38V493H340.58C329.05,468.15,305.9,429.49,300.32,425.63Z"
                fill="url(#grad5)" />
            <path id="h1-4"
                d="M751,500V432.05c-32.59-68.73-53.56-58.59-101.56-92.59-.14-1-.27-2-.41-3a5.36,5.36,0,0,0-1.09,2.31,56.55,56.55,0,0,0-7.75-2.93c-.19-1.82-2.36-3.63-4-2.59q-.85-7-1.7-14.08a46.81,46.81,0,0,0-2.73,10.6l-1.16-3a16.62,16.62,0,0,0-.43,7.05c-1.51-.19-3-.33-4.56-.46-.51-2.46-.45-9.74-4.2-5.36a44.16,44.16,0,0,0-1.47-10.41q-2,6.86-3.95,13.71a44,44,0,0,1-3-8.83l-1.35.55a39.72,39.72,0,0,0-1.84-10.65,45.84,45.84,0,0,0-2.46,5.56l-.25-19.38c-4.16,4.58-2.3,13-3.88,18.87l-.78-8.47c-1.32,4,.82,12.1-3.16,13.94-.21-2.81-.41-5.61-.62-8.41-2,5.29.27,11.14-1.33,16.31-.93-.15-1.85-.29-2.77-.45a45.62,45.62,0,0,0-.61-12.51q-.54,6.09-1.06,12.18l-1.91-.37a11.76,11.76,0,0,0-1.77-3.29c-.07,1-.17,1.93-.28,2.89-2.83-.6-5.65-1.27-8.44-2-1.27-3.84.32-8.58-1.83-12l-2.33,9.81-2.94-4.46a8.34,8.34,0,0,1-1.43,2.51c-3.72-8.44.44-31.59-7.61-9.86a56,56,0,0,0-2.1-6.46c-2.55,9.5-4.65,1.59-8.16,7.87A27,27,0,0,0,552.5,310c-7.5,13.85-6.56-1.79-8.28-8.39-1.32,3.76-1.37,8.43-3.48,11.73l-1-.42c-.6-1.47-1-3-1.58-4.51a4.75,4.75,0,0,0-3.27,2.39l-4.28-1.92c-.37-2.95,0-6.25-2-8.82a21.06,21.06,0,0,1-1.44,7.23C477.88,273,440.32,336.09,390,328l-.24-2.24a17.27,17.27,0,0,0-.38,2.34c-.65.1-1.29.21-1.93.33a12.8,12.8,0,0,0-.56-4.29c-.12,1.36-.25,2.72-.37,4.08-2.29-.67-1.19-4.81-1.93-6.76-.15,1.37-.31,2.74-.47,4.1-.93-2.87.08-7.13-2.36-9.15l-.15,9.4a22.45,22.45,0,0,0-1.5-2.7,16.09,16.09,0,0,0-1.12,5.17l-.82-.27a18.83,18.83,0,0,1-1.62,3.93l-.28.12q-1.16-3.21-2.32-6.41a17.14,17.14,0,0,0-.89,5.05c-2.66-2.43-2.31,2.71-2.89,4.27l-.58-.55c-2.76,1.71-1.29-3-2.12-4.32l-.71,1.44a18.49,18.49,0,0,0-1.66-5.14c-.34,2.28-.68,4.55-1,6.83-4.21-.74-1.58,5.19-3,7.44l-.64.42a6.89,6.89,0,0,0-1.31-1.72l-.93,1c-1.73-1.42-.31-4.09-1.9-5.61l-.84,4.95a3.65,3.65,0,0,1-2.09-1.59c-.19.78-1.24,5.51-2.26,9.24l-8.66,5.85a65.51,65.51,0,0,1-1.3-8.18c0,2.68-2,7.92-2.88,11l-3.06,2.07c-1-3.79-2.06-7.14-2.86-7.28-.47,1.36-1.07,8.89-1.53,10.25l-1.7,1.15c-.87-4.35-1.81-9.29-2.35-11.4-.83,2-.58,8.93-.31,13.19l-5.71,3.87c-.65-2.27-1.49-5.21-2.16-5.78-.66,1.48-.89,5.65-1.27,7.23-4.69-4-3.69,5.18-7.43-5.62a53.47,53.47,0,0,0-2.09,6.46c-8.06-21.78-3.89,1.47-7.62,9.86a8.34,8.34,0,0,1-1.43-2.51L295.79,382l-2.32-9.81c-2.32,4.54-.48,10.52-2.67,15.35-12.35,7.5-87.61,76.23-133.54,112.42Z"
                fill="url(#grad6)" />
                                    <g id="info">
                            <polygon id="arrow" points="353.93 368.91 356.06 366.79 374.26 385 392.47 366.79 394.59 368.91 374.26 389.24 353.93 368.91" fill="#fff" stroke="#231f20" stroke-miterlimit="10" stroke-width="0.5"/>
                            <path id="text" d="M261.62,345.74c8.46,7,22.53-4.51,8.16-9.84-17.91-5.31-3.78-24.1,9.06-16.36L277.69,323c-8.32-5.73-19.5,5.41-5.8,9.55,18.58,6.42,2.18,25.66-11.33,16.74ZM302.54,350c-23.47,10.27-23.65-31.11.1-21.64l-1,3.27c-17.3-7.88-16.61,23.5.14,15.21Zm4.94-15.11c0-2.74,0-5.09-.19-7.25H311l.14,4.56h.19c1.19-3.52,4.35-5.66,7.63-4.94v4c-10.08-1.88-6.76,14-7.29,19.63h-4.18ZM343.71,339c.06,16.73-23.06,16-22.7.39C320.43,323.17,344.34,323.23,343.71,339Zm-18.43.24c-.33,11.66,14.44,11.71,14.11-.09C340.37,327.86,324.33,327.6,325.28,339.26ZM349,316.76h4.22v34.07H349Zm11.32,0h4.23v34.07h-4.23ZM382,318.92c35.43-9.2,34.89,39.64,0,31.81Zm4.18,28.6c23.33,5.69,24.08-31.95,0-25.53ZM435,339c.06,16.73-23.06,16-22.7.39C411.73,323.17,435.64,323.23,435,339Zm-18.43.24c-.33,11.66,14.43,11.71,14.11-.09C431.67,327.86,415.63,327.6,416.58,339.26Zm25.09-11.66c1.21,4.84,3.94,14.5,4.8,19.2h.15c1-4.69,4.38-14.43,5.85-19.2H456c1.44,4.8,4.69,14.59,5.66,19.2h.15c.7-4.59,3.81-14.45,5.08-19.2h4.18l-7.49,23.23h-3.84c-1.53-5-4.6-13.66-5.61-18.72h-.1c-1,5.17-4.22,13.71-5.85,18.72h-3.84l-7-23.23Zm33.63,6.29c0-2.4,0-4.37-.19-6.29h3.75l.24,3.84h.09c14.6-14.27,17.39,7,

CSS

body,
html{
      margin: 0;
      padding: 0;
      height: 100%;
}

/* Hide scrollbar for Chrome, Safari and Opera */
body::-webkit-scrollbar {
  display: none;
}

/* Hide scrollbar for IE, Edge and Firefox */
body {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}

svg {
      display: block;
      width: 100%;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
}
  
.scrollElement {
      position: absolute;
      height: 6000px;
      width: 100px;
      top: 0;
      z-index: 0;
}

.btn {
      position: fixed;
      bottom: 5%;
      right: 0px;
      transform: translateX(-50%);
      border: 1px solid #fff;
      border-radius: 5px;
      font-size: 0.9rem;
      padding: 0.5rem 0.7em;
      background-color: transparent;
      color: #ffffff;
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      -webkit-font-smoothing: antialiased;
      cursor: pointer;
      transition: all .3s;
      z-index: 11;
  }

.btn_works {
      left: 100px;
      right: unset;
      text-decoration: none;
  }

.btn:hover {
      background: #ffffff;
      color: #1B1734;
  }

JS

gsap.registerPlugin(ScrollTrigger);
    let speed = 100;

/*  SCENE 1 */
    let scene1 = gsap.timeline();
    ScrollTrigger.create({
        animation: scene1,
        trigger: ".scrollElement",
        start: "top top",
        end: "45% 100%",
        scrub: 3,
    });

// hills animation 
    scene1.to("#h1-1", { y: 3 * speed, x: 1 * speed, scale: 0.9, ease: "power1.in" }, 0)
    scene1.to("#h1-2", { y: 2.6 * speed, x: -0.6 * speed, ease: "power1.in" }, 0)
    scene1.to("#h1-3", { y: 1.7 * speed, x: 1.2 * speed }, 0.03)
    scene1.to("#h1-4", { y: 3 * speed, x: 1 * speed }, 0.03)
    scene1.to("#h1-5", { y: 2 * speed, x: 1 * speed }, 0.03)
    scene1.to("#h1-6", { y: 2.3 * speed, x: -2.5 * speed }, 0)
    scene1.to("#h1-7", { y: 5 * speed, x: 1.6 * speed }, 0)
    scene1.to("#h1-8", { y: 3.5 * speed, x: 0.2 * speed }, 0)
    scene1.to("#h1-9", { y: 3.5 * speed, x: -0.2 * speed }, 0)

//animate text
    scene1.to("#info", { y: 8 * speed }, 0)

/*   Bird   */
    gsap.fromTo("#bird", { opacity: 1 }, {
        y: -250,
        x: 800,
        ease: "power2.out",
        scrollTrigger: {
            trigger: ".scrollElement",
            start: "15% top",
            end: "60% 100%",
            scrub: 4,
            onEnter: function() { gsap.to("#bird", { scaleX: 1, rotation: 0 }) },
            onLeave: function() { gsap.to("#bird", { scaleX: -1, rotation: -15 }) },
        }
    })

/* Clouds  */
    let clouds = gsap.timeline();
    ScrollTrigger.create({
        animation: clouds,
        trigger: ".scrollElement",
        start: "top top",
        end: "70% 100%",
        scrub: 1,
    });

clouds.to("#cloud1", { x: 500 }, 0)
    clouds.to("#cloud2", { x: 1000 }, 0)
    clouds.to("#cloud3", { x: -1000 }, 0)
    clouds.to("#cloud4", { x: -700, y: 25 }, 0)

/* Sun motion Animation  */
    let sun = gsap.timeline();
    ScrollTrigger.create({
        animation: sun,
        trigger: ".scrollElement",
        start: "top top",
        end: "2200 100%",
        scrub: 1,
    });

//sun motion 
    sun.to("#bg_grad", { attr: { cy: "330" } }, 0.00)

//bg change
    sun.to("#sun", { attr: { offset: "0.15" } }, 0.00)
    sun.to("#bg_grad stop:nth-child(2)", { attr: { offset: "0.15" } }, 0.00)
    sun.to("#bg_grad stop:nth-child(3)", { attr: { offset: "0.18" } }, 0.00)
    sun.to("#bg_grad stop:nth-child(4)", { attr: { offset: "0.25" } }, 0.00)
    sun.to("#bg_grad stop:nth-child(5)", { attr: { offset: "0.46" } }, 0.00)
    sun.to("#bg_grad stop:nth-child(6)", { attr: { "stop-color": "#FF9171" } }, 0)

/*   SCENE 2  */
    let scene2 = gsap.timeline();
    ScrollTrigger.create({
        animation: scene2,
        trigger: ".scrollElement",
        start: "15% top",
        end: "40% 100%",
        scrub: 4,
    });

scene2.fromTo("#h2-1", { y: 500, opacity: 0 }, { y: 0, opacity: 1 }, 0)
    scene2.fromTo("#h2-2", { y: 500 }, { y: 0 }, 0.1)
    scene2.fromTo("#h2-3", { y: 700 }, { y: 0 }, 0.1)
    scene2.fromTo("#h2-4", { y: 700 }, { y: 0 }, 0.2)
    scene2.fromTo("#h2-5", { y: 800 }, { y: 0 }, 0.3)
    scene2.fromTo("#h2-6", { y: 900 }, { y: 0 }, 0.3)

/* Bats */
    gsap.fromTo("#bats", { opacity: 1, y: 400, scale: 0 }, {
        y: 120,
        scale: 0.8,
        transformOrigin: "50% 50%",
        ease: "power3.out",
        scrollTrigger: {
            trigger: ".scrollElement",
            start: "40% top",
            end: "70% 100%",
            scrub: 3,
            onEnter: function() {
                gsap.utils.toArray("#bats path").forEach((item, i) => {
                    gsap.to(item, { scaleX: 0.5, yoyo: true, repeat: 11, duration: 0.15, delay: 0.7 + (i / 10), transformOrigin: "50% 50%" })
                });
                gsap.set("#bats", { opacity: 1 })
            },
            onLeave: function() { gsap.to("#bats", { opacity: 0, delay: 2 }) },
        }
    })

/* Sun increase */
    let sun2 = gsap.timeline();
    ScrollTrigger.create({
        animation: sun2,
        trigger: ".scrollElement",
        start: "2200 top",
        end: "5000 100%",
        scrub: 1,
    });

sun2.to("#sun", { attr: { offset: "0.6" } }, 0)
    sun2.to("#bg_grad stop:nth-child(2)", { attr: { offset: "0.7" } }, 0)
    sun2.to("#sun", { attr: { "stop-color": "#ffff00" } }, 0)
    sun2.to("#lg4 stop:nth-child(1)", { attr: { "stop-color": "#623951" } }, 0)
    sun2.to("#lg4 stop:nth-child(2)", { attr: { "stop-color": "#261F36" } }, 0)
    sun2.to("#bg_grad stop:nth-child(6)", { attr: { "stop-color": "#45224A" } }, 0)

/* Transition (from Scene2 to Scene3) */
    gsap.set("#scene3", { y: 580, visibility: "visible" })
    let sceneTransition = gsap.timeline();
    ScrollTrigger.create({
        animation: sceneTransition,
        trigger: ".scrollElement",
        start: "70% top",
        end: "bottom 100%",
        scrub: 3,
    });

sceneTransition.to("#h2-1", { y: -680, scale: 1.5, transformOrigin: "50% 50%" }, 0)
    sceneTransition.to("#bg_grad", { attr: { cy: "-80" } }, 0.00)
    sceneTransition.to("#bg2", { y: 0 }, 0)

/* Scene 3 */
    let scene3 = gsap.timeline();
    ScrollTrigger.create({
        animation: scene3,
        trigger: ".scrollElement",
        start: "80% 50%",
        end: "bottom 100%",
        scrub: 3,
    });

//Hills motion
    scene3.fromTo("#h3-1", { y: 300 }, { y: -550 }, 0)
    scene3.fromTo("#h3-2", { y: 800 }, { y: -550 }, 0.03)
    scene3.fromTo("#h3-3", { y: 600 }, { y: -550 }, 0.06)
    scene3.fromTo("#h3-4", { y: 800 }, { y: -550 }, 0.09)
    scene3.fromTo("#h3-5", { y: 1000 }, { y: -550 }, 0.12)

//stars
    scene3.fromTo("#stars", { opacity: 0 }, { opacity: 0.5, y: -500 }, 0)

// Scroll Back text
    scene3.fromTo("#arrow2", { opacity: 0 }, { opacity: 0.7, y: -710 }, 0.25)
    scene3.fromTo("#text2", { opacity: 0 }, { opacity: 0.7, y: -710 }, 0.3)

//gradient value change
    scene3.to("#bg2-grad", { attr: { cy: 600 } }, 0)
    scene3.to("#bg2-grad", { attr: { r: 500 } }, 0)

/*   falling star   */
    gsap.to("#fstar", {
        x: -700,
        y: -250,
        ease: "power4.out",
        scrollTrigger: {
            trigger: ".scrollElement",
            start: "4000 top",
            end: "6000 100%",
            scrub: 5,
            onEnter: function() { gsap.set("#fstar", { opacity: 1 }) },
            onLeave: function() { gsap.set("#fstar", { opacity: 0 }) },
        }
    })

//reset scrollbar position after refresh
    window.onbeforeunload = function() {
        window.scrollTo(0, 0);
    }

let fullscreen;
let fsEnter = document.getElementById('fullscr');
fsEnter.addEventListener('click', function (e) {
    e.preventDefault();
    if (!fullscreen) {
        fullscreen = true;
        document.documentElement.requestFullscreen();
        fsEnter.innerHTML = "Exit Fullscreen";
    }
    else {
        fullscreen = false;
        document.exitFullscreen();
        fsEnter.innerHTML = "Go Fullscreen";
    }
});

अनुशंसित

ऑनस्क्रॉल एनिमेशन: स्क्रॉलमैजिक के साथ गतिशील सामग्री स्क्रॉल

सौर पैनल स्थापना | सेवाएँ और कीमतें

चमकता हिंडोला: गति में ग्रेडिएंट टेक्स्ट और पॉपअप

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS