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-й блок — это следующий блок с контентом на странице после всех блоков, относящихся к слайдеру.
  • Надеюсь вам пригодится такой слайдер в ваших проектах.
    Напоминаю, что не осуществляю техническую поддержку и доработку бесплатных материалов — это для тех, кто любит находить решения самостоятельно.
Жмакай на сердечко,
чтобы сказать «Спасибо!»
Этот сайт использует файлы cookie, чтобы улучшить его работу, повысить эффективность и удобство. Продолжая использовать сайт marinadsgn.com, вы соглашаетесь на использование файлов cookie.
Понятно