Задать вопрос
@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:
  • Вопрос задан
  • 183 просмотра
4 комментария
Подписаться 1 Простой 4 комментария
Пригласить эксперта
Ответы на вопрос 1
@iminby
@keyframes , а причем тут это)

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

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

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
JavaScript Fullstack
OnClass
от 2 000 до 7 000 $
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Разработать телеграм бота с реферальной системой, Юкассой и ChatGPT
23 дек. 2024, в 02:13
20000 руб./за проект
Собрать из исходного кода и запустить в докере рабочее приложение с бд
22 дек. 2024, в 22:57
500 руб./за проект
Аппликация для фильтра заказов
22 дек. 2024, в 20:40
10000 руб./за проект
Ещё заказы