Scrambling letter effect on hover

index.pug

p
  span.line
    span.word My
    span.word Name
    span.word is
    a.word(href="https://sil.mt") Sil
  span.line
    span.word you 
    span.word can
    span.word find
  span.line
    span.word me 
    span.word on
    a.word(href="https://github.com/silvandiepen") Github
    span.word &
  span.line
    a.word(href="https://codepen.io/silvandiepen") Codepen

scrambling-letter-effect-on-hover.markdown

Scrambling letter effect on hover

A Pen by Sil van Diepen on CodePen.

License.

script.js

const enhance = () => {
  document.querySelectorAll(".word").forEach((word) => {
    const letters = word.innerText.split("");
    word.innerHTML = null;
    letters.forEach((letter) => {
      word.innerHTML += `<span class="letter">${letter}</span>`;
    });
  });
};
enhance();

style.scss

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

body {
  display: grid;
  place-items: center;
  min-height: 100svh;
  background-color: black;
  color: white;
}
.line {
  display: flex;
  justify-content: space-between;
}
.word {
  transition: opacity 0.2s ease-in-out;
}
a.word {
  color: inherit;
  .letter {
    position: relative;
    &::before {
      content: "";
      width: 100%;
      height: 3px;
      display: block;
      position: absolute;
      bottom: 0;
      background-color: red;
    }
  }
}
.letter {
  display: inline-block;
  transition: transform 0.2s ease-in-out;
  transform: translate(calc(var(--x, 0) * 1%), calc(var(--y, 0) * 1%))
    rotate(calc(var(--r, 0) * 1deg)) scale(var(--s, 1));
}

p {
  font-size: 8vmin;
  font-family: Rubik, sans-serif;
  width: 75vmin;
  text-transform: uppercase;
  &:hover .word {
    opacity: 0.25;
    @root {
      @keyframes wobble {
        0%,
        100% {
          transform: translateY(0) rotate(0);
        }
        25%,
        75% {
          transform: translateY(-5px) rotate(5deg);
        }
        50% {
          transform: translateY(5px) rotate(-5deg);
        }
      }
    }

    &:hover {
      opacity: 1;

      .letter {
        &::before {
          // background-color: green;
          animation: wobble 0.3s infinite;
        }
      }

      @for $i from 1 through 10 {
        .letter:nth-child(#{$i}) {
          --x: #{random(50) - 25};
          --y: #{random(50) - 25};
          --r: #{random(50) - 25};
          &:hover {
            z-index: 2;
            text-shadow: 2px 2px 10px rgba(0,0,0);
            --x: #{random(20) - 10};
            --y: #{random(20) - 10};
            --r: #{random(20) - 10};
            --s: 1.25;
          }
        }
      }
    }
  }
}