Материалы вебинара «Как мы делаем сайты на Тильде»

Дизайн

Как и обещали, делимся с вами кодами для видео и слайдера.

Этот скрипт мы написали сами: нашли скрипт для видео и модернизировали его. Просто скопируйте и применяйте в своих проектах. Не забудь вставить ссылку на своё видео.

Видео первого экрана

Скрипт для десктопа:

<div style="width: 100%; height: 100%;" id="videoBackground">
<video style="object-fit: cover; background-size: cover; width: 100%; height: 100%;" preload="auto" pip="false" playsinline autoplay loop muted>
<source src="https://dl.dropboxusercontent.com/__________" type="video/mp4">
<source src="https://dl.dropboxusercontent.com/__________" type="video/ogg; codecs='theora, vorbis'">
<source src="https://dl.dropboxusercontent.com/__________" type="video/webm">
</video>
</div>

Скрипт для мобильной версии:

<div class="videoBackground">
<video preload="auto" playsinline autoplay loop muted>
<source src="https://dl.dropboxusercontent.com/__________" type="video/mp4">
<source src="https://dl.dropboxusercontent.com/__________" type="video/ogg; codecs='theora, vorbis'">
<source src="https://dl.dropboxusercontent.com/__________" type="video/webm">
</video>
</div>

<script>
$(document).ready(function() {
var width = $(window).width();
var height = $(window).height();
$(".videoBackground")
.width(width)
.height(height);
});

$(window).resize(t_throttle(function() {
var width = $(window).width();
var height = $(window).height();
$(".videoBackground")
.width(width)
.height(height);
}));

</script>

<style>
.videoBackground > video {
object-fit: cover;

Это код поможет тебе сделать слайдер с изменяющимся курсором.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/­OwlCarousel2/2.3.4/assets/owl.carousel.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/­OwlCarousel2/­2.3.4/assets/owl.theme.default.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/­OwlCarousel2/2.3.4/owl.carousel.min.js"></script>

<script>
$(document).ready(function() {
var block = $('#rec410051636'); // id вашего z-блока
var wrap = $('.anku-slider'); // область слайдера
var slides = $('#rec413494843, #rec413500602, #rec413501554'); // id ваших z-блоков

var box = wrap.find('.tn-atom');
box.append('<div class="owl-carousel owl-theme"></div>');
slides.appendTo(block.find('.owl-carousel'));
var owl = wrap.find('.owl-carousel').owlCarousel({
loop: true, // true/false - бесконечная прокрутка
center: false, // true/false - центрирование
dots: false, // true/false - точки под слайдами
nav: false, // true/false - стандартная навигация
margin: 13, // any value in px - внешний отступ сежду слайдами в пикселях
items: 3, // кол-во слайдов
responsive: { // количиство отображаемых слайдов в зависимости от разрешения дисплея
0: {
items: 1
},
640: {
items: 1
},
1000: {
items: 1
},
1200: {
items: 1
},
}
})


block.find("[href='#anku_left']").click(function(e) { // добавьте эту ссылку к кнопке, отвечающей за прокрутку влево (назад)
e.preventDefault();
owl.trigger('prev.owl.carousel');
})
block.find("[href='#anku_right']").click(function(e) { // добавьте эту ссылку к кнопке, отвечающей за прокрутку вправо (вперед)
e.preventDefault();
owl.trigger('next.owl.carousel');
})
});
</script>

<style>
.anku-slider .t-rec .t396__artboard {
width: 100% !important;
height: 544px !important;
word-break: normal !important;
background: transparent !important;
}

@media screen and (max-width: 1199px) {
.anku-slider .t-rec .t396__artboard {
height: 491px !important;
}
}

@media screen and (max-width: 959px) {
.anku-slider .t-rec .t396__artboard {
height: 376px !important;
}
}

@media screen and (max-width: 639px) {
.anku-slider .t-rec .t396__artboard {
height: 314px !important;
}
}

@media screen and (max-width: 479px) {
.anku-slider .t-rec .t396__artboard {
height: 320px !important;
}
}

.anku-slider {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: stretch;
align-content: stretch;
}

.anku-slider .t-rec,
.anku-slider .t396__artboard {
overflow: hidden !important;
}

.anku-slider .t-rec .t396__artboard>.t396__carrier,
.anku-slider .t-rec .t396__artboard>.t396__filter {
display: none !important;
}
</style>

Слайдер

Добавляем стрелки курсора. Создаем html-элементы в блоке с заголовком. Class позволяет ссылаться на нужные прописанные свойства.

Для левой:

<a class="ankuu_left" href="#anku_left" target="_parent"></a>

Для правой:

<a class="ankuu_right" href="#anku_right" target="_parent"></a>

Добавляем стрелки курсора. В блок Т123 добавляем:

<style>
.ankuu_right {
cursor: url(https://static.tildacdn.com/tild3839-6434-4161-b537-616337633161/right.svg), pointer;
display:block;
z-index: 999;
width: 1456px;
height: 560px;
}
.ankuu_left {
cursor: url(https://static.tildacdn.com/tild3039-3132-4962-a534-383561663162/left.svg), pointer;
display:block;
z-index: 999;
width: 1456px;
height: 560px;
}
</style>

Сделано в Grids

Заказ проекта

Нажимая на кнопку, вы соглашаетесь с нашими правилами обработки данных

Нажимая на кнопку, вы соглашаетесь с нашими правилами обработки данных

Хочу в команду

Нажимая на кнопку, вы соглашаетесь с нашими правилами обработки данных

Нажимая на кнопку, вы соглашаетесь с нашими правилами обработки данных