0

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

4
  • Это никак не HTML + CSS, тут нужно знать JS, чтобы такое сделать.
    – JZ_52
    17 июл 2022 в 19:35
  • Ну я ещё бонусом знаю next.js и ts. Поэтому можете смело рассказать как это сделать на js))
    – hardi
    17 июл 2022 в 19:38
  • Если бы Я знал, Я бы кинул решение, а так не знаю, так как JS ещё не знаю(((
    – JZ_52
    17 июл 2022 в 19:40
  • @JZ_52, js тут разве только для того что бы прелоадер запустить на какой-нибудь onload.
    – Ein
    17 июл 2022 в 21:02

1 ответ 1

0

Конкретно на приведённом сайте, просто вставлена 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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.