Slim-N-Go |
Студия аппартной коррекции фигуры в Москве
Animate bg
Создали цветные шейпы в Zero-block. Добавили ему класс ".trigger-1 и т.д.".
сверху разместили прозрачные шейпы с обводкой, дали им класс ".btn-1 и т.д."
Вставляем код в блок t123. прописали адреса картинкок в массиве.
<style>
    [class*=trigger]:not(.bg) {
        z-index: 3!important;
    }
    [class*=trigger].bg {
         z-index: 2!important;
    }
    [class*=trigger] .tn-atom, [class*=btn-] .tn-atom {
        user-select: none;
    }
    .bg .tn-atom{
        transform: scale(100);
        transition: all 2s ease;
    }
</style>
<script>
    $(function(){
        let num;
        let num_pic;
        let num_bg;
        let pic_el = $('.pic .tn-atom')
        let pic = ['https://static.tildacdn.com/tild6132-6665-4131-b734-346130303237/0004_1.png',
                    'https://static.tildacdn.com/tild3533-6136-4163-b932-623566336265/0010_1.png',
                    'https://static.tildacdn.com/tild3333-3132-4166-b865-316135353764/_2_1.png',
                    'https://static.tildacdn.com/tild3836-6338-4263-a330-353566663732/-3_1.png',
                    'https://static.tildacdn.com/tild3730-6166-4837-a633-366239643239/Boba_x_Ice_Cream_Str.png',
                    'https://static.tildacdn.com/tild6363-3336-4662-a134-376563623336/0005_1.png'
                    ]
        
        $('[class*=btn-]').click(function() {
            let elementClass = $(this).attr('class');
            let match = elementClass.match(/btn-(\d+)/);
            let numberAfterDash = match[1];
            num = numberAfterDash;
            num_pic = parseInt(num - 1);
            num_bg = pic[num_pic];
            console.log(num_bg)
            $(`[class*=trigger-${num}]`).click()
        });

        $('[class*=trigger]').click(function(){
            let clickedElement = $(this);
            let color = clickedElement.find('.tn-atom').css('background-color');
            let bgc = clickedElement.closest('.t396__artboard');
            
            clickedElement.addClass('bg');
            setTimeout(function(){
                    bgc.css('background-color',`${color}`);
                    clickedElement.removeClass('bg');
            }, 1000);
            setTimeout(function(){
                pic_el.css('data-original',`${num_bg}`);
                pic_el.css('background-image',`url(${num_bg})`);
            }, 250);
            
        });
    });
</script>
Made on
Tilda