Горизонтальный скролл блоков при скролле вниз

Меняем направление скролла у блоков
Пример работы скрипта
OUR COMPANY
Bring Your Ideas to Life
Everything that you dreamed of can be brought to life exactly at the moment when you decide to win.
WONDERS
We organize dream holidays to breathtaking places all over the world. Choose one of our special destinations or suggest yours
Open your mind to new experiences
Getting things done is a process. It demands accountability and clear goals. Following through is the most valuable asset to any organization. Successful teams ask questions, evaluate the reality, and navigate toward specific solutions.
#rec409535626,.uc-docs
#rec409542612,.uc-scripts
Инструкция
  • 1
    Добавьте на страницу блоки, которые вы хотите скроллить, и добавьте всем им класс uc-rightscroll
    Блоки должны располагаться подряд, а также иметь высоту 100vh. Скрипт будет работать также с Zero-блоками
  • 2
    Скопируйте стиль на страницу в HTML-блок (или в общие стили сайта в настройках) и пропишите в стилях ссылки на свои иконки, в соответствующих строках
    Чтобы получить ссылку на иконку — залейте ее в любой блок Тильды, правой кнопкой скопируйте ссылку на изображение, и скройте этот блок
  • 3
    Опубликуйте страницу
    Наслаждайтесь результатом!
Скрипт
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/ScrollMagic.min.js" integrity="sha512-8E3KZoPoZCD+1dgfqhPbejQBnQfBXe8FuwL4z/c8sTrgeDMFEnoyTlH3obB4/fV+6Sg0a0XF+L/6xS4Xx1fUEg==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js" integrity="sha512-gmwBmiTVER57N3jYS3LinA9eb8aHrJua5iQD7yqYCKa5x6Jjc7VDVaEA0je0Lu0bP9j7tEjV3+1qUm6loO99Kw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.8/plugins/animation.gsap.min.js" integrity="sha512-5/OHwmQzDSBS0Ous4/hlYoWLHd06/d2r7LdKZQVBXOA6PvOqWVXtdboiLTU7lQTGyVoKVTNkwi0ol4gHGlw5ww==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script>
    initMagicScroll();
    function initMagicScroll() {
        const groups = [];
        $('.uc-rightscroll, .uc-leftscroll').each(function() {
            if ($(this).prev().hasClass('uc-rightscroll') && $(this).hasClass('uc-rightscroll')) {
                groups[groups.length - 1].$els = groups.at(-1).$els.add($(this));
                return;
            }

             if ($(this).prev().hasClass('uc-leftscroll') && $(this).hasClass('uc-leftscroll')) {
                groups[groups.length - 1].$els = groups.at(-1).$els.add($(this));
                return;
            }
    
            groups.push({
                $els: $(this),
                options: {
                    dir: $(this).hasClass('uc-leftscroll') ? 'left' : 'right'
                }
            });
        });
    
        const map = {};
        for (let group of groups) {
            const id = 'uc' + Date.now();
            map[id] = group;
            const extraStyle = group.options.dir === 'right' ? `left: -${group.$els.length - 1}00vw; flex-direction: row-reverse;` : '';
            group
                .$els
                .css({
                    flex: '0 0 100vw',
                })
                .wrapAll(`<div id="pin-${id}" style="overflow: hidden; width: 100vw; height: 100vh;"><div id="${id}" style="display: flex; width: ${group.$els.length}00vw; height: 100%; position: relative; ${extraStyle}"></div></div>`);
        }
    
        const controller = new ScrollMagic.Controller();
    
        for (let id in map) {
            const delta = 100 - 100 / map[id].$els.length;
            const sign = (map[id].options.dir === 'left') ? '-' : '';
            const animation = new TimelineMax().to(`#${id}`, 1, {x: `${sign}${delta}%`, ease: Linear.easeNone});

            new ScrollMagic.Scene({
                triggerElement: `#pin-${id}`,
                triggerHook: "onLeave",
                duration: `${map[id].$els.length}00%`
            })
            .setPin(`#pin-${id}`)
            .setTween(animation)
            .addTo(controller);    
        }    
    }
</script>
Вопросы и комментарии
Made on
Tilda