Как сделать такую анимацию при загрузке?

Question

https://labs.pepsico.com/ Как сделать такую анимацию при загрузке? Как реализовать такое увеличение букв?

Answer 1

Конкретно на приведённом сайте, просто вставлена svg. Но это слишком скучно, поэтому вот вариант на mix-blend-mode

.loader {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  
    display: flex;
    justify-content: center;
    align-items: center;

    white-space: nowrap;
    overflow: hidden;
  
    /* для анимации текста */
    font-size: 15vh;
    transition-duration: .5s;
    animation: 3s infinite alternate slidein 1s;
  
    /* суть в этих свойствах */
    background: white;
    mix-blend-mode: lighten;
}

@keyframes slidein {
  0% {
    font-size: 15vh;
    opacity: 1;
  }
  
  70% {
    opacity: 1;
  }

  100% {
    font-size: 100vh;
    opacity: 0;
  }
}

.content {
  width: 100vw;
  height: 100vh;
  background-image: url("https://picsum.photos/seed/pepsi/0")
}

<div class="content"></div>


<div class="loader">
  some text
</div>

БЛОГ НА HUSL

Как сделать такую анимацию при загрузке?

Ответы (1 шт):