Задать вопрос
@dgallyamshin
javascript

Как сделать анимацию увеличения хедера при скролле?

Мой хедер занимает position: sticky. Я хочу, чтобы он при скролле страницы, не просто прилипал к странице, а увеличивался. Я хочу создать анимацию для прилипания к странице.

html:
<html>
    <head>
    </head>
    <body>
        <header></header>
    </body>
</html>


css:
header {
    position: sticky;
    top: 0;
    animation: none;
}


.anima-scale {
    animation: 4s linear 0s infinite alternate menu;
}


@keyframes menu {
    0% { transform: none; }   
    100% { transform: scale(1.2); }
   }


js:
  • Вопрос задан
  • 159 просмотров
4 комментария
Подписаться 1 Простой 4 комментария
Пригласить эксперта
Ответы на вопрос 1
@iminby
@keyframes , а причем тут это)

Просто задай для блок transition и задай размеры больше или , как именно ты его увеличиваешь на стиль , который у тебя цепляется при скроле.
и он просто плавно увеличится.

Грубо говоря, изначально header height 50px
когда он получает sticky свойство, height становится 100px
И чтобы это прошло плавно, просто добавить надо свойство transition
Ответ написан
Комментировать
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript разработчик
SummerWeb • Ярославль
от 100 000 до 140 000 ₽
JavaScript разработчик
вАйТи
от 5 000 до 25 000 ₽
JavaScript Fullstack
OnClass
от 200 000 до 600 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Спарсить TON PLACE: скрейпинг фото и текста с анкет по списку URL
25 апр. 2024, в 05:57
3000 руб./за проект
Правки в webApp готового и написанного телеграмм бота next, tailwind
25 апр. 2024, в 05:29
25000 руб./за проект
Фронтер - DevOps. Развернуть фронт на хостинге. Прокинуть в телегу-бот
25 апр. 2024, в 04:38
10000 руб./за проект
Ещё заказы