Для Виктории (nikokarasek)

Инструкция

Курсор и шум

Изображениям в блоке с видео, поверх которых должен отображаться курсор — задай класс video-cursor. Блокам HTML с видео, которые добавлены в этом же блоке — задай класс video--hover.
Скопируй код 1 и вставь его в блок T123 на страницу. Положение блока с кодом на странице не имеет значения.
Если ты хочешь изменить изображение шума или уменьшить его прозрачность, то укажи нужные значения в полях формы.

! Если ты не планируешь менять изображение шума, то ничего не указывай в поле. Если уже что-то было указано и после стерто — обнови страницу.

4. После этого скопируй код 1 и вставь его в блок T123 на страницу.

Если не работает

Проверь, заданы ли все классы, правильно ли они скопированы или написаны.
Если ты меняла значения в полях — попробуй обновить эту страницу и скопировать код еще раз. Если после этого все заработало, то проверь, рабочая ли ссылка на изображение шума. Для этого скопируй адрес и открой в отдельной вкладке. Проверь формат изображения (это должен быть JPG или PNG).
Если после всего этого курсор и шум не работают — скинь мне ссылку на страницу.

<!-- Code by Fedyaeva -->
<style>
    .videoBackground, .videoPopup, #videoBackground, #videoPopup {height: 100%; display: flex;}
    .video--hover {display: flex;}
    .t223-col {position:relative;}
    .video-cursor .tn-atom, .noise-image .tn-atom {
        cursor:  url("https://static.tildacdn.com/tild6437-3733-4335-b238-333565616431/Group_486.svg") 60 60, auto;
    }
    /*Noise*/
    #videoPopup::after, .noise-video::after, .noise-image::after, .t223-col::after {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        background-image: url('https://static.tildacdn.com/tild3461-3165-4534-a465-333330613938/photo.jpg');
        background-size: 300px;
        background-repeat: repeat;
        mix-blend-mode: soft-light;
        opacity: 0;
        pointer-events: none;
        animation: noise 0.3s steps(1, start) infinite;
    }
    .noise--visible::after {
        opacity: 0.3;
        transition: opacity 0.1s;
    }
    /*Animation*/
    @keyframes noise {
        0%{background-position:50% 50%;}
        10%{background-position:62% 38%;}
        20%{background-position:35% 57%;}
        30%{background-position:40% 64%;}
        40%{background-position:68% 35%;}
        50%{background-position:51% 54%;}
        60%{background-position:40% 35%;}
        60%{background-position:36% 63%;}
        80%{background-position:52% 65%;}
        90%{background-position:38% 64%;}
        100%{background-position:51% 60%;}
    }
    /*Цвет попап*/
    .t-popup__container {
        background: #121212!important;
    }
    /*Перемотка*/
    .video-cursor, .video--hover {
        transition: transform 1s ease;
    }
</style>
<script>
    window.addEventListener('load', () => {
       let allVideo = document.querySelectorAll('#videoBackground, #videoPopup, .video-cursor, .noise-video, .noise-image, .t223-col');
       allVideo.forEach(e => e.classList.add('noise--visible'));
    });
</script>

Открытие видео в popup

Добавь на страницу блок T868 (HTML-код в попапе).
В настройках блока сделай нужную ширину окна. В контент вставь код для вставки видео. Ты можешь использовать тот же код, которым вставляешь видео на странице. Но нужно (конечно же) менять ссылку на видео и заменить ID внутри кода.

должно стать

3. Также в окне контента сделай свою ссылку для видео. Для удобства (чтобы нигде не запутаться) я писала номер видео в ссылке: #popup:video_1
4. Скопируй получившуюся ссылку и укажи ее соответствующему изображению в блоке с видео (прямо с решеткой).
5. Для каждого видео, которое открывается по клику нужно делать свой popup и проставлять ссылку.

Если не работает

Проверь, заменила ли ты ID в коде видео.
Проверь ссылку для открытия popup (в самом окне написаны правила, по которым нужно задавать ссылку).
Проверь ссылку на видео, отрыв его в отдельном окне.
Скопируй кусок кода для вставки видео из места, в котором оно работает. Если после этого все работает, то замени ссылку на нужное видео в этом куске кода.
Если после всех действий видео не открывается — скинь мне ссылку на страницу.

Параллакс

Скопируй код 2 и вставь в блок T123 в самый низ страницы. Это важно для работы скрипта.
Код будет работать для классов video-cursor и video--hover, которые ты дала объектам в блоке с видео для шума и курсора.

Если не работает

Скрипт отключен для Safari во избежание дерганий и проблем.
Если эффекта нет в остальных браузерах, то проверь консоль на наличие ошибок. Для этого нужно открыть код страницы (Ctrl + Shift + I. Как открыть в Safari — не подскажу) и посмотри ошибки.
Если понять причину не работы не получается — скинь мне ссылку на страницу.

<!-- Code by Fedyaeva -->
<script>if(window.matchMedia("(min-width: 960px)").matches){document.addEventListener('DOMContentLoaded',()=>{let isSafari=/^((?!chrome|android).)*safari/i.test(navigator.userAgent);const max=100;let checkScrollSpeed=(function(settings){settings=settings||{};var lastPos,newPos,timer,delta,delay=settings.delay||50;function clear(){lastPos=null;delta=0}
clear();return function(){newPos=window.scrollY;if(lastPos!=null){delta=newPos-lastPos}
lastPos=newPos;clearTimeout(timer);timer=setTimeout(clear,delay);return delta}})();function debounce(func,wait,immediate){let timeout;return function executedFunction(){const context=this;const args=arguments;const later=function(){timeout=null;if(!immediate)func.apply(context,args)};const callNow=immediate&&!timeout;clearTimeout(timeout);timeout=setTimeout(later,wait);if(callNow)func.apply(context,args)}};function setSkew(skew){let elem=document.querySelectorAll('.video-cursor, .video--hover').forEach((el)=>el.style.transform='translateY('+skew+'px)')}
const setBack=debounce(function(){let elem=document.querySelectorAll('.video-cursor, .video--hover').forEach((el)=>el.style.transform='translateY(0px)')},100);if(!isSafari){window.addEventListener("scroll",function(){let speed=checkScrollSpeed();if(speed>max)speed=max;if(speed<-max)speed=-max;setSkew(speed/2);setBack()})}});};</script>

Слайдер

Добавь на страницу блок TE200 (Ссылки на следующие материалы в 2 колонки).
Задай нужные настройки блока (фон, отступы блока).
Загрузи нужные изображения, удали описание под фотографией и ссылки.

! Для работы скрипта нужно загрузить не меньше 6 изображений. Я загружала дубликаты изображений, чтобы было не 3 разных изображений, а 2 пары по 3 разных изображений.
4. Вставь в поле ID блока с изображениями.
5. Скопируй код 3 и вставь в низ страницы.

Если не работает

Проверь консоль на наличие ошибок. Для этого нужно открыть код страницы (Ctrl + Shift + I. Как открыть в Safari — не подскажу) и посмотри ошибки.
если есть ошибки или, если их нет, а скрипт не работает — скинь мне ссылку на страницу.

<!-- Code by Fedyaeva -->
<link
rel="stylesheet"
href="https://unpkg.com/swiper@8/swiper-bundle.min.css"/><script src="https://unpkg.com/swiper@8/swiper-bundle.min.js"></script><style>.swiper-container{width:100%;height:100%;overflow:hidden}.swiper-wrapper{display:flex!important}.t692{position:relative}.swiper-wrapper{cursor:url("https://static.tildacdn.com/tild3462-3362-4136-a337-636532323937/ssddd.svg")60 60,none!important}
@media screen and (max-width: 960px) {.t692__col {min-width: 400px;}.t692 .t692__col {margin-bottom: 0!important;}}.t692__textwrapper{display: none;}.leftControl,.rightControl{display: none;} @media screen and(min-width:1200px){.t692__col{max-width:60%!important;width:100%!important}}</style><script>document.addEventListener('DOMContentLoaded',(event)=>{document.querySelectorAll('.t692__separator').forEach(e=>e.remove());document.querySelectorAll('.t692__featured').forEach(e=>e.remove());const sliderBlock=document.querySelector('#rec451035787');const sliderContainer=sliderBlock.querySelector('.t692');const sliderWrapper=sliderBlock.querySelectorAll('.t-container');const slide=sliderBlock.querySelectorAll('.t692__col');const leftControl=document.createElement('div');const rightControl=document.createElement('div');leftControl.innerText="next";leftControl.classList.add('leftControl');rightControl.innerText="previous";rightControl.classList.add('rightControl');sliderContainer.appendChild(leftControl);sliderContainer.appendChild(rightControl);sliderContainer.classList.add('swiper-container');sliderWrapper.forEach(e=>e.classList.add('swiper-wrapper'));slide.forEach(e=>e.classList.add('swiper-slide'));const swiper=new Swiper('.swiper-container',{slidesPerView:3,loop:!0,spaceBetween:10,keyboard:!0,draggable:!0,preventClicks:!1,grabCursor:!0,simulateTouch:!0,allowTouchMove:!0,direction:'horizontal',navigation:{nextEl:".leftControl",prevEl:".rightControl",},on:{slideChange:function(){setTimeout(function(){t_lazyload_update()},100);document.querySelectorAll('.t-bgimg').forEach(e=>e.classList.add('loaded'))},},breakpoints:{320:{slidesPerView:2,spaceBetween:0,centeredSlides:false},480:{slidesPerView:2,spaceBetween:0},640:{slidesPerView:2,spaceBetween:10},960:{slidesPerView:3,spaceBetween:10}}})});</script>

Scale для видео

Решение сделано для блока VD06.
Скопируй код 4 и вставь в блок T123 на страницу.

Если не работает

В этом примере стили применены к стандартному блоку и очень мал шанс, что они не будут работать.
Но если это случилось — скинь мне ссылку на страницу.

<!-- Code by Fedyaeva -->
<style>.t223-col::after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background-image:url(https://static.tildacdn.com/tild3461-3165-4534-a465-333330613938/photo.jpg);background-size:300px;background-repeat:repeat;mix-blend-mode:soft-light;opacity:0;pointer-events:none;animation:noise 0.3s steps(1,start) infinite}.noise--visible::after{opacity:0.9!important;transition:opacity 0.1s}@keyframes noise{0%{background-position:50% 50%}10%{background-position:62% 38%}20%{background-position:35% 57%}30%{background-position:40% 64%}40%{background-position:68% 35%}50%{background-position:51% 54%}60%{background-position:40% 35%}60%{background-position:36% 63%}80%{background-position:52% 65%}90%{background-position:38% 64%}100%{background-position:51% 60%}}.t223-col::after{content:'';display:block;position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;background-image:url(https://static.tildacdn.com/tild3461-3165-4534-a465-333330613938/photo.jpg);background-size:300px;background-repeat:repeat;mix-blend-mode:soft-light;opacity:0;pointer-events:none;animation:noise 0.3s steps(1,start) infinite}.noise--visible::after{opacity:0.9!important;transition:opacity 0.1s}@keyframes noise{0%{background-position:50% 50%}10%{background-position:62% 38%}20%{background-position:35% 57%}30%{background-position:40% 64%}40%{background-position:68% 35%}50%{background-position:51% 54%}60%{background-position:40% 35%}60%{background-position:36% 63%}80%{background-position:52% 65%}90%{background-position:38% 64%}100%{background-position:51% 60%}}.t223-col{position:relative}@media screen and (min-width:1200px){.t223 .t-container{max-width:100%;display:flex}.t223-col{max-width:50%;margin-left:40px;margin-right:40px}.t223__video-thumbnail_button{opacity:0;visibility:hidden}.t223__video-thumbnail{cursor:url(https://static.tildacdn.com/tild6437-3733-4335-b238-333565616431/Group_486.svg) 60 60,auto}}</style>
<script>window.addEventListener('load', () => {let allVideo = document.querySelectorAll('.t223-col');allVideo.forEach(e => e.classList.add('noise--visible'));});</script>