Скрипты, Коды, Фишки

Музыка из Soundcloud.com

Внимание!

Сервис Soundcloud не работает без VPN

8. Всё сохраняем и публикуем

7. В блоке T153 меняем id трека на наш

6. Вставляем скопированный код в блокнот и находим id трека (обычно после слово "tracks")

5. Во вкладке "embed" можно сразу изменить цвет кнопки "play", размер плеера и т.д.

4. Переходим во вкладку "embed" и копируем от туда код

3. Под песней находим кнопку "share" и нажимаем

2. На сервисе Souncloud находим нужную композицию

1. Добавляем блок T153

Аудио плеер:

catching-fire

Внимание!

Данный плеер не редактируется внешне

11. Нажимаем опубликовать и проверяем

10. В начале ссылки меняем "www.dropbox.com" на "dl.dropboxusercontent.com"

9. Меняем ссылку в скрипте на скопированную

8. Нажимаем кнопку "поделиться" в композиции, далее "копировать ссылку"

7. Загружаем на Dropbox нужную композицию

6. Добавляем блок T123 и вставляем туда скрипт

5. Копируем скрипт

4. Правой кнопкой нажимаем на плашке HTML,
выбираем "Add CSS Class Name" и вставляем так же "catching-fire"

3. В HTML добавляем класс "catching-fire"

2. Добавлем в самом блоке Zero HTML

1. Создаём Zero блок

<script>
$(document).ready(function(){

let playList = {
'catching-fire' : 'https://310401.selcdn.ru/MIXED/hunger_games-hanging_tree.mp3',
'mockingjay1' : 'https://310401.selcdn.ru/MIXED/TheHungerGames2.mp3',
'mockingjay2' : 'https://310401.selcdn.ru/MIXED/LordeFlickerTheHungerGames3.mp3'
};

for (var key in playList) {
$('.'+key).find('.tn-atom').html('<audio controls controlsList="nodownload"><source src="'+playList[key]+'" type="audio/mpeg"></audio>');
};

let activeTrack = {};
document.querySelectorAll('audio').forEach(function(el){
el.addEventListener('playing', function(){
if (activeTrack.pause && activeTrack !== this)
activeTrack.pause(); activeTrack = this;
});
});
});
</script>
<style>
audio {
height: 40px;
width:100%;
border-radius: 30px;
box-shadow: 0 0 40px 0 rgb(62 62 62 / 44%);
}
audio::-webkit-media-controls-panel {
background: #bdbdbd;
}
</style>

Слайдер из Zero блоков:

Можно создать свои кнопки

Полное редактирование

Слайдер:

Смотреть видео

1. Добавляем блок CR30N

2. Убираем лишний "стандартный" контент

3. Создаём Zero блок

4. Наполняем необходимым контентом

5. Создаём ещё 2 блока и так же наполняем их

7. Копируем ID блока CR30N

8. Вставляем в скрипт в графе #rec166024520

8. Копируем блоки 1 и последний

9. В настройках блока CR30N меняем стиль анимации на "медленно"

Дополнительно можно поменять настройки кнопок:

10. Нажимаем опубликовать и проверяем

6. Копируем скрипт вставляем в блок T123

1. Создаём кнопки и редактируем

2. Задаём class для кнопок "left_sld" для левой кнопки, "right_sld" для правой кнопки

3. Добавляем в каждый блок и публикуем

4. Так же можно посмотреть подробное видео с доп. функциями

<<style>.t734 { height: auto !important; }</style>
<script>
$(document).ready(function(){
let sldID = ['#rec166024520'];
setTimeout(function(){
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()};
};
}, 100);
});
</script>

Код для слайдера стандартные кнопки:

<style>.t734 { height: auto !important; }
.left_sld , .right_sld{ cursor:pointer}
.t734 .t-slds__arrow_container {display: none}
</style>
<script>
$(document).ready(function(){
let sldID = ['#rec272742658'];
setTimeout(function(){
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()};
};
}, 100);
$('.left_sld').click(function(){$(sldID[0]+' .t-slds__arrow-left').click()});
$('.right_sld').click(function(){$(sldID[0]+' .t-slds__arrow-right').click()});

});
</script>

Код для слайдера со своими кнопками:

1. Скачиваем нужное видео

4. Копируем скрипт и вставляем

3. В Tilda добавляем блок T123

2. Загружаем на Dropbox

5. В Dropbox нажимаем "поделиться" видео и "копировать ссылку"

6. Меняем ссылку в скрипте на скопированную

7. Убираем лишние слова до буквы "S"

8. Нажимаем опубликовать и проверяем

Важно!

Не стереть случайно какой нибудь символ: точки, запятые, скобки и прочее

Видео на фон:

<div id="videoBackground">
<video style="object-fit: cover; background-size: cover; width: 100%; height: 100%;" preload="auto" playsinline autoplay loop muted>
<source src="https://dl.dropboxusercontent.com/s/dq8c5l183c52pd8/video-18-06-21-01-00.mov?dl=0" type="video/mp4">
</video>
</div>

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

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

Zero Block

Click "Block Editor" to enter the edit mode. Use layers, shapes and customize adaptability. Everything is in your hands.

Tilda Publishing

create your own block from scratch