Как устроен интерфейс Тильды
Модуль 4. Урок первый
Оставь свою домашку тут
Максимальное кол-во звезд, которое ты можешь получить:
3
Регистрируйся по моей ссылке, 2 месяц подписки будет бесплатным
Передай сайт на мой аккаунт: kirill.ryazanovv@yandex.ru
Базовые блоки – полный разбор
Урок 2. Часть 1
Базовые блоки – полный разбор
Урок 2. Часть 2
Оставь свою домашку тут
Максимальное кол-во звезд, которое ты можешь получить:
3
Zero block – как он работает
Урок 3
Оставь свою домашку тут
Максимальное кол-во звезд, которое ты можешь получить:
3
Анимация: базовая и пошаговая
Урок 4
Оставь свою домашку тут
Материалы для ДЗ:
Максимальное кол-во звезд, которое ты можешь получить:
3
Доп. возможности с кодом
Урок 5
Оставь свою домашку тут
Ссылка на сервис:
Максимальное кол-во звезд, которое ты можешь получить:
3
Эффект блика на кнопках

<script>
          
    $('#rec278544141 .tn-elem[data-elem-id="1612548263417"] .tn-atom').addClass('autoflash').append('<div class="flash lighting" style="height: 70px;width: 40px;top: 0px;left: -80px;"></div>');
    
</script>

<style>

     .autoflash{
        position: relative;
        overflow: hidden;
        -webkit-transform: translate3d(0,0,0);
        transform: translate3d(0,0,0);
    }

     .flash{
       content: "";
    background-color: rgba(255, 255, 255, 1);
    height: 100%;
    width: 3em;
    display: block;
    position: absolute;
    top: 0;
    left: -4.5em;
    -webkit-transform: skewX(-45deg) translateX(0);
    transform: skewX(-45deg) translateX(0);
    -webkit-transition: none;
    transition: none;
    }
    
    .lighting {
    webkit-animation: moving 3s ease-in-out infinite;
    -moz-animation: moving 3s ease-in-out infinite;
    -ms-animation: moving 3s ease-in-out infinite;
    -o-animation: moving 3s ease-in-out infinite;
    animation: moving 3s ease-in-out infinite;
   
    }
    
  @keyframes moving {  
     30% {  webkit-transform: skewX(-45deg) translateX(33.5em);
        transform: skewX(-45deg) translateX(33.5em);   
        
        }
   
    100% {  webkit-transform: skewX(-45deg) translateX(33.5em);
        transform: skewX(-45deg) translateX(33.5em);   
        
        }
     }
      
</style>
Слайдер из Zero Block

<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>
Фиксированное меню в Zero Block

<style>
.fixed {
    position: fixed;
    width: 100%;
    top: 0px;
    z-index: 9999;
    transform: translateY(-100%); 
}
.fonmenu{
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(5px);
    transform: translateY(0%) !important;
}
.transtime{transition:  all 0.4s cubic-bezier(0, 0, 0.8, 1.0)}
</style>
<script>
$(document).ready(function(){
    let scrolldistance = 10; //Дистанция скролла
    let blockMenuID = '#rec166003122'; //ID Zero
    $(blockMenuID).addClass('fixed');
    setTimeout(function(){ 
        $(blockMenuID).addClass('transtime')
        if($(document).scrollTop()>scrolldistance){$(blockMenuID).addClass('fonmenu')};
    }, 500);
    $(window).scroll(function() { 
        var top = $(document).scrollTop();
        //Если перемещение больше 10 px
        if (top >= scrolldistance) { 
          $(blockMenuID).addClass('fonmenu');
        } else {
          $(blockMenuID).removeClass('fonmenu'); 
        }
    });
});
</script>
Pop-up окно из Zero Block

<style>
  .shirina{
   background:none !important; right: 0 !important;left: 0 !important;}  
  .parpadding{padding:0 !important;}
  .tn-atom .t-form__errorbox-wrapper, .tn-form__errorbox-popup , .t-form-success-popup { z-index: 9999999 !important; }
  </style>
<script>
$( document ).ready(function() {
var ZeroPopID = '#rec166004976';//ID Zero
var PopWindID = '#rec166004978';//ID PopUp окна BF503

   $(PopWindID + " .t-popup__container").addClass("shirina").html($(ZeroPopID)).parent(".t-popup").addClass("parpadding");
   $('a[href^="#popupzero"]').click(function(e) {e.preventDefault();
   setTimeout(function(){window.dispatchEvent(new Event('resize')); }, 10);
   });
   $(document).on('click','a[href="#close"], '+ZeroPopID+' .t396__filter',function(e){e.preventDefault();t390_closePopup(PopWindID.replace(/[^0-9]/gim, ""));});
   $(ZeroPopID).delegate(".t-submit", "click", function(){
   setTimeout(function(){if($(ZeroPopID+" .t-form").hasClass("js-send-form-success")){t390_closePopup(PopWindID.replace(/[^0-9]/gim, ""))}}, 1000);});
});  
</script>
Видеофон в Zero Block

<script>
  $('#recXXXXXXX').appendTo('#recYYYYYYY .t396__carrier');
</script>
Очень важные мелочи
Урок 6
Здесь домашки нет, прикрепил все необходимые ссылки с инструкциями:
Создаем сайт на Tilda с нуля
Экзамен
Оставь свою работу тут
Ссылки на современные крутые сайты для вдохновения:
Максимальное кол-во звезд, которое ты можешь получить:
3
Презентация урока: