Simple text sliding animation for website?-CodePudding

So I have been practicing web development for the last couple of months, and I want to try adding some flare to a portfolio site. I have a header with my name, and I want to animate the 'b e n' and the 'u s t e d' coming out from the L (or the '|' in this case). Should I do this through code, or is there a norm for this kind of task?

Logo that I want to animate

CodePudding user response：

One way of doing this is to put the name into a 3 column grid so that the 'l' stays in the same place as the other items are animating.

As you want a smooth reveal rather than a typewriter effect it's not necessary to animate each character individually.

This snippet puts them into another element and animates that. The left hand one goes from right to left and the right hand one from left to right by increasing the width from 0.

Note: this snippet cheats in a way as it uses a monospace font. For a variable font then you can use the same technique but need to make some decisions about how much space to allow each column.

* {
  padding: 0;
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: 3ch 1ch 5ch;
  font-family: monospace;
  font-size: 4em;
  grid-gap: 0;
}

.reverse {
  text-align: right;
}

.reverse span {
  --w: 3ch;
  right: 0;
}

.forwards span {
  --w: 5ch;
  left: 0;
}

span {
  animation-name: appear;
  animation-duration: 10s;
  animation-iteration-count: 1;
  display: inline-block;
  animation-fill-mode: forwards;
  width: 0;
  opacity: 0;
  overflow: hidden;
  position: relative;
}

@keyframes appear {
  0% {
    width: 0;
    opacity: 1;
  }
  100% {
    width: var(--w);
    opacity: 1;
  }
}

<div class="container">
  <div class="reverse">
    <span>ben</span>
  </div>
  <div class="l">L</div>
  <div class="forwards">
    <span>usted</span>
  </div>
<div>

CodePudding user response：

You could probably do it as an animated SVG but pure css works too. See snippet.

<html>

<head>
  <style>
    body {
      font-weight: 700;
      background-color: black;
      color: white;
      font-family: sans-serif;
    }

    .name {
      font-size: 65px;
      white-space: nowrap;
      text-align: center;
      max-width: 350px;
      overflow: hidden;
      border-right: 9px solid white;
    }

    .typewriter {
      animation: type 2s steps(15) 1s 1 normal both,
        blink 400ms steps(35) 8 normal both;
    }

    @keyframes blink {
      from {
        border-right-color: white;
      }

      to {
        border-right-color: transparent;
      }
    }

    @keyframes type {
      0% {
        width: 0;
      }

      100% {
        width: 100%;
      }
    }
  </style>
</head>

<body>

  <div class="name typewriter">Ben Usted</div>

</body>

</html>

If I was looking for something very graphical I would probably build it in Adobe Animate or After Effects and then convert to animated GIF. But would take more time obviously.