Эффект
зумирования

Уроки по Тильде
В этом видео я расскажу, как можно создать эффект с перелистыванием изображений и зумированием их
Описание
Материал из видео
В Zero-блоке создаём 2 шейпа. Один будет тригером для эффекта, другой самим изображением. Во второй загружаем своё изображение и отключаем у него lazyload
Шаг 1
На тригер вешаем класс repetition-trigger-1 и убираем цвет заливки
Шаг 2
На шейп с изображением вешаем класс repetition_1
Шаг 3
Ниже добавляем блок T123 и помещаем в него код
Шаг 4

<script>
    // Вешаем атрибуты на контейнеры
    $('.repetition_1 .tn-atom').attr('id','img_out_1');
    
    // 1 изображение
    $('<div class="img_1"></div>').appendTo('.repetition_1');
    $('<div class="img_2"></div>').appendTo('.repetition_1');
    $('<div class="img_3"></div>').appendTo('.repetition_1');
    $('<div class="img_4"></div>').appendTo('.repetition_1');
    $('<div class="img_5"></div>').appendTo('.repetition_1');
    
    // Вешаем атрибуты на изображения
    $('.img_1, .img_2, .img_3, .img_4, .img_5').attr('id','img_wrapper_1');
</script>

<style>
    /*Свойства для изображений из контейнеров*/
    .img_1, .img_2, .img_3, .img_4, .img_5 {
        border-radius: 1000px;
        width: 100%;
        height: 100%;
        display: block;
        left: 0;
        position: absolute;
        background-size: cover !important;
        display: block;
        background-position: center;
    }
</style>

<script>
(function() {
    // Дублируем фоновое изображение из контейнера в 1 группу блоков
var repetition_1 = document.querySelectorAll("#img_wrapper_1");
    $(repetition_1).css('backgroundImage',$('#img_out_1').css('backgroundImage'));
})();

</script>

<script>
// Добавляем тригер на анимацию к 1 контейнеру
$("body").on("mouseover mouseout", '.repetition-trigger-1', function(){
$('.img_1').toggleClass("img_1_animation");
$('.img_2').toggleClass("img_2_animation");
$('.img_3').toggleClass("img_3_animation");
$('.img_4').toggleClass("img_4_animation");
$('.img_5').toggleClass("img_5_animation");

// Анимация основного 1 контейнера
$('#img_out_1').toggleClass("block_2_animation");
});
</script>


<style>
    /*Анимация основных контейнеров*/
    .repetition_1 .tn-atom {
        background-size: 100%;
        transform: scale(1.7);
        transition-duration: 1.2s;
        transition-timing-function: cubic-bezier(0.910, 0.040, 0.260, 0.985); 
    }
    
    /*Анимация основных контейнеров*/
    .block_2_animation {
        transform: scale(1) !important;
        transition-duration:1.2s;
        transition-timing-function: cubic-bezier(0.910, 0.040, 0.260, 0.985); 
    }
    
    /*Анимация 1 изображения в контейнере*/
    .img_1 {
        transition-timing-function: cubic-bezier(0.910, 0.040, 0.260, 0.985); 
        transform: scale(1);
        transition-duration:0.4s;
    }
    /*Анимация 1 изображения в контейнере*/
    .img_1_animation {
        transition-timing-function: cubic-bezier(0.910, 0.040, 0.260, 0.985); 
        transform: scale(0);
        transition-duration: 1.2s;
    }
    /*Анимация 2 изображения в контейнере*/
    .img_2 {
        transition-timing-function: cubic-bezier(0.910, 0.040, 0.260, 0.985); 
        transform: scale(1);
        transition-duration: 0.6s;
    }
    /*Анимация 2 изображения в контейнере*/
    .img_2_animation {
        transition-timing-function: cubic-bezier(0.910, 0.040, 0.260, 0.985); 
        transform: scale(0);
        transition-duration: 1s;
    }
    /*Анимация 3 изображения в контейнере*/
    .img_3 {
        transition-timing-function: cubic-bezier(0.910, 0.040, 0.260, 0.985);
        transform: scale(1);
        transition-duration: 0.8s;
    }
    /*Анимация 3 изображения в контейнере*/
    .img_3_animation {
        transform: scale(0);
        transition-timing-function: cubic-bezier(0.910, 0.040, 0.260, 0.985); 
        transition-duration: 0.8s;
    }
    /*Анимация 4 изображения в контейнере*/
    .img_4 {
        transition-timing-function: cubic-bezier(0.910, 0.040, 0.260, 0.985); 
        transform: scale(1);
        transition-duration: 1s;
    }
    /*Анимация 4 изображения в контейнере*/
    .img_4_animation {
        transform: scale(0);
        transition-timing-function: cubic-bezier(0.910, 0.040, 0.260, 0.985); 
        transition-duration: 0.6s;
    }
    /*Анимация 5 изображения в контейнере*/
    .img_5 {
        transform: scale(1);
        transition-duration: 1.2s;
        transition-timing-function: cubic-bezier(0.910, 0.040, 0.260, 0.985); 
    }
    /*Анимация 5 изображения в контейнере*/
    .img_5_animation {
        transform: scale(0);
        transition-timing-function: cubic-bezier(0.910, 0.040, 0.260, 0.985); 
        transition-duration: 0.4s;
    }
    
    /*Основные свойства для контейнеров*/
    .repetition_1 {
        overflow: hidden;
        border-radius: 1000px;
    }
</style>
Не получилось подключить?
Не беда, ты всегда можешь написать мне в Telegram и запросить исходник
Другие уроки
Анимация смены фона
Уроки по Тильде
Анимация и фиксация шапки
Уроки по Тильде
Фоновое видео
Уроки по Тильде
Открой неограниченный доступ к библиотеке
Техническая поддержка в течение 12 часов
Платный доступ
Доступ к базовым и уникальным модификациям
Доступ к базовым и углубленым занятиям
2 уникальные модификации в неделю
350 руб. / в месяц
После оплаты подписки ты получишь доступ не только к этой модификации, но и ко всему платному контенту на платформе