Escena animada SVG con degradados y nubes

602 eshgh2ab

Abrir en el editor Video Publica tu código

Escena animada SVG con degradados y nubes

Recomendado

24 February 2025

Un código de securearray494

16 September 2025

Formulario HTML de transferencia de monedas con selección de pago

27 December 2024

Una página de inicio creada con directorios.

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";
    }
});

Recomendado

Un código de securearray494

Formulario HTML de transferencia de monedas con selección de pago

Una página de inicio creada con directorios.

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS