Webleb - Snippets de Código -

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

JS

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

Recomendado

Um código por dynamicarray606

Um Código de Metehan

Caixas de seleção de sabre de luz Star Wars em CSS3 puro

HTML

CSS

JS

Recomendado

Um código por dynamicarray606

Um Código de Metehan

Caixas de seleção de sabre de luz Star Wars em CSS3 puro

HTMLCopy

CSSCopy

JSCopy

HTML

CSS

JS