Drag scroll или панорамы и необычные слайдеры в Zero-блоке

Обычно, чтобы сделать двигающийся артборд в Zero-блоке, нужно просто выставить в настройках overflow: auto. но тогда добавляется полоса прокрутки, а перетаскивание на компьютере не работает.

И, если вам нужно именно перетаскивание, которое сработает как на десктопе, так и на мобильных устройствах, воспользуйтесь скриптом.

Всё, что вам нужно сделать — это Zero-блок, объекты которого вылезают за края артборда.

Пример слишком большой картинки, которая не влезает в артборд Zero-блока

После этого впишите ID вашего Zero-блока сюда и скопируйте получившийся код. Если необходимо применить эффект к нескольким блокам, напишите ID этих блоков через запятую, например так: #rec11111, #rec22222, #rec33333.

<!-- Drag scroll или панорамы и необычные слайдеры в Zero-блоке | https://necodim.ru/tilda/drag -->

<script src="https://cdn.jsdelivr.net/npm/jquery.kinetic/jquery.kinetic.js"></script>
<script>
$('#rec123456789').find($('.t396__artboard')).on('artBoardRendered', function() {
    $(this).kinetic({
        cursor: 'grab',
        x: true,
        y: true,
        filterTarget: function(target, e) {
            if (!/down|start/.test(e.type)) {
                return !(/area|a|input/i.test(target.tagName) || target.parentNode.classList.contains('js-sbs-anim-trigger_click') || target.parentNode.classList.contains('js-sbs-anim-trigger_hover'));
            }
        }
    });
});
</script>

Скопировать код

Пример работы модификации

Перетащи текст (влево-вправо) или изображение (в любом направлении). Работает и в мобильных браузерах…

Очень длинный текст, который не влезает в артборд Zero-блока, зато его можно перетаскивать – просто зажмите и подвиньте

Изображение с отступами

Для подобного эффекта создайте прозрачный шейп, больший по размеру, чем само изображение, и поместите его на нижний слой.