Меню

Анимация и фиксация шапки

Уроки по Тильде
В этом уроке я расскажу, как создать интересную анимацию с трансформацией логотипа и фиксацией его в шапке.
Описание
Материал к уроку
Добавляем стили в блок T123
Шаг 1
<style>
    #rec418274242 .t396__artboard {
        position: fixed;
        z-index: 998;
    }
    .fix {
        position: fixed !important;
        z-index: 999;
        top:0;
    }
</style>
Подключаем скрипт для срабатывания фиксации
Шаг 2
<script>
jQuery(function($) {

    var $nav = $('#rec418277683 .t396__artboard');
    var $win = $(window);
    var winH = $win.height(); 

    $win.on("scroll", function () {
        if ($(this).scrollTop() > winH ) {
            $nav.addClass("fix");
        } else {
            $nav.removeClass("fix");
        }
    }).on("resize", function(){ 
       winH = $(this).height(); 
    });

});
</script>
Другие уроки
Анимация текста
Уроки по Тильде
Кастомный прелоадер
Уроки по Тильде
Анимация при загрузке
Уроки по Тильде
Открой неограниченный доступ к библиотеке
Техническая поддержка в течение 12 часов
Платный доступ
Доступ к базовым и уникальным модификациям
Доступ к базовым и углубленым занятиям
2 уникальные модификации в неделю
350 руб. / в месяц
После оплаты подписки ты получишь доступ не только к этой модификации, но и ко всему платному контенту на платформе
Made on
Tilda