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

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

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

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

Похожие вопросы
Вакансии с Хабр Карьеры
JavaScript FullStack разработчик
Rocket • Смоленск
от 80 000 до 130 000 ₽
Fullstack разработчик JavaScript, php
Дорстрой-36 • Воронеж
от 100 000 до 200 000 ₽
JavaScript FullStack developer
Wanted. • Санкт-Петербург
До 220 000 ₽
Ещё вакансии
Заказы с Хабр Фриланса
Обработать фото в стиле ASCII
22 нояб. 2024, в 08:04
1 руб./за проект
Сверстать десктоп версию сайта в tailwind
22 нояб. 2024, в 06:06
1500 руб./в час
Создать TG бота
22 нояб. 2024, в 06:04
1 руб./за проект
Ещё заказы