Impression. Digital. Result.
Обсудить проект
Расскажите нам немного о себе, и мы свяжемся с вами в ближайшее время
Tilda Scripts
Всем привет!
Это Сергей — Дизайн-директор I'MON.
Изначально эта страница была создана для себя:) Но заметил ваш интерес и решил в ближайшее время обновить библиотеку скриптов (их накопилось вдвое+ больше, чем есть сейчас), буду рад поделиться и сделать библиотеку удобнее, визуально приятнее для себя и других. Обновления планирую в феврале.
А пока, если будет желание поддержать — мой новый профиль Dprofile / Behance.
Это Сергей — Дизайн-директор I'MON.
Изначально эта страница была создана для себя:) Но заметил ваш интерес и решил в ближайшее время обновить библиотеку скриптов (их накопилось вдвое+ больше, чем есть сейчас), буду рад поделиться и сделать библиотеку удобнее, визуально приятнее для себя и других. Обновления планирую в феврале.
А пока, если будет желание поддержать — мой новый профиль Dprofile / Behance.
Повсеместные
Добавляются практически во все сайты
PreLoader из ZeroBlock
<style>
#rec166025753 {
position: fixed;
left: 0;
top: 0;
right:0;
bottom:0;
z-index: 100005;
}
</style>
<script>
$("body").css("overflow","hidden");
$(document).ready(function() {
setTimeout(function() {
$("#rec166025753").delay(350).fadeOut('slow');
$("body").css("overflow","");
window.dispatchEvent(new Event('resize'));
}, 3000);
});
$(window).on('load', function () {
$("#rec166025753").delay(350).fadeOut('slow');
setTimeout(function() {
$("body").css("overflow","");
window.dispatchEvent(new Event('resize'));
}, 400);
});
</script>
#rec166025753 {
position: fixed;
left: 0;
top: 0;
right:0;
bottom:0;
z-index: 100005;
}
</style>
<script>
$("body").css("overflow","hidden");
$(document).ready(function() {
setTimeout(function() {
$("#rec166025753").delay(350).fadeOut('slow');
$("body").css("overflow","");
window.dispatchEvent(new Event('resize'));
}, 3000);
});
$(window).on('load', function () {
$("#rec166025753").delay(350).fadeOut('slow');
setTimeout(function() {
$("body").css("overflow","");
window.dispatchEvent(new Event('resize'));
}, 400);
});
</script>
Pop-up
- Создаем блок BF503;
- Отчищаем все данные во вкладке "Контент";
- Ставим ширину 100%;
- Создаем Zero Block, наполняем контентом и адаптируем, в качестве фона используйте элемент шейп с заливкой. Фон самого Zero block удалите, чтобы он был прозрачным.
- Добавьте код на страницу;
- Замените id Zero block;
- Замените id BF503.
<script>
$( document ).ready(function() {
var Content = '#rec265307274'; //id Zero blockvar Wrapper = '#rec265898477'; //id блока popup окна BF503
$(Wrapper + " .t-popup__container").html($(Content)).parent(".t-popup");
$(Wrapper).addClass('ZeroInPopUp');
});
</script>
<style>.ZeroInPopUp .t-popup__container {
background: none!important;
left: 0;
right: 0;
height: 100vh;
display: grid;
align-content: center;
overflow-y: scroll;
padding: 50px 0px 50px 0px!important}
.ZeroInPopUp .t-popup {
width: 100%;
padding: 0;
margin: 0;
}.ZeroInPopUp .t-popup__container.t-popup__container-static {
margin: 0 auto;
}@media screen and (max-width: 560px) {
.ZeroInPopUp.t-popup__close {
background: transparent!important;
}.ZeroInPopUp .t-popup_show .t-popup__container {
top: 0px!important;
align-content: start;
}
}
</style>
Цвет фона html
<!-- https://romanyu.ru/cvet-fona-html -->
<style>
html {
/* укажи цвет фона html */background: #1a1a1a;
}
</style>
<style>
html {
/* укажи цвет фона html */background: #1a1a1a;
}
</style>
Стилизация скроллбара (ползунка) в десктопе
<!-- https://romanyu.ru/scrollbar -->
<style>
@media screen and (min-width: 1201px) {
::-webkit-scrollbar-thumb {
/* Укажи цвет скроллбара */
background: #e42e3a;
/* Укажи радиус скругления скроллбара */border-radius: 10px;
}
::-webkit-scrollbar {
/* Укажи ширину вертикального скроллбара */
width: 5px;
/* Укажи высоту горизонтального скроллбара */height: 5px;
/* Укажи цвет фона под скроллбаром */background: #000000;
}
}
</style>
<style>
@media screen and (min-width: 1201px) {
::-webkit-scrollbar-thumb {
/* Укажи цвет скроллбара */
background: #e42e3a;
/* Укажи радиус скругления скроллбара */border-radius: 10px;
}
::-webkit-scrollbar {
/* Укажи ширину вертикального скроллбара */
width: 5px;
/* Укажи высоту горизонтального скроллбара */height: 5px;
/* Укажи цвет фона под скроллбаром */background: #000000;
}
}
</style>
Цвет выделения текста
<!-- https://romanyu.ru/cvet-vydeleniya-teksta -->
<style>
::selection {
/* укажи цвет выделения текста */background: #e42e3a;
}
</style>
<style>
::selection {
/* укажи цвет выделения текста */background: #e42e3a;
}
</style>
Масштабирование окна Desktop версии сайта
Page Scale
<script>
var myWidth = 1920; //указываем ШИРИНУ своего монитора в PX - для мака ставлю 1780
var myHeight = 1080; //указываем ВЫСОТУ своего монитора в PX
if ($(window).width() > 1200) { //указываем, ОТ какой ширины экрана в PX начинает работать скрипт
$('head').append('<style id="scale" type="text/css"></style>');
function scale(wrap) {
window.innerWidth = myWidth;
window.innerHeight = myHeight;
var ratio = $(window).width() / myWidth;
$(document).ready(function() {
setTimeout(function() {
$(".t396__artboard").each(function() {
if (wrap == "true") {
$(this).children().wrapAll("<div class='t396__scale'></div>")
}
var hght = parseInt($(this).attr("data-artboard-proxy-min-height"));
$(this).height(hght * ratio);
$('#scale').html(".t396__scale { transform: scale(" + ratio + ");position:relative; height:100%; transform-origin: top center; }");
})
}, 500)
})
}
scale("true");
$(window).resize(scale)
}
</script>
Пиксели в проценты (работает не всегда корректно)
<script>
var myWidth = 1920;
function px2vw (px) {
px = px.slice(0, -2);
let ratio = window.innerWidth / myWidth;
let vw = 100 * px / myWidth;
return vw.toFixed(3) + 'vw';
}
$(window).load(function() {
var style = '@media screen and (min-width: 1200px) {\n';
$('.t396__elem').each(function() {
if($(this).attr('data-elem-type') === 'text' || $(this).attr('data-elem-type') === 'button') {
oldPX = $(this).find('.tn-atom').css('font-size');
style = style + '.tn-elem[data-elem-id="' + $(this).attr('data-elem-id') + '"] .tn-atom' + ' { font-size: ' + px2vw(oldPX) + ' !important; }\n';
//$(this).find('.tn-atom').attr('style','font-size:' + px2vw(oldPX) + ';');
}
if($(this).attr('data-elem-type') === 'button') {
oldPX = $(this).find('.tn-atom').css('border-radius');
style = style + '.tn-elem[data-elem-id="' + $(this).attr('data-elem-id') + '"] .tn-atom' + ' { border-radius: ' + px2vw(oldPX) + ' !important; }\n';
}
$(this).attr('style', '');
let oldHeight = $(this).css('height');
let oldWidth = $(this).css('width');
let oldTop = $(this).css('top');
let oldLeft = $(this).css('left');
//вычисление left на 1920
let x = document.documentElement.clientWidth / 2 - 600 - oldLeft.slice(0, -2);
x = x * -1;
let newLeft = myWidth / 2 - 600 + x + 'px';
$(this).attr('style', '');
style = style + '.tn-elem[data-elem-id="' + $(this).attr('data-elem-id') + '"]' + ' { width: ' + px2vw(oldWidth) + ' !important; top: ' + px2vw(oldTop) + ' !important; left: ' + px2vw(newLeft) + ' !important; height: ' + px2vw(oldHeight) + ' !important; }\n';
});
$('.t396__artboard').each(function() {
let oldArtHeight = $(this).css('height');
style = style + '#rec' + $(this).attr('data-artboard-recid') + ' .t396__artboard' + ' { height: ' + px2vw(oldArtHeight) + ' !important; }\n';
});
style = style + '}';
$('head').append('<style type="text/css">' + style + '</style>');
console.log(style);
});
</script>
<script>
var myWidth = 1920; //указываем ШИРИНУ своего монитора в PX - для мака ставлю 1780
var myHeight = 1080; //указываем ВЫСОТУ своего монитора в PX
if ($(window).width() > 1200) { //указываем, ОТ какой ширины экрана в PX начинает работать скрипт
$('head').append('<style id="scale" type="text/css"></style>');
function scale(wrap) {
window.innerWidth = myWidth;
window.innerHeight = myHeight;
var ratio = $(window).width() / myWidth;
$(document).ready(function() {
setTimeout(function() {
$(".t396__artboard").each(function() {
if (wrap == "true") {
$(this).children().wrapAll("<div class='t396__scale'></div>")
}
var hght = parseInt($(this).attr("data-artboard-proxy-min-height"));
$(this).height(hght * ratio);
$('#scale').html(".t396__scale { transform: scale(" + ratio + ");position:relative; height:100%; transform-origin: top center; }");
})
}, 500)
})
}
scale("true");
$(window).resize(scale)
}
</script>
Пиксели в проценты (работает не всегда корректно)
<script>
var myWidth = 1920;
function px2vw (px) {
px = px.slice(0, -2);
let ratio = window.innerWidth / myWidth;
let vw = 100 * px / myWidth;
return vw.toFixed(3) + 'vw';
}
$(window).load(function() {
var style = '@media screen and (min-width: 1200px) {\n';
$('.t396__elem').each(function() {
if($(this).attr('data-elem-type') === 'text' || $(this).attr('data-elem-type') === 'button') {
oldPX = $(this).find('.tn-atom').css('font-size');
style = style + '.tn-elem[data-elem-id="' + $(this).attr('data-elem-id') + '"] .tn-atom' + ' { font-size: ' + px2vw(oldPX) + ' !important; }\n';
//$(this).find('.tn-atom').attr('style','font-size:' + px2vw(oldPX) + ';');
}
if($(this).attr('data-elem-type') === 'button') {
oldPX = $(this).find('.tn-atom').css('border-radius');
style = style + '.tn-elem[data-elem-id="' + $(this).attr('data-elem-id') + '"] .tn-atom' + ' { border-radius: ' + px2vw(oldPX) + ' !important; }\n';
}
$(this).attr('style', '');
let oldHeight = $(this).css('height');
let oldWidth = $(this).css('width');
let oldTop = $(this).css('top');
let oldLeft = $(this).css('left');
//вычисление left на 1920
let x = document.documentElement.clientWidth / 2 - 600 - oldLeft.slice(0, -2);
x = x * -1;
let newLeft = myWidth / 2 - 600 + x + 'px';
$(this).attr('style', '');
style = style + '.tn-elem[data-elem-id="' + $(this).attr('data-elem-id') + '"]' + ' { width: ' + px2vw(oldWidth) + ' !important; top: ' + px2vw(oldTop) + ' !important; left: ' + px2vw(newLeft) + ' !important; height: ' + px2vw(oldHeight) + ' !important; }\n';
});
$('.t396__artboard').each(function() {
let oldArtHeight = $(this).css('height');
style = style + '#rec' + $(this).attr('data-artboard-recid') + ' .t396__artboard' + ' { height: ' + px2vw(oldArtHeight) + ' !important; }\n';
});
style = style + '}';
$('head').append('<style type="text/css">' + style + '</style>');
console.log(style);
});
</script>
Свое окно успешной отправки в Zero
Создали ZeroBlock с сообщением, расположили элементы по центру
Кнопкам в этом Zero задали класс success-btn-close
Создали ZeroBlock c основной формой и задали ей класс zero_form
Добавили код в блок Другое - Т123
<style>
.t-form-success-popup__window ,
.hide-success {
opacity: 0!important;
height: 0!important;
max-height: 0!important;
min-height: 0!important;
pointer-events: none!important;
overflow: hidden!important;
padding-top: 0!important;
padding-bottom: 0!important;
}
.success-zero {
position: inherit;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
</style>
<script>
$(document).ready(function () {
$('.success-btn-close').closest('.t-rec').addClass('success-zero hide-success');
$('.success-btn-close').click(function(){ window.tildaForm.closeSuccessPopup() });
$('.zero_form').delegate(".t-submit", "click", function(){
setTimeout(function(){
if ( $('.zero_form .t-form').hasClass("js-send-form-success")){
$('.success-zero').removeClass('hide-success').appendTo('.t-form-success-popup');
};
}, 1000);
});
});
</script>
Кнопкам в этом Zero задали класс success-btn-close
Создали ZeroBlock c основной формой и задали ей класс zero_form
Добавили код в блок Другое - Т123
<style>
.t-form-success-popup__window ,
.hide-success {
opacity: 0!important;
height: 0!important;
max-height: 0!important;
min-height: 0!important;
pointer-events: none!important;
overflow: hidden!important;
padding-top: 0!important;
padding-bottom: 0!important;
}
.success-zero {
position: inherit;
width: 100%;
top: 50%;
transform: translateY(-50%);
}
</style>
<script>
$(document).ready(function () {
$('.success-btn-close').closest('.t-rec').addClass('success-zero hide-success');
$('.success-btn-close').click(function(){ window.tildaForm.closeSuccessPopup() });
$('.zero_form').delegate(".t-submit", "click", function(){
setTimeout(function(){
if ( $('.zero_form .t-form').hasClass("js-send-form-success")){
$('.success-zero').removeClass('hide-success').appendTo('.t-form-success-popup');
};
}, 1000);
});
});
</script>
Визуальные и Дизайн-образующие эффекты
Фундаментальные визуализации для сайта для построения дизайн-системы
Глитч эффект для текста в zero block
- Пропиши текстовому элементу, к которому хочешь применить глитч эффект, название класса: glitch-text. Инструкция по добавлению своего класса элементу.
- Укажи в настройках ниже два цвета глитч эффекта.
- Скопируй сгенерированный код и вставь на свой сайт. Памятка по вставке кода.
Взято отсюда: https://romanyu.ru/glitch-effekt-text
<!-- https://romanyu.ru/glitch-effekt-text -->
<script>
$(function(){
var glitchTextBlock = $('.glitch-text');
if(glitchTextBlock.length > 0) {
glitchTextBlock.each(function(){
var atom = $(this).find('.tn-atom');
atom.clone().addClass('tn-atom_clone-primary').appendTo($(this));
atom.clone().addClass('tn-atom_clone-secondary').appendTo($(this));
})
}
});
</script>
<style>
.glitch-text {
position: absolute;
}
.glitch-text .tn-atom_clone-primary,
.glitch-text .tn-atom_clone-secondary {
position: absolute;
top: 0;
left: 0;
z-index: 1;
width: 100%;
height: 100%;
}
.glitch-text .tn-atom_clone-primary {
left: 2px;
/* Укажи цвет 1 */text-shadow: -2px 0 #cc0f39;
clip: rect(0, auto, auto, 0);
animation: glitch-text-animation-primary 3s linear infinite alternate;
}
.glitch-text .tn-atom_clone-secondary {
left: -2px;
/* Укажи цвет 2 */text-shadow: -2px 0 #0ffbf9;
clip: rect(0, auto, auto, 0);
animation: glitch-text-animation-secondary 2.5s linear infinite alternate;
}
@keyframes glitch-text-animation-primary {
0% {
clip: rect(0.37em, auto, 0.01em, 0);
}
5% {
clip: rect(0.25em, auto, 0.78em, 0);
}
10% {
clip: rect(0.28em, auto, 0.4em, 0);
}
15% {
clip: rect(0.04em, auto, 0.37em, 0);
}
20% {
clip: rect(0.69em, auto, 0.53em, 0);
}
25% {
clip: rect(0.41em, auto, 0.01em, 0);
}
30% {
clip: rect(0.8em, auto, 0.42em, 0);
}
35% {
clip: rect(0.6em, auto, 0.25em, 0);
}
40% {
clip: rect(0.1em, auto, 0.56em, 0);
}
45% {
clip: rect(0.21em, auto, 0.51em, 0);
}
50% {
clip: rect(0.62em, auto, 0.71em, 0);
}
55% {
clip: rect(0.33em, auto, 0.43em, 0);
}
60% {
clip: rect(0.72em, auto, 0.08em, 0);
}
65% {
clip: rect(0.26em, auto, 0.73em, 0);
}
70% {
clip: rect(0.67em, auto, 0.53em, 0);
}
75% {
clip: rect(0.39em, auto, 0.96em, 0);
}
80% {
clip: rect(0.66em, auto, 0.38em, 0);
}
85% {
clip: rect(0.17em, auto, 0.25em, 0);
}
90% {
clip: rect(0.25em, auto, 0.5em, 0);
}
95% {
clip: rect(0.51em, auto, 0.9em, 0);
}
100% {
clip: rect(0.13em, auto, 0.98em, 0);
}
}
@keyframes glitch-text-animation-secondary {
0% {
clip: rect(0.79em, auto, 0.58em, 0);
}
2.5% {
clip: rect(0.07em, auto, 0.35em, 0);
}
5% {
clip: rect(0.41em, auto, 0.4em, 0);
}
7.5% {
clip: rect(0.32em, auto, 0.48em, 0);
}
10% {
clip: rect(0.91em, auto, 0.79em, 0);
}
12.5% {
clip: rect(0.27em, auto, 0.8em, 0);
}
15% {
clip: rect(0.24em, auto, 0.22em, 0);
}
17.5% {
clip: rect(0.29em, auto, 0.08em, 0);
}
20% {
clip: rect(0.01em, auto, 0.97em, 0);
}
22.5% {
clip: rect(0.77em, auto, 0.49em, 0);
}
25% {
clip: rect(0.69em, auto, 0.55em, 0);
}
27.5% {
clip: rect(0.24em, auto, 0.25em, 0);
}
30% {
clip: rect(0.63em, auto, 0.61em, 0);
}
32.5% {
clip: rect(0.17em, auto, 0.35em, 0);
}
35% {
clip: rect(0.82em, auto, 0.41em, 0);
}
37.5% {
clip: rect(0.49em, auto, 0.76em, 0);
}
40% {
clip: rect(0.58em, auto, 0.55em, 0);
}
42.5% {
clip: rect(0.93em, auto, 0.06em, 0);
}
45% {
clip: rect(0.85em, auto, 0.49em, 0);
}
47.5% {
clip: rect(0.19em, auto, 0.85em, 0);
}
50% {
clip: rect(0.31em, auto, 0.84em, 0);
}
52.5% {
clip: rect(0.68em, auto, 0.32em, 0);
}
55% {
clip: rect(0.58em, auto, 0.25em, 0);
}
57.5% {
clip: rect(0.66em, auto, 0.18em, 0);
}
60% {
clip: rect(0.73em, auto, 0.12em, 0);
}
62.5% {
clip: rect(0.2em, auto, 0.71em, 0);
}
65% {
clip: rect(0.41em, auto, 0.77em, 0);
}
67.5% {
clip: rect(0.9em, auto, 0.09em, 0);
}
70% {
clip: rect(0.86em, auto, 0.06em, 0);
}
72.5% {
clip: rect(0.08em, auto, 0.82em, 0);
}
75% {
clip: rect(0.49em, auto, 0.85em, 0);
}
77.5% {
clip: rect(0.92em, auto, 0.98em, 0);
}
80% {
clip: rect(0.15em, auto, 0.71em, 0);
}
82.5% {
clip: rect(0.34em, auto, 0.36em, 0);
}
85% {
clip: rect(0.69em, auto, 0.7em, 0);
}
87.5% {
clip: rect(0.38em, auto, 0.79em, 0);
}
90% {
clip: rect(0.94em, auto, 0.7em, 0);
}
92.5% {
clip: rect(0.88em, auto, 0.26em, 0);
}
95% {
clip: rect(0.78em, auto, 0.97em, 0);
}
97.5% {
clip: rect(0.74em, auto, 0.39em, 0);
}
100% {
clip: rect(0.54em, auto, 0.85em, 0);
}
}
</style>
Обводка текста в zero block
- Укажи тексту в zero block, которому нужно сделать обводку, класс text-stroke. Инструкция по добавлению своего класса элементу.
- Укажи цвет текста в настройках zero block, он применится к обводке.
- Укажи в настройках ниже толщину обводки.
- Скопируй этот код и вставь на свой сайт. Памятка по вставке кода.
Взято отсюда: https://romanyu.ru/obvodka-teksta
<!-- https://romanyu.ru/obvodka-teksta -->
<style>
.text-stroke .tn-atom {
/* Укажи толщину обводки */
-webkit-text-stroke: 1px;
-webkit-text-fill-color: transparent;
}
</style>
Эффект наложения блока при скролле
Для реализации эффекта высота блока должна быть больше высоты экрана.
<!-- https://romanyu.ru/nalozhenie-bloka-pri-skrolle -->
<script>
$(function(){
/* Укажи id всех блоков через запятую, которым нужно добавить эффект наложения */var id = '#rec320115509,#rec320115547,#rec320115573';
$('head').append('<style>body {overflow-x: hidden;}#allrecords {overflow: visible !important;}#t-header,#t-footer {position: relative;z-index: 2;} .t-rec {position: relative;z-index: 1;overflow-x: hidden;}'+id+' { position: -webkit-sticky; position: sticky; top: 0; z-index: 0;}</style>');
$(window).on('load resize', function(){
$(id).each(function(){
var topPosition = $(window).height() - $(this).height();
if (topPosition < 0) {
$(this).css('top',topPosition)
} else {
$(this).css('top',0)
}
});
});
});
</script>
- Укажи в настройках id всех блоков через запятую, которым нужно добавить эффект.
- Скопируй этот код и вставь на свой сайт. Памятка по вставке кода.
Взято отсюда: https://romanyu.ru/nalozhenie-bloka-pri-skrolle
<!-- https://romanyu.ru/nalozhenie-bloka-pri-skrolle -->
<script>
$(function(){
/* Укажи id всех блоков через запятую, которым нужно добавить эффект наложения */var id = '#rec320115509,#rec320115547,#rec320115573';
$('head').append('<style>body {overflow-x: hidden;}#allrecords {overflow: visible !important;}#t-header,#t-footer {position: relative;z-index: 2;} .t-rec {position: relative;z-index: 1;overflow-x: hidden;}'+id+' { position: -webkit-sticky; position: sticky; top: 0; z-index: 0;}</style>');
$(window).on('load resize', function(){
$(id).each(function(){
var topPosition = $(window).height() - $(this).height();
if (topPosition < 0) {
$(this).css('top',topPosition)
} else {
$(this).css('top',0)
}
});
});
});
</script>
Слайдеры
Варианты добавления слайдеров
Cлайдер со своими кнопками из ZeroBlock в Tilda
1. Добавили на страницу блок CR30N
2. Создали слайды в ZeroBlock и добавили в них кнопки со ссылками #leftsld #rightsld
3. Создали копии последнего и первого ZeroBlock
4. Добавили код в блок Другое - Т123
<style>
.t734 { height: auto !important; }
.t734 .t-slds__arrow_container {display: none}
</style>
<script>
$(document).ready(function(){
let sldID = ['#rec166115565'];
for (let i=0; i<sldID.length; i++){
let sliderEl = sldID[i]+' .t-slds__item';
let slidercount = $(sliderEl).length; $(sliderEl).empty(); let start=0;
if(!$(sliderEl+'[data-slide-index="0"]').length){start=1};
for (let j=0; j<slidercount; j++){
let sInd = j+start;
if(start){ slideId = '#'+$(sldID[i]).next().next('div[data-record-type="396"]').attr('id');
}else{ slideId = '#'+$(sldID[i]).next('div[data-record-type="396"]').attr('id')
if(j==0){sInd=slidercount-1};if(j==slidercount-1){sInd=0};
}; $(slideId).appendTo(sliderEl+'[data-slide-index='+(sInd)+']');
}; if(start){ $(sldID[i]).next().hide(); $(sldID[i]).next().next().hide()};
};
$(document).on('click',' a[href="#leftsld"] ',function(e){ e.preventDefault();
$(".t734 .t-slds__arrow-left")[0].click();
});
$(document).on('click',' a[href="#rightsld"] ',function(e){ e.preventDefault();
$(".t734 .t-slds__arrow-right")[0].click();
});
});
</script>
Взято отсюда: https://mo-ti.ru/sliderbuttonzero
2. Создали слайды в ZeroBlock и добавили в них кнопки со ссылками #leftsld #rightsld
3. Создали копии последнего и первого ZeroBlock
4. Добавили код в блок Другое - Т123
<style>
.t734 { height: auto !important; }
.t734 .t-slds__arrow_container {display: none}
</style>
<script>
$(document).ready(function(){
let sldID = ['#rec166115565'];
for (let i=0; i<sldID.length; i++){
let sliderEl = sldID[i]+' .t-slds__item';
let slidercount = $(sliderEl).length; $(sliderEl).empty(); let start=0;
if(!$(sliderEl+'[data-slide-index="0"]').length){start=1};
for (let j=0; j<slidercount; j++){
let sInd = j+start;
if(start){ slideId = '#'+$(sldID[i]).next().next('div[data-record-type="396"]').attr('id');
}else{ slideId = '#'+$(sldID[i]).next('div[data-record-type="396"]').attr('id')
if(j==0){sInd=slidercount-1};if(j==slidercount-1){sInd=0};
}; $(slideId).appendTo(sliderEl+'[data-slide-index='+(sInd)+']');
}; if(start){ $(sldID[i]).next().hide(); $(sldID[i]).next().next().hide()};
};
$(document).on('click',' a[href="#leftsld"] ',function(e){ e.preventDefault();
$(".t734 .t-slds__arrow-left")[0].click();
});
$(document).on('click',' a[href="#rightsld"] ',function(e){ e.preventDefault();
$(".t734 .t-slds__arrow-right")[0].click();
});
});
</script>
Взято отсюда: https://mo-ti.ru/sliderbuttonzero
Слайдер с отзывами в ZeroBlock в Tilda
Пример выполнен на базе блока Отзывы►TS206N
Порядок выполнения данного примера
1. Создали ZeroBlock и добавили элемент Shape c размерами
1 экран - 400х240рх
2,3,4 экран - 380х240рх
5 экран - 320х240px
2. Создали блок TS206N c настройками
- Ширина блока - 4 колонки
- Отступ слева - Без отступа
-Фото удалили
- Размер шрифта 14px
- Отступ сверху и снизу 0px
3. Добавляем код на страницу в блок Другое►Т123
В коде меняем класс своего Shape блока
tn-elem__507517421523595831624
И ID блока с отзывами #rec50752037
<style>
/*Задаём автовысоту у Shape*/
.testimonials1{
height: auto !important;
}
/*Задаём внутренние отступы у Shape*/
.testim .tn-atom{
padding: 20px 0 20px 0;
}
/*Задаём ширину блока с отзывами*/[data-record-type="798"] {
width:400px;
}
/*Задаём внутренние отступы для отзывов справа и слева*/
.t798__cell_padding-left {
padding-left: 25px;
padding-right: 25px;
}
/*Задаём внешние отступы и привязки для отзывов*/.t798 .t-col{
margin-left: 0px !important;
margin-right: 0px !important;
float: none !important;
}
/*При ширине экрана меньше 480рх делаем ширину блока с отзывами 320рх*/
@media screen and (max-width: 480px){
[data-record-type="798"] {
width:320px;
}
/*Отменяем отсту справа*/
.t798__cell_padding-left {
padding-right: 0px !important;
}
/*Задаём внутренние отступы у Shape*/
.testim .tn-atom{
padding: 5px 0 10px 0;
}
}
</style>
<script>
//Добавляем класс к нашему Shape элементу в Zero
$(".tn-elem__507517421523595831624").addClass("testimonials1 testim");
//Перемещаем блок с отзывами в элемент Shape в ZeroBlock
$("#rec50752037").appendTo(".testimonials1 .tn-atom");
</script>
Взято отсюда: https://mo-ti.ru/testimonials
Порядок выполнения данного примера
1. Создали ZeroBlock и добавили элемент Shape c размерами
1 экран - 400х240рх
2,3,4 экран - 380х240рх
5 экран - 320х240px
2. Создали блок TS206N c настройками
- Ширина блока - 4 колонки
- Отступ слева - Без отступа
-Фото удалили
- Размер шрифта 14px
- Отступ сверху и снизу 0px
3. Добавляем код на страницу в блок Другое►Т123
В коде меняем класс своего Shape блока
tn-elem__507517421523595831624
И ID блока с отзывами #rec50752037
<style>
/*Задаём автовысоту у Shape*/
.testimonials1{
height: auto !important;
}
/*Задаём внутренние отступы у Shape*/
.testim .tn-atom{
padding: 20px 0 20px 0;
}
/*Задаём ширину блока с отзывами*/[data-record-type="798"] {
width:400px;
}
/*Задаём внутренние отступы для отзывов справа и слева*/
.t798__cell_padding-left {
padding-left: 25px;
padding-right: 25px;
}
/*Задаём внешние отступы и привязки для отзывов*/.t798 .t-col{
margin-left: 0px !important;
margin-right: 0px !important;
float: none !important;
}
/*При ширине экрана меньше 480рх делаем ширину блока с отзывами 320рх*/
@media screen and (max-width: 480px){
[data-record-type="798"] {
width:320px;
}
/*Отменяем отсту справа*/
.t798__cell_padding-left {
padding-right: 0px !important;
}
/*Задаём внутренние отступы у Shape*/
.testim .tn-atom{
padding: 5px 0 10px 0;
}
}
</style>
<script>
//Добавляем класс к нашему Shape элементу в Zero
$(".tn-elem__507517421523595831624").addClass("testimonials1 testim");
//Перемещаем блок с отзывами в элемент Shape в ZeroBlock
$("#rec50752037").appendTo(".testimonials1 .tn-atom");
</script>
Взято отсюда: https://mo-ti.ru/testimonials
Классический слайдер
Создали галерею CR30N
Создали 3 ZeroBlocka
Создали копии последнего и первого ZeroBlock
Добавили скрипт на страницу
Скрипт добавляем в блок ДРУГОЕ►T123
В коде изменили ID СR30N
<style>.t734 { height: auto !important; }</style>
<script>
$(document).ready(function(){
let sldID = ['#rec166024520'];
for (let i=0; i<sldID.length; i++){
let sliderEl = sldID[i]+' .t-slds__item';
let slidercount = $(sliderEl).length; $(sliderEl).empty(); let start=0;
if(!$(sliderEl+'[data-slide-index="0"]').length){start=1};
for (let j=0; j<slidercount; j++){
let sInd = j+start;
if(start){ slideId = '#'+$(sldID[i]).next().next('div[data-record-type="396"]').attr('id');
}else{ slideId = '#'+$(sldID[i]).next('div[data-record-type="396"]').attr('id')
if(j==0){sInd=slidercount-1};if(j==slidercount-1){sInd=0};
}; $(slideId).appendTo(sliderEl+'[data-slide-index='+(sInd)+']');
}; if(start){ $(sldID[i]).next().hide(); $(sldID[i]).next().next().hide()};
};
});
</script>
Взято отсюда: https://mo-ti.ru/testimonials
Горизонтальный скролл со стрелками в zero block
- Создай отдельно zero block с элементами, которые нужно скроллить. В настройках поставь overflow: auto.
- Создай отдельно zero block со стрелками. Каждая стрелка — это шейп. Для шейпа со стрелкой налево укажи класс arrow-left, для шейпа со стрелкой направо укажи класс arrow-right. Инструкция по добавлению своего класса элементу.
- Укажи настройках ниже id блока с элементами, id блока со стрелками и величину сдвига при клике на стрелку.
- Скопируй сгенерированный код и вставь на свой сайт. Памятка по вставке кода.
Взято отсюда: https://romanyu.ru/skroll-strelki
<!--https://romanyu.ru/skroll-strelki-->
<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>
Горизонтальный скролл кнопкой мыши
Hiden - параметр зероблока
<style>
#rec237886038 {
cursor: -webkit-grab;
cursor: grab;
}
</style>
<script src='https://cdn.jsdelivr.net/npm/dragscroll@0.0.8/dragscroll.min.js'></script>
<script>
$('#rec237886038 .t396__artboard').addClass('dragscroll');
</script>
Меню
Модифицированные вариации меню
Как добавить любой скрипт на tilda. (Выявил сам, путем проб и ошибок)
Для каждого типа элементов предусмотрены свои открывающие теги в html.
Для кода HTML - это <script> </script>
Для кода CSS - это <style> </style>
Для div - ничего дополнительно прописывать не нужно
Для JS - это <script> </script>
Чтобы код работал в рамках зероблок и мог подвергаться изменениям - расположение, изменение в слоях и тд - этот код нужно прописать в едином окне Зероблока.
Для кода HTML - это <script> </script>
Для кода CSS - это <style> </style>
Для div - ничего дополнительно прописывать не нужно
Для JS - это <script> </script>
Чтобы код работал в рамках зероблок и мог подвергаться изменениям - расположение, изменение в слоях и тд - этот код нужно прописать в едином окне Зероблока.
Как добавить любой готовый cкрипт c Codepen на tilda
В редакотре Codepen мы видим 3 блока кода: HTML, CSS и JS
Библиотеки находятся в Settings - JS
Код-памятка
<script src="Библиотека1"></script>
<script src="Библиотека2"></script>
<script>
$("#имя").appendTo('#rec123456789 .t396__filter');
</script>
<style>
Вставляем CSS стили
</style>
<script>
/* Вставляем лицензию (если нужно) */
Основной код - JS
</script>
Теория:
Для каждого типа элементов предусмотрены свои открывающие теги в html.
Для кода HTML - это <script> </script>
Для кода CSS - это <style> </style>
Для div - ничего дополнительно прописывать не нужно
Для JS - это <script> </script>
Для библиотеки скриптов - это <script src="Библиотека1"></script>
Чтобы код работал в рамках зероблок и мог подвергаться изменениям - расположение, изменение в слоях и тд - этот код нужно прописать в едином окне Зероблока убрав скрипт:
<script>
$("#имя").appendTo('#rec123456789 .t396__filter');
</script>
Библиотеки находятся в Settings - JS
Код-памятка
<script src="Библиотека1"></script>
<script src="Библиотека2"></script>
<script>
$("#имя").appendTo('#rec123456789 .t396__filter');
</script>
<style>
Вставляем CSS стили
</style>
<script>
/* Вставляем лицензию (если нужно) */
Основной код - JS
</script>
- Создаем зероблок, убираем все лишнее, убираем фон
- Добавляем код отдельным блоком, вставляе код из памятки
- Вставляем библиотеку JS в "_"
- Код HTML вставляем без каких-либо других тегов на следующей строке после библиотек
- Вставляем CSS стили в <style> </style>
- Вставляем лицензию - Находится в Change View - Details View - В самом низу страницы, копируем и вставляем в /* _*/
- И ниже вставляем JS код
- Далее выше в поле $("#имя").appendTo('#rec123456789 .t396__filter'); - меняем id блока на наш, меняем значение #имя на тот, что прописан в "div id"
Теория:
Для каждого типа элементов предусмотрены свои открывающие теги в html.
Для кода HTML - это <script> </script>
Для кода CSS - это <style> </style>
Для div - ничего дополнительно прописывать не нужно
Для JS - это <script> </script>
Для библиотеки скриптов - это <script src="Библиотека1"></script>
Чтобы код работал в рамках зероблок и мог подвергаться изменениям - расположение, изменение в слоях и тд - этот код нужно прописать в едином окне Зероблока убрав скрипт:
<script>
$("#имя").appendTo('#rec123456789 .t396__filter');
</script>
Боковой виджет с кнопками используя ZeroBlock и анимацию Step-By-Step
1. Подготовили картинки наших кнопок 3 шт.
2. Создали ZeroBlock. Что сделали в Zero:
- Задали параметр Overflow: visible
- Создали 3 элемента Image ширина 270px, радиус скругления 30px
- Задали картинкам ссылки на popUp окна
- Выставили им привязку - Window Container, X-Right, Y-Center.
- Сместили их вправо на 210px, для того чтобы была видна только иконка в итоге
- Задали им анимацию: onHover, Duration 1.5 , MoveX -205, Easing - bounceFin
- Высоту ZeroBlock задали 200px
3. Добавили на страницу код в блок Другое►Т123
- Заменили ID Zero на свой #rec62823638
<style>
/*Задаём ширину для Zero*/
.floating {
/*По ширине наших кнопок*/
width: 0px;
}
/*Выставляем фиксированную позицию на экране и номер слоя выше остальных*/
.fixed {
position: fixed;
/*Задаём расположение по вертикали*/
top: 40%;
/*Задаём номер слоя*/
z-index: 9999;
}
@media screen and (max-width: 640px){
.fixed {
top: 250px;
}
}
</style>
<script>
$(document).ready(function(){
//Нужно заменить на ID Zero выполняющего роль виджета//Добавляем класс с шириной и фиксацией
$("#rec62823638").addClass('floating fixed');
});
</script>
Взято отсюда: https://mo-ti.ru/zerovidjet
2. Создали ZeroBlock. Что сделали в Zero:
- Задали параметр Overflow: visible
- Создали 3 элемента Image ширина 270px, радиус скругления 30px
- Задали картинкам ссылки на popUp окна
- Выставили им привязку - Window Container, X-Right, Y-Center.
- Сместили их вправо на 210px, для того чтобы была видна только иконка в итоге
- Задали им анимацию: onHover, Duration 1.5 , MoveX -205, Easing - bounceFin
- Высоту ZeroBlock задали 200px
3. Добавили на страницу код в блок Другое►Т123
- Заменили ID Zero на свой #rec62823638
<style>
/*Задаём ширину для Zero*/
.floating {
/*По ширине наших кнопок*/
width: 0px;
}
/*Выставляем фиксированную позицию на экране и номер слоя выше остальных*/
.fixed {
position: fixed;
/*Задаём расположение по вертикали*/
top: 40%;
/*Задаём номер слоя*/
z-index: 9999;
}
@media screen and (max-width: 640px){
.fixed {
top: 250px;
}
}
</style>
<script>
$(document).ready(function(){
//Нужно заменить на ID Zero выполняющего роль виджета//Добавляем класс с шириной и фиксацией
$("#rec62823638").addClass('floating fixed');
});
</script>
Взято отсюда: https://mo-ti.ru/zerovidjet
Боковое фиксированное меню
Создаём кнопку в ZeroBlock и при помощи скрипта делаем её фиксированной
Заменить #rec47821265' - ID ZeroBlock
Скрипт вставляем в блок ДРУГОЕ►T123
<style>
/*Задаём ширину для Zero*/
.floating {
width: 350px;
}
/*Выставляем фиксированную позицию на экране и номер слоя выше остальных*/
.fixed {
position: fixed;
/*Задаём отступ снизу*/
bottom: 50px;
z-index: 9999;
}
</style>
<script>
$(document).ready(function(){
/* нужно заменить на код блока Zero выполняющего роль меню */var blockMenuID = '#rec47821265';
//Добавляем класс с шириной и фиксацией
$(blockMenuID).addClass('floating fixed');
});
</script>
Взято отсюда: https://mo-ti.ru/zerobutton
Заменить #rec47821265' - ID ZeroBlock
Скрипт вставляем в блок ДРУГОЕ►T123
<style>
/*Задаём ширину для Zero*/
.floating {
width: 350px;
}
/*Выставляем фиксированную позицию на экране и номер слоя выше остальных*/
.fixed {
position: fixed;
/*Задаём отступ снизу*/
bottom: 50px;
z-index: 9999;
}
</style>
<script>
$(document).ready(function(){
/* нужно заменить на код блока Zero выполняющего роль меню */var blockMenuID = '#rec47821265';
//Добавляем класс с шириной и фиксацией
$(blockMenuID).addClass('floating fixed');
});
</script>
Взято отсюда: https://mo-ti.ru/zerobutton
Простая привязка хедера к верхнему краю
<style>#rec1234567 {
width: 100%;
position: fixed;
top: 0;
z-index: 9997;
}
</style>
width: 100%;
position: fixed;
top: 0;
z-index: 9997;
}
</style>
Меню второго уровня в Zero block по наведению
В основном меню укажите ссылку: #menuhover
По наведению на пункт с якорем #menuhover будет показываться меню второго уровня
<script>
$("document").ready(function() {
/* #rec207720047 — id Зеро блока (меню 1-го уровня, основной) */var mainMenuBlock = "#rec207720047";
var hoverLeave = $(mainMenuBlock).find(".t396__elem").not($("[href='#menuhover']").parent());
/* #rec130781742 — id Зеро блока (меню 2-го уровня, который будет всплывать) */var secondaryMenuBlock = "#rec207720048";
var menuArtboardHover = $(secondaryMenuBlock).find(".t396__artboard");
$("[href='#menuhover']").hover(function(e) {
e.preventDefault();
if(!menuArtboardHover.hasClass("open")) {
menuArtboardHover.addClass("open");
}
});
menuArtboardHover.mouseleave(function(e) {
e.preventDefault();
menuArtboardHover.removeClass("open");
});
$(hoverLeave).mouseenter(function(e) {
e.preventDefault();
menuArtboardHover.removeClass("open");
});
$(window).scroll(function(e) {
menuArtboardHover.removeClass("open");
});
});
</script>
<style>
/* #rec207720047 — id Зеро блока (меню 1-го уровня, основной) */
#rec207720047 {
width: 100%;
position: fixed;
top: 0;
z-index: 998;
}
/* #rec207720048 — id Zero блока (меню 2-го уровня, который будет всплывать) */
#rec207720048 .t396__artboard {
z-index: 997;
position: fixed;
margin: auto;
top: 130px; /* высота Zero блока (меню 1-го уровня, основной) */left: 0;
transition: all .4s ease;
pointer-events: none;
transform: translateY(-600px); /* сумма высот Zero блоков, которые играют роль меню (1-го и 2-го уровня) */justify-content: space-around;
box-shadow: 0 9px 9px 0 rgba(0, 0, 0, .09);
}
.open {
pointer-events: all !important;
transform: translateY(0px) !important;
}
</style>
Взято отсюда: https://roman-kosov.ru/zero-block-menu-onhover
Красивое меню для Tilda из Zero block
Создаем Zero block, задаем высоту 100%, накидываем в него элементы нашего меню, ссылки, украшалки и т.п. Элементы выравниваем относительно window container. Меню из примера имеет 700px ширину на десктопе, 500px на планшете и 100% на устройствах с шириной дисплея менее 640px. Я оставил возможность настраивать данные параметры, ниже расскажу как. Итак, чтобы не вылазить за поля меню поставьте линейку на отметке в 700px (и т.д., ну или ваши значения) или нарисуйте шейп и выравнивайте элементы по нему - так даже проще.
<!--Подключаем библиотеку стилей-->
<link href="https://style.anku.im/beauty_tilda_nav/nav.css" rel="stylesheet">
<!--Подключаем скрипт-->
<script src="https://style.anku.im/beauty_tilda_nav/nav.js"></script>
<!--Слой затемнения-->
<div class="NavOverlay"></div>
<!--Нижний слой (у меня желтый)-->
<div class="PreNavLayer"></div>
<!--Иконка меню-->
<div class="NavIconWrap TriggerAnKuNav any-link"><div class="NavIcon"><span></span><span></span><span></span><span></span><span></span><span></span></div>
</div>
<!--Тут замените id zero block на свой-->
<script>
$('#rec256188325').addClass('AnKuNavForTilda');
</script>
<!--это настройки меню-->
<style>:root {
--NavOverlayColor: rgba(0, 0, 0, 0.8); /*цвет слоя затемнения*/--PreNavBgColor: #fde51c; /*цвет подложки*/--BurgerColor: #000; /*цвет полосочек на иконке меню*/--BurgerActiveColor: #000; /*цвет полосочек на иконке меню в активном состоянии*/--NavIconWrapColor: #fff; /*цвет фона иконки меню*/--NavIconActiveWrapColor: #fde51c; /*цвет фона иконки меню в активном состоянии*/--NavTop: 20px; /*отступ иконки меню сверху*/--NavRight: 20px; /*отступ иконки меню справа*/--NavLeft:; /* отступ иконки меню слева / если меню справа - оставьте пустым*/
/*отступ иконки на мобильном*/
--NavTop480: 10px; /*отступ иконки меню сверху*/
--NavRight480: 10px; /*отступ иконки меню справа*/
--NavLeft480: ; /* отступ иконки меню слева / если меню справа - оставьте пустым*/
/*ширина меню на разных устройствах, брейкпоинты, как в zero block*/
--Nav_1920_Width: 700px; /*ширина на десктопе*/
--Nav_1200_Width: 500px; /*ширина на планшете*/
--Nav_960_Width: 100%; /*ширина на мелком планшете*/
--Nav_640_Width: 100%; /*ширина на мобилке в горизонтали*/
--Nav_480_Width: 100%; /*ширина на мобилке*/
/*это выезд меню, ставьте значения отрицательные ширине*/
--Nav_1920_Slide: -700px; /*на десктопе*/
--Nav_1200_Slide: -500px; /*на планшете*/
--Nav_960_Slide: -100%; /*на мелком планшете*/
--Nav_640_Slide: -100%; /*на мобилке в горизонтали*/
--Nav_480_Slide: -100%; /*на мобилке*/
}
</style>
Взято отсюда: https://anku.im/blog/beauty-nav-with-zero-block-on-tilda
Далее создаем T123, вставляем код из примера, заменяем id Zero block на свой, публикуем страницу, радуемся. стили и скрипт залил на хост, чтобы не удлинять страницы, кому нужен исходник - пишите, скину.
<!--Подключаем библиотеку стилей-->
<link href="https://style.anku.im/beauty_tilda_nav/nav.css" rel="stylesheet">
<!--Подключаем скрипт-->
<script src="https://style.anku.im/beauty_tilda_nav/nav.js"></script>
<!--Слой затемнения-->
<div class="NavOverlay"></div>
<!--Нижний слой (у меня желтый)-->
<div class="PreNavLayer"></div>
<!--Иконка меню-->
<div class="NavIconWrap TriggerAnKuNav any-link"><div class="NavIcon"><span></span><span></span><span></span><span></span><span></span><span></span></div>
</div>
<!--Тут замените id zero block на свой-->
<script>
$('#rec256188325').addClass('AnKuNavForTilda');
</script>
<!--это настройки меню-->
<style>:root {
--NavOverlayColor: rgba(0, 0, 0, 0.8); /*цвет слоя затемнения*/--PreNavBgColor: #fde51c; /*цвет подложки*/--BurgerColor: #000; /*цвет полосочек на иконке меню*/--BurgerActiveColor: #000; /*цвет полосочек на иконке меню в активном состоянии*/--NavIconWrapColor: #fff; /*цвет фона иконки меню*/--NavIconActiveWrapColor: #fde51c; /*цвет фона иконки меню в активном состоянии*/--NavTop: 20px; /*отступ иконки меню сверху*/--NavRight: 20px; /*отступ иконки меню справа*/--NavLeft:; /* отступ иконки меню слева / если меню справа - оставьте пустым*/
/*отступ иконки на мобильном*/
--NavTop480: 10px; /*отступ иконки меню сверху*/
--NavRight480: 10px; /*отступ иконки меню справа*/
--NavLeft480: ; /* отступ иконки меню слева / если меню справа - оставьте пустым*/
/*ширина меню на разных устройствах, брейкпоинты, как в zero block*/
--Nav_1920_Width: 700px; /*ширина на десктопе*/
--Nav_1200_Width: 500px; /*ширина на планшете*/
--Nav_960_Width: 100%; /*ширина на мелком планшете*/
--Nav_640_Width: 100%; /*ширина на мобилке в горизонтали*/
--Nav_480_Width: 100%; /*ширина на мобилке*/
/*это выезд меню, ставьте значения отрицательные ширине*/
--Nav_1920_Slide: -700px; /*на десктопе*/
--Nav_1200_Slide: -500px; /*на планшете*/
--Nav_960_Slide: -100%; /*на мелком планшете*/
--Nav_640_Slide: -100%; /*на мобилке в горизонтали*/
--Nav_480_Slide: -100%; /*на мобилке*/
}
</style>
Взято отсюда: https://anku.im/blog/beauty-nav-with-zero-block-on-tilda
Фильтрация с картинками
Создали основной блок управления в ZeroBlock
Добавили в него элементы для каждой карточки. Каждого по 9 штук
Image , Shape , Text , Button
Добавили 9 ZeroBLock с контентом
Добавили блок BF703, опубликовали и скрыли блок
В коде заменили:
//Прописываем класс к нашему таб-меню
$('#rec101355931').addClass('tabmenu');
//Прописываем наши скрытые блоки var hideblock = ["#rec101688753","#rec102181936","#rec102195870","#rec102215272","#rec102217024","#rec102218189","#rec102219950","#rec102224944","#rec102227380"];
<style>
/*Серый цвет для иконок*/
.tabmenu div[data-elem-type="image"] .tn-atom {
filter: grayscale(1);
opacity:0.5;
}
/*Плавность анимации для Shape*/
.tabmenu div[data-elem-type="shape"] {
transition: all 0.3s ease-in-out;
}
/*Класс активной иконки*/
.activeicon, .hovericon{
opacity:1!important;
filter: grayscale(0) !important;
}
/*Класс активного Shape*/
.activeshape, .hovershape{
margin-top: -20px;
}
</style>
<script>
$(document).ready(function() {
//Прописываем класс к нашему таб-меню
$('#rec101355931').addClass('tabmenu');
//Прописываем наши скрытые блокиvar hideblock = ["#rec101688753","#rec102181936","#rec102195870","#rec102215272","#rec102217024","#rec102218189","#rec102219950","#rec102224944","#rec102227380"];
//Добавляем классы к нашим скрытым блокам
$(hideblock[0]).addClass('tabcontent');var i = 0; var number = 0;
for(let i = 1; i < hideblock.length; i++){
$(hideblock[i]).addClass('tabcontent t400__off');};
//Эффект при наведении на вкладку
$('.tabmenu div[data-elem-type="button"]').hover(function(){
number = $('.tabmenu div[data-elem-type="button"]').index(this);
$('.tabmenu div[data-elem-type="image"]:eq('+number+') .tn-atom').addClass('hovericon');
$('.tabmenu div[data-elem-type="shape"]:eq('+number+')').addClass('hovershape');
}, function(){
$('.tabmenu div[data-elem-type="image"]:eq('+number+') .tn-atom').removeClass('hovericon');
$('.tabmenu div[data-elem-type="shape"]:eq('+number+')').removeClass('hovershape');
});
//Добавляем активную вкладку при загрузке страницы
$('.tabmenu div[data-elem-type="image"]:first .tn-atom').addClass('activeicon');
$('.tabmenu div[data-elem-type="shape"]:first').addClass('activeshape');
//При нажатии на вкладку
$('.tabmenu div[data-elem-type="button"]').click(function(e) {e.preventDefault();
//Вычисляем номер нашего таба
number = $('.tabmenu div[data-elem-type="button"]').index(this);
//Удаляем классы акивного состаяния
$('.tabmenu div[data-elem-type="image"] .tn-atom').removeClass('activeicon');
$('.tabmenu div[data-elem-type="shape"]').removeClass('activeshape');
//Делаем активным данную вкладку
$('.tabmenu div[data-elem-type="image"]:eq('+number+') .tn-atom').addClass('activeicon');
$('.tabmenu div[data-elem-type="shape"]:eq('+number+')').addClass('activeshape');
//Добавляем класс скрытия для контентных блоков
$('.tabcontent').addClass('t400__off');
//ПОказываем нужный контентый блок
$(hideblock[number]).removeClass('t400__off');
$('.t396').trigger('displayChanged');
t_lazyload_update();
});
});
</script>
Взято отсюда: https://mo-ti.ru/htabsection
Добавили в него элементы для каждой карточки. Каждого по 9 штук
Image , Shape , Text , Button
Добавили 9 ZeroBLock с контентом
Добавили блок BF703, опубликовали и скрыли блок
В коде заменили:
//Прописываем класс к нашему таб-меню
$('#rec101355931').addClass('tabmenu');
//Прописываем наши скрытые блоки var hideblock = ["#rec101688753","#rec102181936","#rec102195870","#rec102215272","#rec102217024","#rec102218189","#rec102219950","#rec102224944","#rec102227380"];
<style>
/*Серый цвет для иконок*/
.tabmenu div[data-elem-type="image"] .tn-atom {
filter: grayscale(1);
opacity:0.5;
}
/*Плавность анимации для Shape*/
.tabmenu div[data-elem-type="shape"] {
transition: all 0.3s ease-in-out;
}
/*Класс активной иконки*/
.activeicon, .hovericon{
opacity:1!important;
filter: grayscale(0) !important;
}
/*Класс активного Shape*/
.activeshape, .hovershape{
margin-top: -20px;
}
</style>
<script>
$(document).ready(function() {
//Прописываем класс к нашему таб-меню
$('#rec101355931').addClass('tabmenu');
//Прописываем наши скрытые блокиvar hideblock = ["#rec101688753","#rec102181936","#rec102195870","#rec102215272","#rec102217024","#rec102218189","#rec102219950","#rec102224944","#rec102227380"];
//Добавляем классы к нашим скрытым блокам
$(hideblock[0]).addClass('tabcontent');var i = 0; var number = 0;
for(let i = 1; i < hideblock.length; i++){
$(hideblock[i]).addClass('tabcontent t400__off');};
//Эффект при наведении на вкладку
$('.tabmenu div[data-elem-type="button"]').hover(function(){
number = $('.tabmenu div[data-elem-type="button"]').index(this);
$('.tabmenu div[data-elem-type="image"]:eq('+number+') .tn-atom').addClass('hovericon');
$('.tabmenu div[data-elem-type="shape"]:eq('+number+')').addClass('hovershape');
}, function(){
$('.tabmenu div[data-elem-type="image"]:eq('+number+') .tn-atom').removeClass('hovericon');
$('.tabmenu div[data-elem-type="shape"]:eq('+number+')').removeClass('hovershape');
});
//Добавляем активную вкладку при загрузке страницы
$('.tabmenu div[data-elem-type="image"]:first .tn-atom').addClass('activeicon');
$('.tabmenu div[data-elem-type="shape"]:first').addClass('activeshape');
//При нажатии на вкладку
$('.tabmenu div[data-elem-type="button"]').click(function(e) {e.preventDefault();
//Вычисляем номер нашего таба
number = $('.tabmenu div[data-elem-type="button"]').index(this);
//Удаляем классы акивного состаяния
$('.tabmenu div[data-elem-type="image"] .tn-atom').removeClass('activeicon');
$('.tabmenu div[data-elem-type="shape"]').removeClass('activeshape');
//Делаем активным данную вкладку
$('.tabmenu div[data-elem-type="image"]:eq('+number+') .tn-atom').addClass('activeicon');
$('.tabmenu div[data-elem-type="shape"]:eq('+number+')').addClass('activeshape');
//Добавляем класс скрытия для контентных блоков
$('.tabcontent').addClass('t400__off');
//ПОказываем нужный контентый блок
$(hideblock[number]).removeClass('t400__off');
$('.t396').trigger('displayChanged');
t_lazyload_update();
});
});
</script>
Взято отсюда: https://mo-ti.ru/htabsection
Выпадающее меню с фото из связки блоков ME301+FT301 на экранах >980px в Tilda
Создали меню ME301 с 3-мя пунктами и режимом статика
В коде изменили ID блоков
#rec136982174 - меню ME301
#rec136968790 - FT301
#rec137341973 - FT301
#rec137341976 - FT301
Ссылки на фото
https://static.tildacdn.com/tild6631-3535-4565-a336-613732363239/1010Men_Flyout_nocop.jpg
https://static.tildacdn.com/tild3963-6361-4464-b733-363832313730/1010Women_Flyout_noc.jpg
https://static.tildacdn.com/tild3534-3833-4631-a331-346535636166/20190924-flyout-home.jpg
<style>
.t228__maincontainer {
background: #000;
}
.t228.t228__positionstatic {
position: relative;
}
.t228 {
position: relative;
}
/*Настройка высоты вкладок */
.t228__list_item {
height: 84px;
display: inline-block !important;
padding: 0 15px !important;
vertical-align: bottom;
}
/*Настройка вкладок */
.t228 .t-menu__link-item {
height: inherit;
display: table-cell !important;
vertical-align: middle;
}
/*Цвет вкладок при наведении */
.t228__list_item:hover {
background:#ffffff;
-webkit-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.t228__list_item:hover .t-menu__link-item{
color:#000 !important;
}
/*Настройка для блока FT301 */
[data-record-type="344"] {
position: absolute;
width: 100%;
z-index: -1;
left: 0;
-ms-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-o-transform: translateY(-100%);
-moz-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
/*Появление меню при наведении на вкладку */
.t228__list_item:hover .mainmenu {
display:block !important;
-ms-transform: translateY(0%);
-webkit-transform: translateY(0%);
-o-transform: translateY(0%);
-moz-transform: translateY(0%);
transform: translateY(0%);
}.t344__col.t-col.t-col_3 {
max-width: 180px;
border-left: 1px solid #e2e2e2;
margin-left: 0px;
padding-left: 20px;
}
img.t344img {
width: 250px;
float: right;
}
.t344 li {
transition: ease-in-out 0.5s;
}
/*Эффекты при наведении*/
.t344 li:hover {
color: #000; /*Цвет текста*/padding-left: 5px; /*Сдвиг вправо*/border-left: 3px solid #000; /*Левая граница*/cursor:pointer;
}
@media screen and (max-width: 1200px){
.t344__col.t-col_3 {
max-width: 140px !important;
}
}
</style>
<script>
$(document).ready(function(){
//Добавляем классы к блокам FT301
$('[data-record-type="344"]').addClass('mainmenu');
//Добавляем блоки FT301 к соответствующим вкладкам в меню с указанием ID этого менюfor(let i = 0; i < $(".mainmenu").length; i++){
$('.mainmenu:eq('+i+')').appendTo('#rec136982174 .t228__list_item:eq('+i+')');
};
//Добавляем фото
$('#rec136968790 .t-container').append('<img src="https://static.tildacdn.com/tild6631-3535-4565-a336-613732363239/1010Men_Flyout_nocop.jpg" class="t344img" imgfield="img">');
$('#rec137341973 .t-container').append('<img src="https://static.tildacdn.com/tild3963-6361-4464-b733-363832313730/1010Women_Flyout_noc.jpg" class="t344img" imgfield="img">');
$('#rec137341976 .t-container').append('<img src="https://static.tildacdn.com/tild3534-3833-4631-a331-346535636166/20190924-flyout-home.jpg" class="t344img" imgfield="img">');
});
</script>
Взято отсюда: https://mo-ti.ru/me301ft301menu
2
Создали 3 блока FT3014
Добавили код на страницу в блок Другое - Т123В коде изменили ID блоков
#rec136982174 - меню ME301
#rec136968790 - FT301
#rec137341973 - FT301
#rec137341976 - FT301
Ссылки на фото
https://static.tildacdn.com/tild6631-3535-4565-a336-613732363239/1010Men_Flyout_nocop.jpg
https://static.tildacdn.com/tild3963-6361-4464-b733-363832313730/1010Women_Flyout_noc.jpg
https://static.tildacdn.com/tild3534-3833-4631-a331-346535636166/20190924-flyout-home.jpg
<style>
.t228__maincontainer {
background: #000;
}
.t228.t228__positionstatic {
position: relative;
}
.t228 {
position: relative;
}
/*Настройка высоты вкладок */
.t228__list_item {
height: 84px;
display: inline-block !important;
padding: 0 15px !important;
vertical-align: bottom;
}
/*Настройка вкладок */
.t228 .t-menu__link-item {
height: inherit;
display: table-cell !important;
vertical-align: middle;
}
/*Цвет вкладок при наведении */
.t228__list_item:hover {
background:#ffffff;
-webkit-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
.t228__list_item:hover .t-menu__link-item{
color:#000 !important;
}
/*Настройка для блока FT301 */
[data-record-type="344"] {
position: absolute;
width: 100%;
z-index: -1;
left: 0;
-ms-transform: translateY(-100%);
-webkit-transform: translateY(-100%);
-o-transform: translateY(-100%);
-moz-transform: translateY(-100%);
transform: translateY(-100%);
-webkit-transition: all 0.6s ease-in-out;
transition: all 0.6s ease-in-out;
}
/*Появление меню при наведении на вкладку */
.t228__list_item:hover .mainmenu {
display:block !important;
-ms-transform: translateY(0%);
-webkit-transform: translateY(0%);
-o-transform: translateY(0%);
-moz-transform: translateY(0%);
transform: translateY(0%);
}.t344__col.t-col.t-col_3 {
max-width: 180px;
border-left: 1px solid #e2e2e2;
margin-left: 0px;
padding-left: 20px;
}
img.t344img {
width: 250px;
float: right;
}
.t344 li {
transition: ease-in-out 0.5s;
}
/*Эффекты при наведении*/
.t344 li:hover {
color: #000; /*Цвет текста*/padding-left: 5px; /*Сдвиг вправо*/border-left: 3px solid #000; /*Левая граница*/cursor:pointer;
}
@media screen and (max-width: 1200px){
.t344__col.t-col_3 {
max-width: 140px !important;
}
}
</style>
<script>
$(document).ready(function(){
//Добавляем классы к блокам FT301
$('[data-record-type="344"]').addClass('mainmenu');
//Добавляем блоки FT301 к соответствующим вкладкам в меню с указанием ID этого менюfor(let i = 0; i < $(".mainmenu").length; i++){
$('.mainmenu:eq('+i+')').appendTo('#rec136982174 .t228__list_item:eq('+i+')');
};
//Добавляем фото
$('#rec136968790 .t-container').append('<img src="https://static.tildacdn.com/tild6631-3535-4565-a336-613732363239/1010Men_Flyout_nocop.jpg" class="t344img" imgfield="img">');
$('#rec137341973 .t-container').append('<img src="https://static.tildacdn.com/tild3963-6361-4464-b733-363832313730/1010Women_Flyout_noc.jpg" class="t344img" imgfield="img">');
$('#rec137341976 .t-container').append('<img src="https://static.tildacdn.com/tild3534-3833-4631-a331-346535636166/20190924-flyout-home.jpg" class="t344img" imgfield="img">');
});
</script>
Взято отсюда: https://mo-ti.ru/me301ft301menu
Простые кастомные вкладки (фильтрация) в Zero block
Представляю простой, минималистичный и надежный скрипт, с помощью которого можно сделать неограниченное количество вкладок в Zero блоке.
Это не шутка. Вы можете уменьшить кнопки, расположить их в 5 рядов. Меняйте контент местами как хотите — это никак не повлияет на работу скрипта.
Создайте хоть 100 вкладок, и этот маленький скрипт будет ими управлять.
Наслаждайтесь :)
Инструкция по установке проста:
1. Создаем 3 кнопки и задаем всем кнопкам единый класс tbbtn. Теперь каждой кнопке последовательно задаем ссылку с номером вкладки — #tab1, #tab2..#tabN
2. Создаем блоки контента, задаем каждому элементу вкладки класс tab1, tab2..tabN. Элементы могут быть любые: текст, изображение (Lazyload: Off), шейп, форма, кнопка. Количество элементов для каждой вкладки не ограниченно.
3. Добавляем блок HTML-код — T123 и вставляем в него код
4. Публикуем. Profit =)
<style>
/* цвет активной кнопки */
.tbactive {background: linear-gradient(348deg, #dd54ff, #ff8686, #ffd255)}
</style>
<script>
$('[class*="tab"]:not(.tab1)').hide()
$('[href="#tab1"]').addClass('tbactive')
$('.tbbtn').each(function() {
$(this).find('a').click(function() {
$('.tbbtn a').removeClass('tbactive')
$(this).addClass('tbactive')
var tab = $(this).attr('href').slice(1)
$('.' + tab + '').fadeIn(200)
$('[class*="tab"]:not(.' + tab + ')').fadeOut(200)
})
})
</script>
Это не шутка. Вы можете уменьшить кнопки, расположить их в 5 рядов. Меняйте контент местами как хотите — это никак не повлияет на работу скрипта.
Создайте хоть 100 вкладок, и этот маленький скрипт будет ими управлять.
Наслаждайтесь :)
Инструкция по установке проста:
1. Создаем 3 кнопки и задаем всем кнопкам единый класс tbbtn. Теперь каждой кнопке последовательно задаем ссылку с номером вкладки — #tab1, #tab2..#tabN
2. Создаем блоки контента, задаем каждому элементу вкладки класс tab1, tab2..tabN. Элементы могут быть любые: текст, изображение (Lazyload: Off), шейп, форма, кнопка. Количество элементов для каждой вкладки не ограниченно.
3. Добавляем блок HTML-код — T123 и вставляем в него код
4. Публикуем. Profit =)
<style>
/* цвет активной кнопки */
.tbactive {background: linear-gradient(348deg, #dd54ff, #ff8686, #ffd255)}
</style>
<script>
$('[class*="tab"]:not(.tab1)').hide()
$('[href="#tab1"]').addClass('tbactive')
$('.tbbtn').each(function() {
$(this).find('a').click(function() {
$('.tbbtn a').removeClass('tbactive')
$(this).addClass('tbactive')
var tab = $(this).attr('href').slice(1)
$('.' + tab + '').fadeIn(200)
$('[class*="tab"]:not(.' + tab + ')').fadeOut(200)
})
})
</script>
SEO
Модификации, способствующие продвижению
Большой бейджик страницы в telegram
- Скопируй этот код и вставь в head своего сайта. Для этого открой: «Настройки сайта» → «Еще» → «HTML-код для вставки внутрь head».
- Обнови ссылку в telegram-боте @WebpageBot, чтобы увидеть изменения.
<meta name="twitter:card" content="summary_large_image"/>
Кнопки
Модификации для кнопок
Кнопка с градиентом в ZeroBlock
Создали ZeroBlock
Добавили в него элемент Button/Кнопка и присвоили ей ссылку класс aboutme ( или ссылку #aboutme)
Добавили на страницу код в блок ДРУГОЕ►Т123
Цвета можно настроить в этой строке
background-image: linear-gradient(45deg , #FFD115 60%, #ff5959);
45deg - угол направления градиента
Ссылку можно написать свою!!
<style>
/*Эффект для кнопки*/
.aboutme .tn-atom {
background-image: linear-gradient(45deg , #FFD115 60%, #ff5959);
box-shadow: 0 16px 32px 0 rgba(255, 141, 0, 0.35);
background-position: 100% 0 !important;
background-size: 200% 200%;
transition: all 0.5s ease-in-out !important;
}
/*Эффект для кнопки*/
.aboutme .tn-atom:hover {
box-shadow: 0 0 0 0 rgba(0,40,120,0);
background-position: 0 0 !important;
}
</style>
Библиотека для примера со ссылкой
<style>
/*Эффект для кнопки*/
[href='#aboutme'] {
background-image: linear-gradient(45deg , #FFD115 60%, #ff5959);
box-shadow: 0 16px 32px 0 rgba(255, 141, 0, 0.35);
background-position: 100% 0 !important;
background-size: 200% 200%;
transition: all 0.5s ease-in-out !important;
}
/*Эффект для кнопки*/
[href='#aboutme']:hover {
box-shadow: 0 0 0 0 rgba(0,40,120,0);
background-position: 0 0 !important;
}
</style>
Кастомная кнопка в ZeroBlock
Создали ZeroBlock и добавили в него элемент Button/Кнопка
Настроили эту кнопку:
- убрали фон, радиус, надпись
- добавили белую границу в 1px
- добавили тень
- задали ссылку #mybuttonbg
Создали элемент Image с иконкой вертолёта и разместили его поверх кнопки
Создали элементы Text и добавили поверх кнопки
Затем создали ещё одну кнопку в размер предыдущей и сделали её полностью прозрачной и без границ. Задали ей ссылку #mybutton
(можно любую свою ссылку)
. И наложили эту кнопку поверх первой и нашего контента (иконки и текста). Получился такой бургер кнопка-контент-кнопка
Затем добавили на страницу код в блок Другое►Т123
<style>
/*Эффект при наведении*/.effbtn{
/*Цвет границы*/
border-color: #007bff !important;
/*Ширина левой границы*/border-left-width: 340px !important;
/*Размер тени*/box-shadow: 0px 5px 28px 0px rgba(0,0,0,0.2) !important;
}
/*Время анимации и вид*/
.noeffbtn{
transition: all 0.8s ease-in-out !important;
}
</style>
<script>
//Добавляем класс состояние без эффекта к обеим кнопкам
$('[href="#mybuttonbg"] , [href="#mybutton"]').addClass('noeffbtn');
//При наведении на верхнюю кнопку
$("[href='#mybutton']").hover(function(){
//Добавляем к нижней кнопе класс с анимацией
$('[href="#mybuttonbg"]').addClass('effbtn');
},function(){
//Убираем от нижней кнопки класс с анимацией
$('[href="#mybuttonbg"]').removeClass('effbtn');
});
</script>
Взято отсюда: https://mo-ti.ru/mybutton
Настроили эту кнопку:
- убрали фон, радиус, надпись
- добавили белую границу в 1px
- добавили тень
- задали ссылку #mybuttonbg
Создали элемент Image с иконкой вертолёта и разместили его поверх кнопки
Создали элементы Text и добавили поверх кнопки
Затем создали ещё одну кнопку в размер предыдущей и сделали её полностью прозрачной и без границ. Задали ей ссылку #mybutton
(можно любую свою ссылку)
. И наложили эту кнопку поверх первой и нашего контента (иконки и текста). Получился такой бургер кнопка-контент-кнопка
Затем добавили на страницу код в блок Другое►Т123
<style>
/*Эффект при наведении*/.effbtn{
/*Цвет границы*/
border-color: #007bff !important;
/*Ширина левой границы*/border-left-width: 340px !important;
/*Размер тени*/box-shadow: 0px 5px 28px 0px rgba(0,0,0,0.2) !important;
}
/*Время анимации и вид*/
.noeffbtn{
transition: all 0.8s ease-in-out !important;
}
</style>
<script>
//Добавляем класс состояние без эффекта к обеим кнопкам
$('[href="#mybuttonbg"] , [href="#mybutton"]').addClass('noeffbtn');
//При наведении на верхнюю кнопку
$("[href='#mybutton']").hover(function(){
//Добавляем к нижней кнопе класс с анимацией
$('[href="#mybuttonbg"]').addClass('effbtn');
},function(){
//Убираем от нижней кнопки класс с анимацией
$('[href="#mybuttonbg"]').removeClass('effbtn');
});
</script>
Взято отсюда: https://mo-ti.ru/mybutton
Добавление иконки в кнопку
<style>.tn-elem__1659904881515498678064 .tn-atom:after {
content: '';
background-image: url(https://static.tildacdn.com/tild3634-3832-4331-a631-353965353139/oldtypicalphone.svg);
width: 22px;
height: 22px;
margin-left: 15px;
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
vertical-align: middle;
position: relative;
top: -3px;
}
.tn-elem__1659904881515498933081 .tn-atom:before {
content: '';
background-image: url(https://static.tildacdn.com/tild3361-3234-4639-a235-646162666338/okmark.svg);
width: 22px;
height: 22px;
margin-right: 15px;
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
vertical-align: middle;
position: relative;
top: -3px;
}
content: '';
background-image: url(https://static.tildacdn.com/tild3634-3832-4331-a631-353965353139/oldtypicalphone.svg);
width: 22px;
height: 22px;
margin-left: 15px;
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
vertical-align: middle;
position: relative;
top: -3px;
}
.tn-elem__1659904881515498933081 .tn-atom:before {
content: '';
background-image: url(https://static.tildacdn.com/tild3361-3234-4639-a235-646162666338/okmark.svg);
width: 22px;
height: 22px;
margin-right: 15px;
display: inline-block;
background-size: cover;
background-repeat: no-repeat;
vertical-align: middle;
position: relative;
top: -3px;
}
</style>
Взято отсюда: https://mo-ti.ru/button-icon-svg
Работа с видео
Разные вариации использования видео-контента
Добавить video в ZeroBlock и запускать его при наведении
Создали ZeroBlock и добавили в него элемент HTML
В этот элемент вставили первый код
В этом коде указали ссылку на наш mp4 файл (не youtube, не vimeo)
https://310401.selcdn.ru/MIXED/Mahmut-Orhan-Without_You.mp4
(как добавлять видео)
И ссылку на обложку
https://static.tildacdn.com/tild6565-6530-4131-a265-376661643334/buray-mecnun-mahmut-.jpg
И ссылку на кнопку https://yandex.ru
Добавили второй код в блок Другое - Т123
<div class="videowrapper">
<video width="100%" height="100%" webkit-playsinline="" playsinline="" loop="" muted="" ><source src="https://310401.selcdn.ru/MIXED/Mahmut-Orhan-Without_You.mp4" type="video/mp4"></video>
<div class="bg_image" style="background-image:url(https://static.tildacdn.com/tild6565-6530-4131-a265-376661643334/buray-mecnun-mahmut-.jpg)"></div>
<div class="video-btn"><a href="https://yandex.ru" target="_blank"><div>See more > </div></a></div>
</div>
<style>
.videowrapper {
position: relative;
overflow: hidden;
}
.videowrapper,
.tn-atom.tn-atom__html {
width: inherit;
height: inherit;
}
.bg_image {
position: absolute;
top: 0;
left: 0;
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
pointer-events: none;
transition: all 0.2s;
}
.video-btn {
position: absolute;
background-color: rgb(0 0 0 / 70%);
width: 100%;
height: 40px;
display: flex;
align-items: center;
box-sizing: border-box;
bottom: 0;
left: 0;
transition: all 0.2s;
transform: translateY(100%);
backdrop-filter: invert(1);
}
.video-btn a, .video-btn div {
width: inherit;
height: inherit;
}
.video-btn div {
display: flex;
align-items: center;
padding-left: 20px;
}
.video-btn div {
transition: all 0.2s 0.2s;
transform: translateY(100%);
}
.videowrapper:hover .video-btn div {
transform: translateY(0);
}
.video-btn a {
font-family: 'Open Sans',Arial,sans-serif;
font-weight: 300;
color: #fff !important;
font-size: 16px;
}
.videowrapper:hover .video-btn {
transform: translateY(0);
}
.videowrapper:hover .bg_image {opacity:0}
video {object-fit: cover}
</style>
<script>
$(document).ready(function(){
$(document).on('mouseover mouseenter touchstart touchmove click', '.videowrapper', function(){
$(this).find('video').trigger('play');
let video = $(this).find('video')[0];
let videoload = setInterval(function() {
if ( video.readyState === 4 ) {
$('.vload .tn-atom').text('start');
clearInterval(videoload);
};
}, 50);
});
$(document).on('mouseleave', '.videowrapper', function(){
$(this).find('video').trigger('pause');
});
});
</script>
В этот элемент вставили первый код
В этом коде указали ссылку на наш mp4 файл (не youtube, не vimeo)
https://310401.selcdn.ru/MIXED/Mahmut-Orhan-Without_You.mp4
(как добавлять видео)
И ссылку на обложку
https://static.tildacdn.com/tild6565-6530-4131-a265-376661643334/buray-mecnun-mahmut-.jpg
И ссылку на кнопку https://yandex.ru
Добавили второй код в блок Другое - Т123
<div class="videowrapper">
<video width="100%" height="100%" webkit-playsinline="" playsinline="" loop="" muted="" ><source src="https://310401.selcdn.ru/MIXED/Mahmut-Orhan-Without_You.mp4" type="video/mp4"></video>
<div class="bg_image" style="background-image:url(https://static.tildacdn.com/tild6565-6530-4131-a265-376661643334/buray-mecnun-mahmut-.jpg)"></div>
<div class="video-btn"><a href="https://yandex.ru" target="_blank"><div>See more > </div></a></div>
</div>
+ еще код
<style>
.videowrapper {
position: relative;
overflow: hidden;
}
.videowrapper,
.tn-atom.tn-atom__html {
width: inherit;
height: inherit;
}
.bg_image {
position: absolute;
top: 0;
left: 0;
background-size: cover;
background-position: center;
width: 100%;
height: 100%;
pointer-events: none;
transition: all 0.2s;
}
.video-btn {
position: absolute;
background-color: rgb(0 0 0 / 70%);
width: 100%;
height: 40px;
display: flex;
align-items: center;
box-sizing: border-box;
bottom: 0;
left: 0;
transition: all 0.2s;
transform: translateY(100%);
backdrop-filter: invert(1);
}
.video-btn a, .video-btn div {
width: inherit;
height: inherit;
}
.video-btn div {
display: flex;
align-items: center;
padding-left: 20px;
}
.video-btn div {
transition: all 0.2s 0.2s;
transform: translateY(100%);
}
.videowrapper:hover .video-btn div {
transform: translateY(0);
}
.video-btn a {
font-family: 'Open Sans',Arial,sans-serif;
font-weight: 300;
color: #fff !important;
font-size: 16px;
}
.videowrapper:hover .video-btn {
transform: translateY(0);
}
.videowrapper:hover .bg_image {opacity:0}
video {object-fit: cover}
</style>
<script>
$(document).ready(function(){
$(document).on('mouseover mouseenter touchstart touchmove click', '.videowrapper', function(){
$(this).find('video').trigger('play');
let video = $(this).find('video')[0];
let videoload = setInterval(function() {
if ( video.readyState === 4 ) {
$('.vload .tn-atom').text('start');
clearInterval(videoload);
};
}, 50);
});
$(document).on('mouseleave', '.videowrapper', function(){
$(this).find('video').trigger('pause');
});
});
</script>
Как сделать видеофон для ZeroBlock для Tilda
Вставляем видеофон в ZeroBlock с автовоспроизведением и отключенным звуком.
1. Добавляем ZeroBlock (высота Window Container Height - 100%)
2. Добавляем блок CR01 (добавляем в него видеофон, высота 100vh)
3. Добавляем скрипт и прописываем свои ID
Замените:
#recXXXXXXXXX - это ID блока CR01
#recYYYYYYYYY - это ID ZeroBlock
Скрипт добавляется в блок ДРУГОЕ►Т123
<script>
$('#recXXXXXXX').appendTo('#recYYYYYYY .t396__carrier');
</script>
1. Добавляем ZeroBlock (высота Window Container Height - 100%)
2. Добавляем блок CR01 (добавляем в него видеофон, высота 100vh)
3. Добавляем скрипт и прописываем свои ID
Замените:
#recXXXXXXXXX - это ID блока CR01
#recYYYYYYYYY - это ID ZeroBlock
Скрипт добавляется в блок ДРУГОЕ►Т123
<script>
$('#recXXXXXXX').appendTo('#recYYYYYYY .t396__carrier');
</script>
Другое
Остальные модификации
Смещение при переходе на якорную ссылку для 5-ти разрешений
Работает, если на сайте используется блок T173 «Якорная ссылка». Используй смещение, если на сайте есть фиксированное меню и при этом высота меню отличается на различных разрешениях. Тогда меню не будет перекрывать контент, когда пользователь перешел по якорной ссылке.
<!-- https://romanyu.ru/smeshchenie-yakornaya-ssylka -->
<style>
[data-record-type="215"] {
/* Укажи величину смещения для разрешения больше 1200px */top: -160px;
position: relative;
}
@media (max-width: 1199px) {
[data-record-type="215"] {
/* Укажи величину смещения для разрешения 961-1200px */top: -110px;
position: relative;
}
}
@media (max-width: 959px) {
[data-record-type="215"] {
/* Укажи величину смещения для разрешения 641-960px */top: -110px;
position: relative;
}
}
@media (max-width: 639px) {
[data-record-type="215"] {
/* Укажи величину смещения для разрешения 481-640px */top: -75px;
position: relative;
}
}
@media (max-width: 479px) {
[data-record-type="215"] {
/* Укажи величину смещения для разрешения меньше 480px */top: -75px;
position: relative;
}
}
</style>
Взято отсюда: https://romanyu.ru/smeshchenie-yakornaya-ssylka
Установка фонового звука с управлением
Создали ZeroBlock
Добавили в него 2 иконки и задали им классы playbgmusic и stopbgmusic
(отключили им LazyLoad)
Добавили код в блок Другое - Т123
В коде прописали ссылку на файл mp3
<audio id="bg-sound"><source src="https://310401.selcdn.ru/MIXED/caitlin-de-ville-attention.mp3">
</audio>
<script>
$(document).ready(function(){
myAudio=document.getElementById("bg-sound");
let fadeTime = 300;//Врямя смены иконок
myAudio.volume=0.4;//Задаём громкость
$(".stopbgmusic").hide();
$(".playbgmusic").click(function(e) {
myAudio.play(); $(this).fadeOut(fadeTime);
$(".stopbgmusic").fadeIn(fadeTime);
})
$(".stopbgmusic").click(function(e) {e.preventDefault();
myAudio.pause(); $(this).fadeOut(fadeTime);
$(".playbgmusic").fadeIn(fadeTime);
});
$("#bg-sound").on("ended", function() {
$(".stopbgmusic").fadeOut(fadeTime);
$(".playbgmusic").fadeIn(fadeTime);
});
});
</script>
<style>
div[class*="bgmusic"] {
cursor: pointer;
z-index:99 !important;
}
Добавили в него 2 иконки и задали им классы playbgmusic и stopbgmusic
(отключили им LazyLoad)
Добавили код в блок Другое - Т123
В коде прописали ссылку на файл mp3
<audio id="bg-sound"><source src="https://310401.selcdn.ru/MIXED/caitlin-de-ville-attention.mp3">
</audio>
<script>
$(document).ready(function(){
myAudio=document.getElementById("bg-sound");
let fadeTime = 300;//Врямя смены иконок
myAudio.volume=0.4;//Задаём громкость
$(".stopbgmusic").hide();
$(".playbgmusic").click(function(e) {
myAudio.play(); $(this).fadeOut(fadeTime);
$(".stopbgmusic").fadeIn(fadeTime);
})
$(".stopbgmusic").click(function(e) {e.preventDefault();
myAudio.pause(); $(this).fadeOut(fadeTime);
$(".playbgmusic").fadeIn(fadeTime);
});
$("#bg-sound").on("ended", function() {
$(".stopbgmusic").fadeOut(fadeTime);
$(".playbgmusic").fadeIn(fadeTime);
});
});
</script>
<style>
div[class*="bgmusic"] {
cursor: pointer;
z-index:99 !important;
}
</style>
Scrollbar для текстового блока в ZeroBlock
Создали ZeroBlock
Добавили текстовый элемент с длинным текстом
Добавили код на страницу
Код вставляется в блок ДРУГОЕ►Т123
В коде прописали значение нашего текста - идентификатор
data-elem-id="1543934895983"
<style>
/*Задаём высоту и появления скролла для нашего текстового блока*/.tn-elem[data-elem-id="1543934895983"] .tn-atom {
display: block !important;
height: 500px;
overflow-y: auto;
}
Добавили текстовый элемент с длинным текстом
Добавили код на страницу
Код вставляется в блок ДРУГОЕ►Т123
В коде прописали значение нашего текста - идентификатор
data-elem-id="1543934895983"
<style>
/*Задаём высоту и появления скролла для нашего текстового блока*/.tn-elem[data-elem-id="1543934895983"] .tn-atom {
display: block !important;
height: 500px;
overflow-y: auto;
}
</style>
Копирование текста по клику в Tilda
В данном примере копирование происходит при клике на элемент, содержащий в себе текст промо-кода, например кнопка или текст. Пример реализован в Zero block, для проверки результата добавил поле ввода.
// Пример 1
$('.example-1 .tn-atom').click(function() {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($('.example-1 .tn-atom').text()).select();
document.execCommand("copy");
$temp.remove();
$(this).text('Тест скопирован!'); //сообщение после клика, добавь свой текст
});
</script>
<style>.example-1 {
cursor:pointer;
}
Пример №2
Во втором примере копируется текст, который находится рядом с кнопкой. Пример так же реализован в Zero block. Единственный нюанс - сообщение о копировании вы создаете с помощью элемента текст и пошаговой анимации.
Данный пример реализовать так же достаточно просто, но добавилось пара движений в Zero block.
<script>
//Пример 2
$('.example-2-btn .tn-atom').attr('onclick', 'copytext2(".example-2-txt .tn-atom")');
function copytext2(el) {
var $tmp = $("<textarea>");
$("body").append($tmp);
$tmp.val($(el).text()).select();
document.execCommand("copy");
$tmp.remove();
}
</script>
<style>.example-2-btn {
cursor:pointer;
}
- Создаем Zero block;
- Добавляем элемент "Текст" или "Кнопка", который содержит в себе текст промо-кода, который мы собираемся копировать;
- Присваиваем данному элементу css class example-1 (у меня - это кнопка);
- Вставляем код на страницу в блок T123;
- Меняем текст об успешном копировании на свой (отмечен комментарием в коде).
// Пример 1
$('.example-1 .tn-atom').click(function() {
var $temp = $("<input>");
$("body").append($temp);
$temp.val($('.example-1 .tn-atom').text()).select();
document.execCommand("copy");
$temp.remove();
$(this).text('Тест скопирован!'); //сообщение после клика, добавь свой текст
});
</script>
<style>.example-1 {
cursor:pointer;
}
</style>
Пример №2
Во втором примере копируется текст, который находится рядом с кнопкой. Пример так же реализован в Zero block. Единственный нюанс - сообщение о копировании вы создаете с помощью элемента текст и пошаговой анимации.
Данный пример реализовать так же достаточно просто, но добавилось пара движений в Zero block.
- Создаем Zero block;
- Добавляем элемент "Текст" или "Кнопка", который содержит в себе текст промо-кода, который мы собираемся копировать;
- Присваиваем данному элементу css class example-2-txt;
- Создаём кнопку копирования;
- Присваиваем кнопке css class example-2-btn;
- Добавляем элемент с уведомлением о успешном копировании (у меня это кнопка);
- Добавляем пошаговую анимацию:
- - выбираем кнопку с промо-кодом, задаем в первом шаге прозрачность: 100%, время анимации: 0. Во втором шаге - время: 0, прозрачность: 0%. Анимация по клику, в качестве триггера выбираем кнопку копирования (п.4.);
- - выбираем кнопку или текст с сообщением об удачном копировании, в первом шаге анимации - время: 0, прозрачность: 0%, во втором шаге, время: 0, прозрачность: 100%. Анимация по клику, в качестве триггера так же выбираем кнопку копирования (п.4).
- Вставляем код на страницу в блок T123.
<script>
//Пример 2
$('.example-2-btn .tn-atom').attr('onclick', 'copytext2(".example-2-txt .tn-atom")');
function copytext2(el) {
var $tmp = $("<textarea>");
$("body").append($tmp);
$tmp.val($(el).text()).select();
document.execCommand("copy");
$tmp.remove();
}
</script>
<style>.example-2-btn {
cursor:pointer;
}
</style>
Ограничить высоту длинного popup и сделать в нём scrollbar
Создали BF503 на 8 колонок и добавили в него контент
Добавили код в блок Другое - Т123
<style>
.t390 .t-popup__container {
border-radius: 10px;
border: 2px solid #2f3848;
overflow: hidden;
}
.t390 .t-popup__container {
max-height: 65vh;
overflow-y: auto;
}
.t390__descr ul {
margin-top: 5px;
font-size: 12px;
}
.t390__descr ul span {
font-size: 12px !important;
}
.t390__title {
border-top: 1px solid rgb(255 255 255 / 20%);
border-bottom: 1px solid rgb(255 255 255 / 20%);
padding: 15px 0px;
margin: 35px 0px;
}
.t390__uptitle {
letter-spacing: 1px;
}
.t-popup__container:after {
content: "";
background-image: url(https://static.tildacdn.com/tild6432-3463-4365-a337-363436633835/Group_9_1.svg);
background-size: contain;
background-repeat: no-repeat;
width: 30px;
height: 30px;
position: absolute;
top: -40px;
right: 0px;
z-index: 999;
pointer-events: none;
}
.t390 .t-popup__close {
display: none;
}
.t390 ::-webkit-scrollbar-thumb {
background: #fff; /* цвет скроллбара */border-radius: 10px;
}
.t390 ::-webkit-scrollbar {
width: 5px;
background: #121127; /* цвет фона */
}
Добавили код в блок Другое - Т123
<style>
.t390 .t-popup__container {
border-radius: 10px;
border: 2px solid #2f3848;
overflow: hidden;
}
.t390 .t-popup__container {
max-height: 65vh;
overflow-y: auto;
}
.t390__descr ul {
margin-top: 5px;
font-size: 12px;
}
.t390__descr ul span {
font-size: 12px !important;
}
.t390__title {
border-top: 1px solid rgb(255 255 255 / 20%);
border-bottom: 1px solid rgb(255 255 255 / 20%);
padding: 15px 0px;
margin: 35px 0px;
}
.t390__uptitle {
letter-spacing: 1px;
}
.t-popup__container:after {
content: "";
background-image: url(https://static.tildacdn.com/tild6432-3463-4365-a337-363436633835/Group_9_1.svg);
background-size: contain;
background-repeat: no-repeat;
width: 30px;
height: 30px;
position: absolute;
top: -40px;
right: 0px;
z-index: 999;
pointer-events: none;
}
.t390 .t-popup__close {
display: none;
}
.t390 ::-webkit-scrollbar-thumb {
background: #fff; /* цвет скроллбара */border-radius: 10px;
}
.t390 ::-webkit-scrollbar {
width: 5px;
background: #121127; /* цвет фона */
}
</style>
Показ скрытых блоков по клику на любую кнопку или ссылку
Создали блок с кнопкой и задали ей ссылку #showmore
Блокам, которые нужно скрыть/показать - задали класс uc-showmore
Добавили блок Т173 Якорная ссылка и задали ей значение - showmore
Добавили блок T178 - модификатор плавного скролла
Добавили код на страницу в блок Т123
К коде задаётся ссылка кнопки и класс блоков, которые от неё зависят
[ '#showmore' , 'uc-showmore' ];
<script>
document.addEventListener("DOMContentLoaded", function(){
(function () {
let shmoreArr = [ '#showmore' , 'uc-showmore' ]; // Ссылка кнопки - Класс блоков для скрытия
let anchor = true; //Скролл до якоря true
let hideBtn = false; //Скрыть кнопку по клику true
let shmoreBtn = document.querySelectorAll('[href="'+shmoreArr[0]+'"]');
let shmoreBlock = document.querySelectorAll('.'+shmoreArr[1]);
shmoreBlock.forEach(i => i.classList.add("tabshide"));
for (let i = 0; i < shmoreBtn.length; i++) {
shmoreBtn[i].addEventListener('click', function(event) {
this.classList.toggle('more-btn-active');
if(!anchor) event.preventDefault();
if(hideBtn) this.classList.add('tabshide');
shmoreBlock.forEach(i => i.classList.toggle("tabshide"));
});
};
})();
});
</script>
<style>
.tabshide {
opacity: 0!important;
min-height: 0!important;
max-height: 0!important;
pointer-events: none!important;
padding-top: 0 !important;
padding-bottom: 0 !important;
overflow: hidden !important;
}
Блокам, которые нужно скрыть/показать - задали класс uc-showmore
Добавили блок Т173 Якорная ссылка и задали ей значение - showmore
Добавили блок T178 - модификатор плавного скролла
Добавили код на страницу в блок Т123
К коде задаётся ссылка кнопки и класс блоков, которые от неё зависят
[ '#showmore' , 'uc-showmore' ];
<script>
document.addEventListener("DOMContentLoaded", function(){
(function () {
let shmoreArr = [ '#showmore' , 'uc-showmore' ]; // Ссылка кнопки - Класс блоков для скрытия
let anchor = true; //Скролл до якоря true
let hideBtn = false; //Скрыть кнопку по клику true
let shmoreBtn = document.querySelectorAll('[href="'+shmoreArr[0]+'"]');
let shmoreBlock = document.querySelectorAll('.'+shmoreArr[1]);
shmoreBlock.forEach(i => i.classList.add("tabshide"));
for (let i = 0; i < shmoreBtn.length; i++) {
shmoreBtn[i].addEventListener('click', function(event) {
this.classList.toggle('more-btn-active');
if(!anchor) event.preventDefault();
if(hideBtn) this.classList.add('tabshide');
shmoreBlock.forEach(i => i.classList.toggle("tabshide"));
});
};
})();
});
</script>
<style>
.tabshide {
opacity: 0!important;
min-height: 0!important;
max-height: 0!important;
pointer-events: none!important;
padding-top: 0 !important;
padding-bottom: 0 !important;
overflow: hidden !important;
}
</style>
Взято отсюда: https://mo-ti.ru/showblock#showmore
Выпадающий список "аккордеон" в ZeroBlock
Создали ZeroBlock
Добавили в нём элемент HTML и прописали в нём div
<div class="accordion" ></div>
Добавили блок TX16N с настройками:
- ширина - 6 колонок
- отступ слева -нет
- отступ снизу и сверху - не задан
- заполнили 4 вкладки
Добавили скрипт на страницу в блок ДРУГОЕ►T123
<script>
$( document ).ready(function() {
//Прописываем ID наших блоков var ZeroID = "#rec166100554"; //Zerovar AccoRD = "#rec166100555"; // TX16N//Добавляем класс к нашим картинкам
$('[href="#mainpic"]').addClass('mainpic');
//Переносим аккордеон в ZeroBlock
$(AccoRD).appendTo('.accordion');
$('.accordion').closest('.tn-elem').addClass('accordion-wrapper');
var ZeroBack = ""+ZeroID+" .t396__artboard , "+ZeroID+" .t396__carrier , "+ZeroID+" .t396__filter";
var oldheight = $(AccoRD+" .t585__opened").siblings('.t585__content').height();
//При загрузкеif($(AccoRD+" .t585__header").hasClass('t585__opened')){
cohnheight = $(AccoRD+" .t585__opened").siblings('.t585__content').height();
setTimeout(function(){$(ZeroBack).animate({height:'+='+cohnheight},300);
$(".mainpic").parent(".tn-elem").animate({top:'+='+cohnheight},300);
}, 3000);
};
//При раскрытии нужного аккордеона - изменяем высоту ZeroBlock и положение картинок
$( AccoRD+" .t585__header" ).click(function() {
var thelem=this;
setTimeout(function(){cohnheight=0;movey=0;
$(AccoRD+" .t585__opened").siblings('.t585__content').each(function( index ) {
cohnheight = cohnheight + $(this).height();
});
if(cohnheight>oldheight){ movey = cohnheight - oldheight;
$(ZeroBack).animate({height:'+='+movey},300);
$(".mainpic").parent(".tn-elem").animate({top:'+='+movey},300);
}else{ movey = oldheight - cohnheight;
$(ZeroBack).animate({height:'-='+movey},300);
$(".mainpic").parent(".tn-elem").animate({top:'-='+movey},300);
};oldheight = cohnheight;
}, 400);
});
let target = document.querySelector('.accordion-wrapper');
let observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
let newVal = $(mutation.target).prop(mutation.attributeName);
if (mutation.attributeName === "style") {
$(AccoRD+' .t585__header').removeClass('t585__opened');oldheight=0;cohnheight=0;
$(AccoRD+' .t585__content').hide();$(ZeroBack).css('height','');
};
});
});
observer.observe( target , { attributes: true});
});
Добавили в нём элемент HTML и прописали в нём div
<div class="accordion" ></div>
Добавили блок TX16N с настройками:
- ширина - 6 колонок
- отступ слева -нет
- отступ снизу и сверху - не задан
- заполнили 4 вкладки
Добавили скрипт на страницу в блок ДРУГОЕ►T123
<script>
$( document ).ready(function() {
//Прописываем ID наших блоков var ZeroID = "#rec166100554"; //Zerovar AccoRD = "#rec166100555"; // TX16N//Добавляем класс к нашим картинкам
$('[href="#mainpic"]').addClass('mainpic');
//Переносим аккордеон в ZeroBlock
$(AccoRD).appendTo('.accordion');
$('.accordion').closest('.tn-elem').addClass('accordion-wrapper');
var ZeroBack = ""+ZeroID+" .t396__artboard , "+ZeroID+" .t396__carrier , "+ZeroID+" .t396__filter";
var oldheight = $(AccoRD+" .t585__opened").siblings('.t585__content').height();
//При загрузкеif($(AccoRD+" .t585__header").hasClass('t585__opened')){
cohnheight = $(AccoRD+" .t585__opened").siblings('.t585__content').height();
setTimeout(function(){$(ZeroBack).animate({height:'+='+cohnheight},300);
$(".mainpic").parent(".tn-elem").animate({top:'+='+cohnheight},300);
}, 3000);
};
//При раскрытии нужного аккордеона - изменяем высоту ZeroBlock и положение картинок
$( AccoRD+" .t585__header" ).click(function() {
var thelem=this;
setTimeout(function(){cohnheight=0;movey=0;
$(AccoRD+" .t585__opened").siblings('.t585__content').each(function( index ) {
cohnheight = cohnheight + $(this).height();
});
if(cohnheight>oldheight){ movey = cohnheight - oldheight;
$(ZeroBack).animate({height:'+='+movey},300);
$(".mainpic").parent(".tn-elem").animate({top:'+='+movey},300);
}else{ movey = oldheight - cohnheight;
$(ZeroBack).animate({height:'-='+movey},300);
$(".mainpic").parent(".tn-elem").animate({top:'-='+movey},300);
};oldheight = cohnheight;
}, 400);
});
let target = document.querySelector('.accordion-wrapper');
let observer = new MutationObserver(function (mutations) {
mutations.forEach(function (mutation) {
let newVal = $(mutation.target).prop(mutation.attributeName);
if (mutation.attributeName === "style") {
$(AccoRD+' .t585__header').removeClass('t585__opened');oldheight=0;cohnheight=0;
$(AccoRD+' .t585__content').hide();$(ZeroBack).css('height','');
};
});
});
observer.observe( target , { attributes: true});
});
</script>
Взято отсюда: https://mo-ti.ru/zeroaccordion
Смена фона и прозрачности заголовков в ZeroBlock
Пример выполнен в таком порядке
1. Создали ZeroBlock
2. Создали заголовки в ZeroBlock и проставили им ссылки #title1 .... #title2
3. Добавили скрипт на страницу
4. Прописали в скрипте ID нашего ZeroBlock - #rec50393581
4. Добавили ссылки на фото для каждого заголовка в скрипте
Скрипт вставили в блок Другое►T123
<style>
/*Плавность эффекта для заголовков*/
.tn-atom{
transition:all 0.5s cubic-bezier(0, 0, 0.8, 1.0);
}
/*Стиль с прозрачностью*/
.hovstyle{
opacity:0.3;
}
.bgchange{
transition:all 0.5s cubic-bezier(0, 0, 0.8, 1.0);
}
</style>
<script>//Задаём переменной ID нашего ZeroBlock var blockZeroID = '#rec50393581';
var blockZeroBG = blockZeroID + " " + ".t396__carrier" ;
//Добавляем класс к нашим заголовкас-ссылкам
$(blockZeroID + " "+ "a").addClass("hovtitle");
//Класс для фона
$(blockZeroBG).addClass("bgchange");
//При наведении на любой заголовок в нашем ZeroBlock
$('.hovtitle').hover(
function(){
//Добавляем всем заголовком класс с прозрачностью
$(".hovtitle").addClass("hovstyle");
//Делаем непрозрачным заголовок на который навели
$(this).removeClass("hovstyle");
//Если наводят на заголовок с определённой ссылкой, то меняем фон
if ($(this).attr('href') == "#title2"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9BMy)') };
if ($(this).attr('href') == "#title3"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9BNJ)') };
if ($(this).attr('href') == "#title4"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9BQD)') };
if ($(this).attr('href') == "#title5"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9Bnc)') };
if ($(this).attr('href') == "#title6"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9Brs)') };
if ($(this).attr('href') == "#title7"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9BtD)') };
if ($(this).attr('href') == "#title8"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9Bu8)') };
if ($(this).attr('href') == "#title9"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9BuQ)') };
if ($(this).attr('href') == "#title10"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9Buv)') };
if ($(this).attr('href') == "#title11"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9BvH)') };
},
function(){
//Когда на заголовки не наводим, удаляем класс с прозрачностью
$(".hovtitle").removeClass("hovstyle");
//Когда не наводим на заголовки делаем такой фон
$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9BFu)');
});
1. Создали ZeroBlock
2. Создали заголовки в ZeroBlock и проставили им ссылки #title1 .... #title2
3. Добавили скрипт на страницу
4. Прописали в скрипте ID нашего ZeroBlock - #rec50393581
4. Добавили ссылки на фото для каждого заголовка в скрипте
Скрипт вставили в блок Другое►T123
<style>
/*Плавность эффекта для заголовков*/
.tn-atom{
transition:all 0.5s cubic-bezier(0, 0, 0.8, 1.0);
}
/*Стиль с прозрачностью*/
.hovstyle{
opacity:0.3;
}
.bgchange{
transition:all 0.5s cubic-bezier(0, 0, 0.8, 1.0);
}
</style>
<script>//Задаём переменной ID нашего ZeroBlock var blockZeroID = '#rec50393581';
var blockZeroBG = blockZeroID + " " + ".t396__carrier" ;
//Добавляем класс к нашим заголовкас-ссылкам
$(blockZeroID + " "+ "a").addClass("hovtitle");
//Класс для фона
$(blockZeroBG).addClass("bgchange");
//При наведении на любой заголовок в нашем ZeroBlock
$('.hovtitle').hover(
function(){
//Добавляем всем заголовком класс с прозрачностью
$(".hovtitle").addClass("hovstyle");
//Делаем непрозрачным заголовок на который навели
$(this).removeClass("hovstyle");
//Если наводят на заголовок с определённой ссылкой, то меняем фон
if ($(this).attr('href') == "#title2"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9BMy)') };
if ($(this).attr('href') == "#title3"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9BNJ)') };
if ($(this).attr('href') == "#title4"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9BQD)') };
if ($(this).attr('href') == "#title5"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9Bnc)') };
if ($(this).attr('href') == "#title6"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9Brs)') };
if ($(this).attr('href') == "#title7"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9BtD)') };
if ($(this).attr('href') == "#title8"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9Bu8)') };
if ($(this).attr('href') == "#title9"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9BuQ)') };
if ($(this).attr('href') == "#title10"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9Buv)') };
if ($(this).attr('href') == "#title11"){$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9BvH)') };
},
function(){
//Когда на заголовки не наводим, удаляем класс с прозрачностью
$(".hovtitle").removeClass("hovstyle");
//Когда не наводим на заголовки делаем такой фон
$(blockZeroBG).css('backgroundImage', 'url(https://clck.ru/D9BFu)');
});
</script>
Взято отсюда: https://mo-ti.ru/bghover
Активация gif при наведении в ZeroBlock
Реализуем эффект запуска gif использую метод подмены
1. Находим нужный gif
2. Открываем в фоторедакторе и сохраняем первый кадр в виде статичного фото
3. Добавляем это фото в ZeroBlock
4. Копируем class этого фото и добавляем в скрипт (пример)
.tn-elem__436056751470210033144
5. В скрипте:
- при наведении курсора на фото, прописываем адрес gif файла
- при удалении курсора прописываем адрес статичного фото
<script>//Пишем класс фото из Zerovar img = $('.tn-elem__436056751470210033144 .tn-atom__img');
img.hover(function(){
//Пишем адрес фото при наведении
img.attr('src', 'https://static.tildacdn.com/tild3865-3839-4930-a336-336234646531/113817.gif');
}, function(){
//Пишем адрес фото, когда мышь убрали
img.attr('src', 'https://static.tildacdn.com/tild3930-3764-4232-b734-663062666336/Scre111111.png');
});
1. Находим нужный gif
2. Открываем в фоторедакторе и сохраняем первый кадр в виде статичного фото
3. Добавляем это фото в ZeroBlock
4. Копируем class этого фото и добавляем в скрипт (пример)
.tn-elem__436056751470210033144
5. В скрипте:
- при наведении курсора на фото, прописываем адрес gif файла
- при удалении курсора прописываем адрес статичного фото
<script>//Пишем класс фото из Zerovar img = $('.tn-elem__436056751470210033144 .tn-atom__img');
img.hover(function(){
//Пишем адрес фото при наведении
img.attr('src', 'https://static.tildacdn.com/tild3865-3839-4930-a336-336234646531/113817.gif');
}, function(){
//Пишем адрес фото, когда мышь убрали
img.attr('src', 'https://static.tildacdn.com/tild3930-3764-4232-b734-663062666336/Scre111111.png');
});
</script>
Взято отсюда: https://mo-ti.ru/hover-gif-zero
Плавный скролл с помощью javascript
<script>
$(document).ready(function(){//перечисляем якоря, которые используем$("[href='#nazvanie-yakorya'],[href='#nazvanie-drugogo-yakorya'],[href='#nazvanie-eshe-odnogo-yakorya']").addClass("nextblock t-cover__arrow-wrapper_animated");
$('.nextblock').click(function(){var currentLink = $.attr(this, 'href');
currentLink = currentLink.substring(1, currentLink.length);
// скорость скроллаvar speed = 2000;// кастомный отступvar customOffset = 0;
var top = $('[name="'+currentLink+'"]').offset().top - customOffset;$('html, body').animate({scrollTop: top}, speed);return false;});
});
</script>
В этом коде вам нужно будет поменять nazvanie-yakorya на ваше название якорной ссылки. В коде так же можно поменять:
- скорость прокрутки. Для этого в поле var speed измените значение с 2000 на больше или меньше;
- дополнительное смещение при клике на якорную ссылку. Его можно изменить поле var customOffset
Вставка сайта внутри сайта
Код 1: Для отображения desktop версии:
<div class='tn-atom tn-atom__html'> <div style='transform-origin: 0 0; transform: scale(0.5)'><iframe src="https://naje-s.ru" width="1440px" height="900px" frameborder="0"></iframe></div> </div> </div>
Код 2: Для отображения планшетной версии:
<div class='tn-atom tn-atom__html'> <div style='transform-origin: 0 0; transform: scale(0.7)'><iframe src="https://naje-s.ru" width="1024" height="620" frameborder="0"></iframe></div> </div> </div>
Код 3: Для отображения мобильной версии:
<div class='tn-atom tn-atom__html'> <div style='transform-origin: 0 0; transform: scale(0.8)'><iframe src="https://naje-s.ru" width="375px" height="568px" frameborder="0"></iframe></div> </div> </div>
Полезные сервисы
Скрипты, анимированные SVG и другое
Блоги и площадки со скриптами tilda
Виджеты для Tilda