Как создать скользящую подпись в ZeroBlock в Tilda

Создали ZeroBlock

Добавили в него 4 Shape элемента с логотипами и задали им ссылку #brand

Добавили Shape для линии, задали ему ширину как и у Shape с брендами и задали ссылку #line

Добавили код на страницу в блок Другое - Т123
В коде прописали подписи над линией:
content: "First Brand";
content: "Second Brand";
content: "Third Brand";
content: "Fourth Brand";

Mo-ti Level Up

Видео инструкции по добавлению кода и работе с Zero Block.

Получить полное видео

Посмотреть все видео

Создаём скользящую подпись для логотипов в ZeroBlock.
Длительность видео: 23 минуты

Фрагмент видео

Посмотреть видео в личном кабинете ►

Библиотека для примера


<style>
.line{text-align:center}
.parentLine{ transition:all 0.6s ease-in-out}
.line::before {
    content: "First Brand";
    font-family: 'Roboto',Arial,sans-serif;
    font-weight: 400;
    position: absolute;
    color: #000;
    left: 0%;
    top: -30px;
    width: 100%;
}
.parentLine.position1{transform: translateX(100%)}
.parentLine.position2{transform: translateX(200%)}
.parentLine.position3{transform: translateX(300%)}
.line.text1::before{content: "Second Brand"}
.line.text2::before{content: "Third Brand"}
.line.text3::before{content: "Fourth Brand"}
.squad{ padding: 0 5px}
@media screen and (max-width: 640px){
.line::before{ font-size: 12px;}
}
</style>
<script>
$( document ).ready(function() {
   $('a[href^="#brand"]').addClass('brand squad');
   $('a[href="#line"]').addClass('line squad').parent().addClass('parentLine');
   $('.squad').parent().addClass('squad');
   var lineclass = $('.line').attr('class');
   var prentlineclass = $('.parentLine').attr('class');
   $('.brand').hover(
  function() {
    var position  = $('.brand').index(this);
    $('.line').attr('class' , lineclass+' text'+position);
    $('.parentLine').attr('class' , prentlineclass+' position'+position);
  }, function() { });
});
</script>