I use cookies to provide the best site experience.
Power Tools
Design creates culture. Culture shapes values. Values determine the future.
Learn more
Painting Tools
Electrical Tools
Decoration and design
Как это сделано
Автослайдер по скроллу

<style>
    #rec565061772  {           /*ID 2-го блока*/
       position: sticky;
       position: -webkit-sticky;
       z-index: 999;
       top: 0px;
    }
    
   #rec565384999 {             /*ID 1-го блока*/
       height: 1px!important;
       opacity: 0;
   }

   .t-records {
       overflow-x: unset !important;
   }
   
   .my_slide {
       transition: all .3s;
       opacity: 0;
   }
   .my_opacity {
       opacity: 1 !important;
   }
</style>

<script>
   $('.text_1').addClass('my_slide');
   $('.text_2').addClass('my_slide');
   $('.text_3').addClass('my_slide');
   $('.text_4').addClass('my_slide');
   
   $('.img_1').addClass('my_slide');
   $('.img_2').addClass('my_slide');
   $('.img_3').addClass('my_slide');
   $('.img_4').addClass('my_slide');
   
   $('.text_1').addClass('my_opacity');
   $('.img_1').addClass('my_opacity');
   
   

    $(function stickyBlock() {
        $(window).on('scroll', function () {
            let posScroll = window.pageYOffset;
            amount            = 4; // Количество переменных (текстов)
            let stickyBlock   = '#rec565061772', // ID 2-го блока
            startBlock        = '#rec565384999', // ID 1-го блока (пустого)
            stopBlock         = '#rec565185399', // ID 4-го блока (который должен идти после слайдера)
            wrapBlock         = '#rec565121985', // ID 3-го блока (пустого)
            scrollTop         = $(window).scrollTop(), elementOffset;
            startPosition     = $(startBlock).position().top;
            stopPosition      = $(stopBlock).position().top;
            wrapWidth = amount*800;
            $(wrapBlock).css('height', wrapWidth);
            
            
            if ($(stopBlock).length > 0) {
                elementOffset = $(stopBlock).offset().top
            }
            let distance      = (elementOffset - scrollTop),
            height            = $(stickyBlock).height(),
            slide             = ( height - distance);

            let counter = posScroll - startPosition;
            if (counter <= 800) {
                if ($('.text_1').hasClass('my_opacity') == false) {
                    $('.my_slide').removeClass('my_opacity');
                    $('.text_1').addClass('my_opacity');
                    $('.img_1').addClass('my_opacity');
                };
            };
            
            if ((counter > 800) && (counter <= 1600)) {
                if ($('.text_2').hasClass('my_opacity') == false) {
                    $('.my_slide').removeClass('my_opacity');
                    $('.text_2').addClass('my_opacity');
                    $('.img_2').addClass('my_opacity');
                };
            };
            
            if ((counter > 1600) && (counter <= 2400)) {
                if ($('.text_3').hasClass('my_opacity') == false) {
                    $('.my_slide').removeClass('my_opacity');
                    $('.text_3').addClass('my_opacity');
                    $('.img_3').addClass('my_opacity');
                };
            };
            
            if (counter > 2400) {
                if ($('.text_4').hasClass('my_opacity') == false) {
                    $('.my_slide').removeClass('my_opacity');
                    $('.text_4').addClass('my_opacity');
                    $('.img_4').addClass('my_opacity');
                };
            };


            if (distance <=  height) {
                $(stickyBlock).css('transform','translateY(-' + slide + 'px)')
            } else {
                $(stickyBlock).css('transform','translateY(0)')
            };
        });
    })
</script>
  • Необходимо создать три zero-блока в следующем порядке:
    1. Пустой zero-блок — 1-й блок. Он автоматически будет изменён при помощи кода, поэтому редактировать его не надо.
    2. Основной zero-блок с информацией для слайдера — 2-й блок.
    3. Пустой zero-блок — 3-й блок. Его не будет видно на странице.
    Все перечисленные блоки должны иметь одинаковую высоту.
  • Подробнее про основной — 2-й блок:
    Необходимо создать 4 текста и 4 изображения, каждому по порядку присвоить свой класс через «правой кнопкой по тексту → Add CSS Class Name → ввести имя класса». Для текста это «text1», «text2» и т. п. Для картинок — «img1», «img2» и т. п.
    Все объекты слайдера размещаются послойно друг на друга. Чтобы смена элементов выглядела красиво и не дёргалась, необходимо выровнять все элементы в разных слоях.
  • Вставьте код в блок Т123, внимательно замените ID блоков на свои.
    4-й блок — это следующий блок с контентом на странице после всех блоков, относящихся к слайдеру.
  • Надеюсь вам пригодится такой слайдер в ваших проектах.
    Напоминаю, что не осуществляю техническую поддержку и доработку бесплатных материалов — это для тех, кто любит находить решения самостоятельно.
Жмакай на сердечко,
чтобы сказать «Спасибо!»