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

Уроки по Тильде

В этом уроке я расскажу, как создать плавную смену фона между блоками на Тильде. Мы разберем 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>

Другие уроки

Анимация текста

Уроки по Тильде

Кастомный прелоадер

Уроки по Тильде

Анимация при загрузке

Уроки по Тильде