Делаем выпадающий текст в ZeroBlock в Tilda
A service for small and medium businesses
Create a targeted live campaign. Scale your infrastructure with our simple service.
Top 3 reasons to choose us
Everyday we work hard to make life of our clients better and happier
-1-
High Quality
We are the leading firm by delivering quality and value to our clients. We like what we do. We like to make people happy.
-2-
Unique Experience
All our professionals have more than 5 years of legal experiences. They use their knowledge to make our clients life better.
-3-
Good Support
Our managers are always ready to answer your questions. You can call us at the weekends and at night.
ОТ КОНЦЕПЦИИ ДО ПУСКО-НАЛАДКИ
ПРОЕКТИРОВАНИЕ, ПОСТАВКА, МОНТАЖ АВТОРСКИЙ НАДЗОР
Формирование и подписание ТЗ
Проектирование
ОТ КОНЦЕПЦИИ ДО ПУСКО-НАЛАДКИ
ПРОЕКТИРОВАНИЕ, ПОСТАВКА, МОНТАЖ АВТОРСКИЙ НАДЗОР
  • 1
    Формирование и подписание ТЗ
    -Определяем зоны архитектурно-художественной подсветки (север/юг/запад/восток)
    -Определяем бюджетные рамки.
    -Запрашиваем у вас необходимые материалы: исходники, чертежи и тд.
    -Согласовываем и подписываем
  • 2
    Исследование
    - Перед началом работы мы проводим глубокое исследование целей создания концепции освещения
    - Определяем, какие эмоции должен вызвать светодизайн
    - Облетаем объект на квадрокоптере с целью изучения архитектурной концепции местности днем и световой концепции ночью.
  • 3
    Формирование эскизов
    Разрабатываем 3-5 концепций архитектурно-художественной подсветки

    - На встрече мы презентуем концепции и определяемся, какая из них наиболее точно попадает в цель эмоционального и практического восприятия.
  • 4
    Разработка дизайн-проекта
    В рамках выбранной концепции мы формируем дизайн-проект, вносим корректировки и утверждаем проект.
    - Передаем альбом и исходники на USB-носителе.
    - Проводим презентацию рекомендуемых светильников.
    - Если необходимо, проводим mock-up - пилотный монтаж нескольких светильников на участке вашего фасада.
  • 5
    Проектирование
    ЭОМ, КМ проект, разработка и утверждение динамики, сценариев
  • 6
    Поставка оборудования
    У нас прямые контракты с производствами по всему миру
  • 7
    Монтаж оборудования
    Все монтажники прошли обучение и имеют сертификаты
  • 8
    Пуско-наладка
    Тестируем оборудование
    Обучаем заказчика управлению динамикой и сценариями фасада

Делаем выпадающий текст в ZeroBlock в Tilda

1
Создали ZeroBlock
2
Наполнили ZeroBlock контентом
3
Присвоили ссылки элементам в ZeroBlock:
- кнопка коротко - #short
- кнопка подробно - #long
- цифра 2 и заголовок - #stepsleft2
- цифра 3 и заголовок - #stepsleft3
- цифра 4 и заголовок - #stepsleft4
- цифра 6 и заголовок - #stepsright6
- цифра 7 и заголовок - #stepsright7
- цифра 8 и заголовок - #stepsright8
- текст описание слева - #txtelem
- линия по центру #myline
4
Добавили скрипт на страницу в блок ДРУГОЕ►Т123
Mo-ti Level Up
Видео инструкции по добавлению кода и работе с Zero Block.
Создаём собственный выпадающий список в ZeroBlock. Анимируем перемещение элементов.
Длительность видео: 21 мин
Фрагмент видео
Библиотека для примера

<style>

/*Активная кнопка стиль*/
.activebtn{
    background-color: #ffffff;
    color: #000000 !important;
}
/*Изменяем курсор для ссылок*/
   [href = "#txtleft"] , [href = "#txtright"] , [href='#stepsleft2'] , [href='#stepsleft3'] , [href='#stepsleft4'] , [href='#stepsright6'] , [href='#stepsright7'] , [href='#stepsright8'] , [href='#myline']   {
   cursor: context-menu;
}
/*Класс отменяющий прозрачность текста описания*/
.showtxt{
    opacity:1 !important;
}
/*Анимация для текста описания*/
 [href = "#txtleft"] , [href = "#txtright"] {
transition:all 0.6s cubic-bezier(0, 0, 0.8, 1.0);
}

</style>
<script>
$( document ).ready(function() {
//Прописываем ID Нашего Zero
var txtZeroID = "#rec166100305";
//Создаём переменные состояния
var open = false;
var close = true;
var resize = false;
//Сворачиваем всё
function allUp(){
   //Поднимаем пункты  
   if (!resize){
    $("[href='#stepsleft2']").closest(".tn-elem").animate({ top: '-=95' }, 1000); //Пункт 1
    $("[href='#stepsleft3']").closest(".tn-elem").animate({ top: '-=198' }, 1000);//Пункт 2
    $("[href='#stepsleft4']").closest(".tn-elem").animate({ top: '-=280'}, 1000);//Пункт 3
    $("[href='#stepsright6']").closest(".tn-elem").animate({ top: '-=15' }, 1000); //Пункт 6
    $("[href='#stepsright7']").closest(".tn-elem").animate({ top: '-=26'}, 1000); //Пункт 7
    $("[href='#stepsright8']").closest(".tn-elem").animate({ top: '-=40'}, 1000); //Пункт 8
    
    //Уменьшаем линию
    $("[href='#myline']").closest(".tn-elem").animate({
    height : '-=440',   }, 1000, function() {   });
   } else {resize = false;};
    
    //Уменьшаем высоту блока
   $(""+txtZeroID+" .t396__artboard , "+txtZeroID+" .t396__carrier ,  "+txtZeroID+" .t396__filter").animate({ height : '-=430' }, 1000);

    //Убираем вложенный текст 1-4     
    $('[href = "#txtleft"]').parent().removeClass("showtxt");
    //Показываем вложенный текст 5-8 
    $('[href = "#txtright"]').parent().removeClass("showtxt");
    //Меняем состояние
    close = true;open = false; 
};   

//Разворачиваем всё
function allDown(){
    $("[href='#stepsleft2']").closest(".tn-elem").animate({ top: '+=95' }, 1000); //Пункт 1
    $("[href='#stepsleft3']").closest(".tn-elem").animate({ top: '+=198' }, 1000);//Пункт 2
    $("[href='#stepsleft4']").closest(".tn-elem").animate({ top: '+=280' }, 1000);//Пункт 3
    $("[href='#stepsright6']").closest(".tn-elem").animate({ top: '+=15' }, 1000);//Пункт 6 
    $("[href='#stepsright7']").closest(".tn-elem").animate({ top: '+=26' }, 1000);//Пункт 7
    $("[href='#stepsright8']").closest(".tn-elem").animate({ top: '+=40' }, 1000); //Пункт 8
    
    //Увеличиваем линию
    $("[href='#myline']").closest(".tn-elem").animate({ height : '+=440' }, 1000);
    
    //Увеличиваем высоту блока
   $(""+txtZeroID+" .t396__artboard , "+txtZeroID+" .t396__carrier ,  "+txtZeroID+" .t396__filter").animate({height : '+=430'}, 1000);

     //Показываем вложенный текст 1-4     
    $('[href = "#txtleft"]').parent().addClass("showtxt");
     //Показываем вложенный текст 5-8 
    $('[href = "#txtright"]').parent().addClass("showtxt");
    //Меняем состояние
    open = true;close = false;
};   

//Добавляем класс активной кнопки к кнопке КОРОТКО
$('[href = "#short"]').addClass('activebtn');

//Управляем активностью кнопок
//При клике на КОРОТКО
    $('[href = "#short"]').click(function (){
         $(this).addClass('activebtn');
         $('[href = "#long"]').removeClass('activebtn');
    
//Поднимаем пункты     
  if (open){ allUp()}; return false; });
//При клике на ПОДРОБНО    
     $('[href = "#long"]').click(function (){
         $(this).addClass('activebtn');
         $('[href = "#short"]').removeClass('activebtn');
     //Показываем пункты     
  if (close){ allDown()};return false; });

//При изменении размеров окна
var resizeTimeout;
$(window).resize(function(){
    clearTimeout(resizeTimeout);
    resizeTimeout = setTimeout(function(){    
          if (!close){ //Сворачиваем пункты
   resize = true;
   setTimeout(function() { 
    $("[href = '#short']")[0].click(); 
}, 500); };  }, 500);});

});  
    
</script>
Made on
Tilda