Tilda Scripts
Повсеместные
Добавляются практически во все сайты

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>

Pop-up

  1. Создаем блок BF503;
  2. Отчищаем все данные во вкладке "Контент";
  3. Ставим ширину 100%;
  4. Создаем Zero Block, наполняем контентом и адаптируем, в качестве фона используйте элемент шейп с заливкой. Фон самого Zero block удалите, чтобы он был прозрачным.
  5. Добавьте код на страницу;
  6. Замените id Zero block;
  7. Замените 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>

Стилизация скроллбара (ползунка) в десктопе

<!-- 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>

Цвет выделения текста

<!-- https://romanyu.ru/cvet-vydeleniya-teksta -->
<style>
::selection {
/* укажи цвет выделения текста */background: #e42e3a;
}
</style>
Визуальные и Дизайн-образующие эффекты
Фундаментальные визуализации для сайта для построения дизайн-системы

Глитч эффект для текста в zero block

  1. Пропиши текстовому элементу, к которому хочешь применить глитч эффект, название класса: glitch-text. Инструкция по добавлению своего класса элементу.
  2. Укажи в настройках ниже два цвета глитч эффекта.
  3. Скопируй сгенерированный код и вставь на свой сайт. Памятка по вставке кода.

Взято отсюда: 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

  1. Укажи тексту в zero block, которому нужно сделать обводку, класс text-stroke. Инструкция по добавлению своего класса элементу.
  2. Укажи цвет текста в настройках zero block, он применится к обводке.
  3. Укажи в настройках ниже толщину обводки.
  4. Скопируй этот код и вставь на свой сайт. Памятка по вставке кода.


Взято отсюда: 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>

Эффект наложения блока при скролле

Для реализации эффекта высота блока должна быть больше высоты экрана.

  1. Укажи в настройках id всех блоков через запятую, которым нужно добавить эффект.
  2. Скопируй этот код и вставь на свой сайт. Памятка по вставке кода.


Взято отсюда: 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

Слайдер с отзывами в 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

Классический слайдер


Создали галерею 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

  1. Создай отдельно zero block с элементами, которые нужно скроллить. В настройках поставь overflow: auto.
  2. Создай отдельно zero block со стрелками. Каждая стрелка — это шейп. Для шейпа со стрелкой налево укажи класс arrow-left, для шейпа со стрелкой направо укажи класс arrow-right. Инструкция по добавлению своего класса элементу.
  3. Укажи настройках ниже id блока с элементами, id блока со стрелками и величину сдвига при клике на стрелку.
  4. Скопируй сгенерированный код и вставь на свой сайт. Памятка по вставке кода.

Взято отсюда: 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>

Чтобы код работал в рамках зероблок и мог подвергаться изменениям - расположение, изменение в слоях и тд - этот код нужно прописать в едином окне Зероблока. 

Как добавить любой готовый 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>


  1. Создаем зероблок, убираем все лишнее, убираем фон
  2. Добавляем код отдельным блоком, вставляе код из памятки
  3. Вставляем библиотеку JS в "_"
  4. Код HTML вставляем без каких-либо других тегов на следующей строке после библиотек
  5. Вставляем CSS стили в <style> </style>
  6. Вставляем лицензию - Находится в Change View - Details View - В самом низу страницы, копируем и вставляем в /* _*/
  7. И ниже вставляем JS код
  8. Далее выше в поле $("#имя").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

Боковое фиксированное меню

Создаём кнопку в 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

Простая привязка хедера к верхнему краю

<style>#rec1234567 {
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 (и т.д., ну или ваши значения) или нарисуйте шейп и выравнивайте элементы по нему - так даже проще.

Далее создаем 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

Выпадающее меню с фото из связки блоков ME301+FT301 на экранах >980px в Tilda

Создали меню ME301 с 3-мя пунктами и режимом статика

2

Создали 3 блока FT301

4

Добавили код на страницу в блок Другое - Т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>
SEO
Модификации, способствующие продвижению

Большой бейджик страницы в telegram

  1. Скопируй этот код и вставь в head своего сайта. Для этого открой: «Настройки сайта» → «Еще» → «HTML-код для вставки внутрь head».
  2. Обнови ссылку в 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

Добавление иконки в кнопку

<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;
}

</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>

Как сделать видеофон для 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>
Другое
Остальные модификации

Смещение при переходе на якорную ссылку для 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;
}

</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;
}

</style>

Копирование текста по клику в Tilda

В данном примере копирование происходит при клике на элемент, содержащий в себе текст промо-кода, например кнопка или текст. Пример реализован в Zero block, для проверки результата добавил поле ввода.

  1. Создаем Zero block;
  2. Добавляем элемент "Текст" или "Кнопка", который содержит в себе текст промо-кода, который мы собираемся копировать;
  3. Присваиваем данному элементу css class example-1 (у меня - это кнопка);
  4. Вставляем код на страницу в блок T123;
  5. Меняем текст об успешном копировании на свой (отмечен комментарием в коде).
<script>
// Пример 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.
  1. Создаем Zero block;
  2. Добавляем элемент "Текст" или "Кнопка", который содержит в себе текст промо-кода, который мы собираемся копировать;
  3. Присваиваем данному элементу css class example-2-txt;
  4. Создаём кнопку копирования;
  5. Присваиваем кнопке css class example-2-btn;
  6. Добавляем элемент с уведомлением о успешном копировании (у меня это кнопка);
  7. Добавляем пошаговую анимацию:
  8. - выбираем кнопку с промо-кодом, задаем в первом шаге прозрачность: 100%, время анимации: 0. Во втором шаге - время: 0, прозрачность: 0%. Анимация по клику, в качестве триггера выбираем кнопку копирования (п.4.);
  9. - выбираем кнопку или текст с сообщением об удачном копировании, в первом шаге анимации - время: 0, прозрачность: 0%, во втором шаге, время: 0, прозрачность: 100%. Анимация по клику, в качестве триггера так же выбираем кнопку копирования (п.4).
  10. Вставляем код на страницу в блок 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; /* цвет фона */
}

</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;
}

</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});

});

</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)');
});

</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');

});

</script>


Взято отсюда: https://mo-ti.ru/hover-gif-zero

Полезные сервисы
Скрипты, анимированные SVG и другое
Блоги и площадки со скриптами tilda
Виджеты для Tilda