Featured Partners
If you are interested in becoming a partner or sponsor, please feel free to contact us.
New products
Aesthetic goods and beauty accessories that will be popular this summer season
More products
Email
Name
Phone
Comments
CLOTHES
CLOTHES
CLOTHES
CLOTHES
CLOTHES
CLOTHES
CLOTHES
CLOTHES
CLOTHES
CLOTHES
CLOTHES
CLOTHES
CLOTHES
CLOTHES
CLOTHES
William Harris
Jay Robertson
Stephen Brown
NEW IN
TOPMAN
Design creates culture. Culture shapes values. Values determine the future.
The work you do while you procrastinate is probably the work you should be doing for the rest of your life.
CLOTHING
There is no design without discipline. There is no discipline without intelligence.
SPORTWEAR
The work you do while you procrastinate is probably the work you should be doing for the rest of your life.
COLLECTION
CURIOSITY ABOUT LIFE IN ALL ITS ASPECTS, I THINK, IS STILL THE SECRET OF GREAT CREATIVE PEOPLE
INSTAGRAM
LINKEDIN
FACEBOOK
24357 Buckridge Mission Apt. 037 East Elizabethchester, MI 85446-2742
Как сделать
Видео на фоне
Код для третьего блока
Регистрируемся на Dropbox
У Dropbox есть бесплатная подписка, но если на ваш сайт, где будет встроено данное видео, будет заходить большое количество людей, то Dropbox скажет вам, что мы молодец, все у вас хорошо, но начни-ка ты платить 900 рублей в месяц и пользуйся сколько душе угодно.
За 900 рублей вы получаете все плюшки Dropbox и 2 ТБ облачного хранилища. Я себе взял, так как часто вставляю такие видосы на сайт.
Код для вставки в Zero-блок
Есть 2 формата вставки. На фон и просто в нужное нам место с нужным размером.
В обоих форматах вставка кода осуществляется одинаково, за исключением того, что для фона мы растягиваем наш HTML фрейм на 100% высоты и ширины страницы, а во втором только на нужную нам область.
Код для вставки видео на фон
<div id="videoBackground">
  <video style="object-fit: cover; background-size: cover; width: 100%; height: 100%;" preload="auto" playsinline autoplay loop muted>
    <source src="https://dl.dropboxusercontent.com/s/f80x9h0097hy546/Pexels%20Videos%202689678.mp4?dl=0" type="video/mp4">
  </video>
</div>

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

$(window).resize(() => {
  let width = $(window).width();
  let height = $(window).height();
  $("#videoBackground")
    .width(width)
    .height(height);
});
</script>
Код для вставки видео в нужное место
<div id="videoCover">
  <video style="object-fit: cover; background-size: cover; width: 56%; height: 59%; border-radius: 8px;" preload="auto" playsinline autoplay loop muted>
    <source src="https://dl.dropboxusercontent.com/s/f80x9h0097hy546/Pexels%20Videos%202689678.mp4?dl=0" type="video/mp4">
  </video>
</div>

<script>
$(document).ready(() => {
  let width = $(window).width();
  let height = $(window).height();
  $("#videoCover")
    .width(width)
    .height(height);
});

$(window).resize(() => {
  let width = $(window).width();
  let height = $(window).height();
  $("#videoCover")
    .width(width)
    .height(height);
});
</script>

<style>
#videoCover video, div#videoCover {
    width: 100%!important;
    height: auto!important;
}
</style>
Магический код для третьего блока
В коде нужно указать elem шейпа, на который мы будем наводить и elem изображения, которое будет показываться по ховеру.

Изображения будут появляться согласно порядку, который мы указали. Шейп 1, изображение 1 и тд.

Сначала все добавляем в Zero блок. Потом кликаем правой кнопкой мыши на элемент и нажимаем на "Посмотреть код", после чего поднимаемся на 1 строчку выше и ищем значение .tn-elem__3295033571624529917071


<script>
	$(document).ready(function(){
		// Классы шейпов при наведении на которые будет появляться изображение
		var hover_elems = $(".tn-elem__3295033571624529917071, .tn-elem__3295033571624529932825, .tn-elem__3295033571624529935630, .tn-elem__3295033571624529937879");
		// Классы изображений. Именно image.
		var images = ".tn-elem__3295033571624530037497, .tn-elem__3295033571624530044326, .tn-elem__3295033571624530045893, .tn-elem__3295033571624530047868";

		$("body").append("<div class='hover_float_img'></div>");

		var img_exist = 0;
		var img_src;

		var images_arr = images.split(", ");

		hover_elems.each(function(i, item) {
			$(item).hover(function(){
				img_src = $(images_arr[i]).find(".tn-atom__img").attr("src");
				if (img_exist == 0) {
					$(".hover_float_img").append( "<img class='tn-atom__img' src='" + img_src + "'>" );
					img_exist = 1;
				} else {
					$(".hover_float_img .tn-atom__img").attr("src", img_src);
				}

				$(".hover_float_img").css("opacity", "1");
			}, function(){
				$(".hover_float_img").css("opacity", "0");
			})
		})


		$(window).mousemove(function(e){
			var width = $(".hover_float_img").get(0).offsetWidth;
			var height = $(".hover_float_img").get(0).offsetHeight;
			$(".hover_float_img").css("top", e.clientY - height / 2).css("left", e.clientX - width / 2);
		})
	})
</script>
<style>
	.hover_float_img {
		position: fixed;
		top: 0;
		left: 0;
		pointer-events: none;
		opacity: 1;
		transition: opacity .2s;
	}
	.hover_float_img,
	.hover_float_img img {
		/* Ширина изображения */
		width: 400px;
	}
        /* При ширине экрана меньше чем 1200 пикселей эффект не работает */
	@media screen and (max-width: 1200px) {
	    .hover_float_img {
	        display: none;
	    }
	}
</style>
Скрин, как это все выглядит
В моем случае анимация не всегда работает корректно, так как размер видео большой и иногда подгружается не сразу. Вес моего видео около 50 мб. Я его делал для шаблона и демонстрации возможности такого функционала. Для реально проекта нужно более легкое видео.
Шрифт
Montserrat
ID шаблона
20400831
Как добавить шаблон
Создаем новую страницу на сайте
Скроллим в самый низ
Добавляем нужный id шаблона
Zero Block