Меню

Анимация
смены фона

Уроки по Тильде
В этом уроке я расскажу, как создать плавную смену фона между блоками на Тильде. Мы разберем 3 анимации по шагам и подключим все необходимое, для работы такого перехода.
Описание
Материал к уроку
Добавляем стили в блок T123
Шаг 1
<style>
    .lines {
        overflow: hidden;
    }
    .content {
        mix-blend-mode: exclusion;
    }
</style>
Подключаем скрипт для плавного скролла
Шаг 2
<script src="https://cdnjs.cloudflare.com/ajax/libs/smoothscroll/1.4.10/SmoothScroll.min.js" integrity="sha256-huW7yWl7tNfP7lGk46XE+Sp0nCotjzYodhVKlwaNeco=" crossorigin="anonymous"></script>
<script>
SmoothScroll({
    // Время скролла 400 = 0.4 секунды
    animationTime    : 800,
    // Размер шага в пикселях 
    stepSize         : 75,

    // Дополнительные настройки:
    
    // Ускорение 
    accelerationDelta : 30,  
    // Максимальное ускорение
    accelerationMax   : 2,   

    // Поддержка клавиатуры
    keyboardSupport   : true,  
    // Шаг скролла стрелками на клавиатуре в пикселях
    arrowScroll       : 50,

    // Pulse (less tweakable)
    // ratio of "tail" to "acceleration"
    pulseAlgorithm   : true,
    pulseScale       : 4,
    pulseNormalize   : 1,

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