No rendirse nunca

2,120 0 Andev.web Seguir

Remix Abrir en el editor Pantalla completa Comentar Publica tu código

Recomendado

21 July 2025

Cuadro de registro de inicio de sesión 3D Diseño HTML CSS

29 December 2025

Diseño de tarjeta HTML: fragmento de sitio web en francés

21 January 2025

Página de destino de la agencia inmobiliaria

HTML

CSS

@import url("https://fonts.googleapis.com/css2?family=Rubik+Mono+One&display=swap");

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  display: grid;
  place-items: center;
  place-content: center;
  grid-template-areas: "body";
  background: #27052d;
  color: white;
  overflow: hidden;
}

body::before {
  --size: 150vmax;
  --bg-size: 50%;

content: "";
  grid-area: body;
  width: var(--size);
  height: var(--size);
  opacity: var(--pattern-opacity, 1);
  background-color: blue;

background-image: url("data:image/svg+xml,%3Csvg width='52' height='26' viewBox='0 0 52 26' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='hotpink' %3E%3Cpath d='M10 10c0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6h2c0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4 3.314 0 6 2.686 6 6 0 2.21 1.79 4 4 4v2c-3.314 0-6-2.686-6-6 0-2.21-1.79-4-4-4-3.314 0-6-2.686-6-6zm25.464-1.95l8.486 8.486-1.414 1.414-8.486-8.486 1.414-1.414z' /%3E%3C/g%3E%3C/g%3E%3C/svg%3E");

background-size: var(--bg-size);
  background-repeat: repeat;
  -webkit-animation: var(--pattern-animation, pattern 20s linear infinite);
          animation: var(--pattern-animation, pattern 20s linear infinite);
}

h1 {
  grid-area: body;
  position: relative;
  display: flex;
  align-items: center;
  font-family: "Outfit", sans-serif;
  font-size: calc(1rem + 15vmin);
  line-height: 0.9;
  text-transform: uppercase;
  mix-blend-mode: difference;
}
h1 span {
  display: block;
}

button {
  display: none;
  cursor: pointer;
  position: fixed;
  bottom: 5vh;
  left: 0;
  right: 0;
  width: -webkit-fit-content;
  width: -moz-fit-content;
  width: fit-content;
  margin-inline: auto;
  padding: 0.75rem 1.5rem;
  font-family: system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  color: blue;
  background: white;
  border: 1px solid transparent;
  border-radius: 360px;
  box-shadow: 0 6px 6px -3px hsla(0 0% 0% / 0.1);
}

@-webkit-keyframes pattern {
  to {
    background-position: calc(var(--size) * -1) calc(var(--size) * -1);
  }
}

@keyframes pattern {
  to {
    background-position: calc(var(--size) * -1) calc(var(--size) * -1);
  }
}

@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  body {
    --pattern-opacity: 0;
  }

h1 {
    opacity: 0;
  }
}

@media (scripting: none), (prefers-reduced-motion) {
  h1 {
    display: flex;
    flex-direction: column;
  }

.hash {
    display: none;
  }
}

@media (prefers-reduced-motion) {
  body {
    --pattern-animation: none;
  }
}

let btn = document.querySelector("button");
let heading = document.querySelector("h1");
let words = heading.querySelectorAll(".word");
let hash = heading.querySelector(".hash");
let reducedMotion = window.matchMedia("(prefers-reduced-motion)").matches;

if (!reducedMotion) {
  let tl = gsap.timeline();

btn.addEventListener("click", () => {
    tl.restart();
  });

tl.set(heading, {
    scale: 0.25,
    opacity: 0
  })
    .to(heading, {
      scale: 0.4,
      opacity: 1,
      duration: 0.7,
      ease: "power4.out"
    })

.to(
      hash,
      {
        scale: 0,
        duration: 0.4,
        ease: "back.in(1.6)"
      },
      "-=0.2"
    )

.to(words[0], {
      xPercent: -20,
      duration: 0.8,
      ease: "elastic.out(0.7, 0.2)"
    })
    .to(
      words[1],
      {
        xPercent: -20,
        duration: 0.8,
        ease: "elastic.out(0.7, 0.2)"
      },
      "<"
    )
    .to(
      words[2],
      {
        xPercent: 5,
        duration: 0.8,
        ease: "elastic.out(0.7, 0.2)"
      },
      "<"
    )

.to(
      heading,
      {
        scale: 1.001,
        y: 0,
        duration: 0.5,
        ease: "back.in(1.5)"
      },
      "-=0.3"
    )

.to(
      words[1],
      {
        scaleX: 1.8,
        scaleY: 2.2,
        duration: 0.4,
        ease: "expo.inOut"
      },
      "<+=0.1"
    )
    .to(
      words[0],
      {
        yPercent: -150,
        xPercent: 40,
        duration: 0.3,
        ease: "power4.out"
      },
      "<"
    )
    .to(
      words[1],
      {
        xPercent: -70,
        duration: 0.3,
        ease: "power4.out"
      },
      "<"
    )
    .to(
      words[2],
      {
        yPercent: 150,
        xPercent: -110,
        duration: 0.3,
        ease: "power4.out"
      },
      "<"
    )

.to(
      heading,
      {
        scale: 1.1,
        duration: 0.3,
        ease: "power4.out"
      },
      "-=0.2"
    )

.to(heading, {
      scale: 1,
      duration: 0.3,
      ease: "power4.out"
    })
    .to(
      words[0],
      {
        yPercent: -100,
        xPercent: 40,
        duration: 0.6,
        ease: "elastic.out(0.6,0.2)"
      },
      "<"
    )

.to(
      words[1],
      {
        scale: 1,
        duration: 0.6,
        ease: "elastic.out(0.6,0.2)"
      },
      "<"
    )
    .to(
      words[2],
      {
        yPercent: 100,
        duration: 0.6,
        ease: "elastic.out(0.6,0.2)"
      },
      "<"
    )

.to(
      document.body,
      {
        "--pattern-opacity": 1,
        duration: 0.1
      },
      "<"
    )
    .set(btn, { display: "block" })
    .fromTo(
      btn,
      { scale: 0.8 },
      {
        scale: 1,
        opacity: 1,
        duration: 0.4,
        ease: "power4.out"
      }
    );
}

Comments 0

…