Blank page

Горизонтальный скролл со стрелками

<script src="https://unpkg.com/scrollbooster@3/dist/scrollbooster.min.js" defer></script>

<script>
$(function() {

// Укажи ID Zero блока cо скроллом и включи overflow: autovar blockScrollId = '#rec271515644';

// Укажи ID Zero блока cо стрелками и добавь каждой класс arrow-left или arrow-rightvar blockArrowsId = '#rec271519673';

var shiftSize;
$(window).on('load resize', function(){

if (window.matchMedia('(max-width: 480px)').matches) {
// Укажи величину сдвига при клике на стрелку для разрешения 320-480px
shiftSize = '320px';
}
else if (window.matchMedia('(max-width: 640px)').matches) {
// Укажи величину сдвига при клике на стрелку для разрешения 481-640px
shiftSize = '320px';
}
else if (window.matchMedia('(max-width: 960px)').matches) {
// Укажи величину сдвига при клике на стрелку для разрешения 641-960px
shiftSize = '320px';
}
else if (window.matchMedia('(max-width: 1200px)').matches) {
// Укажи величину сдвига при клике на стрелку для разрешения 961-1200px
shiftSize = '320px';
}
else {
// Укажи величину сдвига при клике на стрелку для разрешения больше 1200px
shiftSize = '320px';
}

});

$(blockScrollId + ' .t396__artboard').addClass('scrollbooster-viewport').wrapInner('<div class="scrollbooster-content"></div>');
$(blockScrollId + ' .t396').css('overflow','hidden');

new ScrollBooster({
viewport: $(blockScrollId + ' .scrollbooster-viewport')[0],
content: $(blockScrollId + ' .scrollbooster-content')[0],
scrollMode: 'native',
pointerMode: 'mouse',
bounce: false,
onPointerDown: function() { $(blockScrollId + ' *:focus').blur() }
});

$(blockArrowsId + ' .arrow-left').on('click', function(e) {
e.preventDefault();
$(blockScrollId + ' .t396__artboard').animate( { scrollLeft: '-=' + shiftSize }, 300);
});

$(blockArrowsId + ' .arrow-right').on('click', function(e) {
e.preventDefault();
$(blockScrollId + ' .t396__artboard').animate( { scrollLeft: '+=' + shiftSize }, 300);
});

});
</script>

<style>
.scrollbooster-viewport {
cursor: -webkit-grab;
cursor: grab;
padding-bottom: 30px;
margin-bottom: -30px;
}
.scrollbooster-viewport:active {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.scrollbooster-content {
position: absolute;
width: 100%;
height: 100%;
}
.arrow-left,
.arrow-right {
cursor: pointer;
}
</style>

Горизонтальный скролл с удержанием

<script src="https://unpkg.com/scrollbooster@3/dist/scrollbooster.min.js" defer></script>

<script>
$(function() {

// Укажи ID Zero блока и включи overflow: auto
const blockId = '#rec236105419';

$(blockId + ' .t396__artboard').addClass('scrollbooster-viewport').wrapInner('<div class="scrollbooster-content"></div>');
$(blockId + ' .t396').css('overflow','hidden');

new ScrollBooster({
viewport: $(blockId + ' .scrollbooster-viewport')[0],
content: $(blockId + ' .scrollbooster-content')[0],
scrollMode: 'native',
pointerMode: 'mouse',
bounce: false,
onPointerDown: function() { $(blockId + ' *:focus').blur() }
});

});
</script>

<style>
.scrollbooster-viewport {
cursor: -webkit-grab;
cursor: grab;
padding-bottom: 30px;
margin-bottom: -30px;
}
.scrollbooster-viewport:active {
cursor: -webkit-grabbing;
cursor: grabbing;
}
.scrollbooster-content {
position: absolute;
width: 100%;
height: 100%;
}
</style>

Скролл элементов iframe внутри zeroblock

Сслыка на элемент скролла = #

Код для iframe (vimeo)

<a href="#">
<iframe src="https://player.vimeo.com/video/759144605?h=2a59e2addf&autoplay=1&muted=1&loop=1&title=0&byline=0&portrait=0&playsinline=1" width="569" height="320" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</a>

Код для 123

<style>
.phPar {
overflow: hidden;
}
.active{opacity:1;}

.middleL{
overflow: hidden;
}

.phChl, .linkH{
transition: all 0.4s ease-in-out;
}
.linkH.actBtn {
border-bottom: 3px solid #fff !important;
}
.mvDown{
-webkit-transform: translateY(120%);
-ms-transform: translateY(120%);
transform: translateY(120%);
opacity:0;
}
.mvUp{
-webkit-transform: translateY(-120%);
-ms-transform: translateY(-120%)
transform: translateY(-120%);
opacity:0;
}
</style>

<script>
$(document).ready(function(){
var IDZero = "#rec570958313";
$(IDZero+' div[data-elem-type="html"] a').parent().addClass('phPar');
$(IDZero+' div[data-elem-type="html"] a>iframe').addClass('phChl');
$(IDZero+' div[data-elem-type="text"] a').addClass('linkH');
$('.linkH').click(function(event){event.preventDefault()});
$('.phPar a').addClass('middleL');
$('.linkH:first').addClass('actBtn');$('.phChl').not(':first').addClass('mvUp');
$('.phChl:first').addClass('active');
$('.linkH').hover(function(){if(!$(this).hasClass('actBtn')){
$('.linkH').removeClass('actBtn');$(this).addClass('actBtn');
linkH = $(".linkH").index(this);$('.mvUp').removeClass('mvDown');
$('.active').addClass('mvDown');$('.phChl:eq('+linkH+')').removeClass('mvUp').addClass('active');
$('.mvDown').removeClass('active');setTimeout(function(){$('.mvDown').addClass('mvUp'); }, 400);
setTimeout(function(){if(!$('.phChl').hasClass('active')){
$('.phChl:eq('+linkH+')').removeClass('mvUp mvDown').addClass('active');}; },600); }; },function(){});
});
</script>

Кастомные табы

Создайте кнопки и присвойте каждой класс .tab-btn
Вставьте ссылки в каждую кнопку #tab1, #tab2, #tab3 и так далее
Создайте свои zero-блок и присвойте им классы .uc-tab1, .uc-tab2, .uc-tab3 и тд.
Вставьте код на страницу в блок "Другое" - Т123
Измените цвет активной вкладки на свой

Код для 123




<style>

.my-active-class {

background-color: #
}
</style>

<script>

// Скрыть все вкладки, кроме первой
$('[class*="uc-tab"]').not('.uc-tab1').fadeOut(0);

// Добавить класс "bactive" для первой вкладки
$('[href="#tab1"]').addClass('my-active-class');

// Обработчик события для клика по кнопкам вкладок
$('.tab-btn a').click(function() {
// Убрать класс "bactive" у всех кнопок
$('.tab-btn a').removeClass('my-active-class');

// Добавить класс "my-active-class" к кнопке, по которой кликнули
$(this).addClass('my-active-class');

// Получить идентификатор вкладки из атрибута href кнопки
var slide = $(this).attr('href').slice(1);

// Скрыть все вкладки
$('[class*="uc-tab"]').fadeOut(0);

// Показать вкладку с идентификатором, соответствующим кнопке
$('.uc-' + slide + '').fadeIn(0);
t_lazyload_update();

});

</script>

Кастомный попап

1. Создали ZeroBlock
2. Создали popUp блок BF503 c шириной 100%
3. Создали кнопку со ссылкой, которая начинается с #popupzero
Например #popupzero-mywindow

4. Вставили код в блок Другое - Т123

Код для 123

</script>

Кастомный раскрывающийся список $(document).ready(function() { $('.uc-content').hide(); $('.uc-accordion').click(function() { $(this).toggleClass('active'); $(this).next('.uc-content').slideToggle(); }); }); .uc-accordion:hover{ cursor: pointer; }