https://labs.pepsico.com/ Как сделать такую анимацию при загрузке? Как реализовать такое увеличение букв?
-
Это никак не HTML + CSS, тут нужно знать JS, чтобы такое сделать.– JZ_5217 июл 2022 в 19:35
-
Ну я ещё бонусом знаю next.js и ts. Поэтому можете смело рассказать как это сделать на js))– hardi17 июл 2022 в 19:38
-
Если бы Я знал, Я бы кинул решение, а так не знаю, так как JS ещё не знаю(((– JZ_5217 июл 2022 в 19:40
-
@JZ_52, js тут разве только для того что бы прелоадер запустить на какой-нибудь onload.– Ein17 июл 2022 в 21:02
Добавить комментарий
|
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>