Комплексный маркетинг от 0 до PRO

Личный кабинет участника курса

ФАВИКОН

5 модуль 7 урок
ФАВИКОН

ССЫЛКИ

5 модуль 7 урок
ССЫЛКИ

ДОМЕН

5 модуль 7 урок
ДОМЕН

SEO ОПТИМИЗАЦИЯ

5 модуль 7 урок
SEO ОПТИМИЗАЦИЯ

ЯНДЕКС МЕТРИКА

5 модуль 7 урок
ЯНДЕКС МЕТРИКА

ШРИФТЫ И СТИЛЬ

5 модуль 7 урок
ШРИФТЫ И СТИЛЬ

ШАПКА И ПОДВАЛ

5 модуль 7 урок
ШАПКА И ПОДВАЛ

МЕНЮ САЙТА

5 модуль 7 урок
МЕНЮ САЙТА

СЛАЙДЕР НА ZERO БЛОКЕ

5 модуль 7 урок
СЛАЙДЕР НА ZERO БЛОКЕ

АККОРДЕОН НА ZERO БЛОКЕ

5 модуль 7 урок
АККАРДЕОН НА ZERO БЛОКЕ

ФОН САЙТА

5 модуль 7 урок
ФОН САЙТА

АНИМАЦИЯ КНОПОК

5 модуль 7 урок
АНИМАЦИЯ КНОПОК

ПОП-АП НА ЗЕРО БЛОКЕ

5 модуль 7 урок
ПОП-АП НА ЗЕРО БЛОКЕ

Код для меню на зеро блоке
  1. Создали Zero блок меню
  2. Создали блок T123 для вставки html кода
  3. Вставили код в блок
  4. Поменяли id блока на нужный
<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 = 0; //Дистанция скролла
    let blockMenuID = '#rec449107043'; //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>
Код для слайдера на зеро блоке
  1. Создаем блок CR30N
  2. Создаем необходимые Zero блоки для слайдера
  3. Клонируем первый и последний Zero блоки
  4. Создали блок T123 для вставки html кода
  5. Вставили код в блок
  6. Поменяли id блока на нужный
<style>.t734 { height: auto !important; }</style>
<script>
$(document).ready(function(){
let sldID = ['#rec417842664'];
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>
Код для аккордеона на зеро блоке
  1. Создаем ZERO блок с аккордеоном
  2. Назначаем BLOCK CSS CLASS NAME - uc-accord-a-1
  3. Назначаем CSS CLASS NAM для текста и шейпа - accord
  4. Назначаем CSS CLASS NAM для стрелочки - accord-icon
  5. Создаем ZERO блок с содержимым аккордеона
  6. Клонируем блоки необходимое количество раз в логичной последовательности
  7. Создаем блок T123 для вставки html кода
  8. Вставили код в блок
  9. Поменяли id блока на нужный
<script>
$( document ).ready(function() {
    
$(function () { 
    let liter = 'a'; //Литера для сборки
    let oneAcc = true; // Открывать по одной вкладке  false - true
    let accOpen = false; // Открытая  вкладка  false - true
    let openNum = 3; // Номер открытой вкладки
    let scroll = false; // Скролл к открытой вкладке  false - true
    
	$('div[class*="uc-accord-'+liter+'"]').each(function(index){
        $('.uc-accord-'+liter+'-'+index+':first').addClass('title-accord').attr('data-accord-index', index);
        $('.uc-accord-'+liter+'-'+index+'').not(':first').addClass('content-accord hide-accord');
        
	});
	
	if(accOpen){
	    $('div[class*="uc-accord-'+liter+'-'+openNum+'"]').addClass('active-accord');
	    $('div.content-accord[class*="uc-accord-'+liter+'-'+openNum+'"]').removeClass('hide-accord');  
	};
	
	setTimeout(function(){ $('.content-accord').addClass('time-step')}, 1500);

	function videoStop(){
	    setTimeout(function(){ 
	        $('div.content-accord.hide-accord[class*="uc-accord-'+liter+'-"]').each(function(){
	            let videoNum = $(this).find('div[data-elem-type="video"]').length;
	            if(videoNum){
                    $(this).find('div[data-elem-type="video"]').each(function(){
                        $(this).find('iframe').attr( 'src', function ( i, val ) { return val; });
                    });    
	            };
	        });
	    }, 300);
	};

	$('div[class*="uc-accord-'+liter+'"]').find('.accord').click(function(e){
        let cT = $(this).closest('.title-accord');
        let ind = cT.attr('data-accord-index');
        
        
        if(oneAcc){
            //По одной  вкладке
            if( cT.hasClass('active-accord') ){
                cT.removeClass('active-accord');
                $('div.content-accord[class*="uc-accord-'+liter+'-'+ind+'"]').toggleClass('hide-accord');  
                videoStop();
            }else{
                $('div.title-accord[class*="uc-accord-'+liter+'"]').removeClass('active-accord');
                cT.addClass('active-accord');
                $('div.content-accord[class*="uc-accord-'+liter+'-"]').addClass('hide-accord');
                $('div.content-accord[class*="uc-accord-'+liter+'-'+ind+'"]').removeClass('hide-accord');  
                videoStop();
            };
     
        }else{
            //По несколько вкладок
            cT.toggleClass('active-accord');
            $('div.content-accord[class*="uc-accord-'+liter+'-'+ind+'"]').toggleClass('hide-accord');  
            videoStop();
        };
        
            if(scroll){ //скролл до вкладки
            let el = $(this).closest('.r');
            setTimeout(function(){
                $('html, body').animate({scrollTop:  el.offset().top-50   }, 400);
            }, 600);
        };

	});
    
});
      
});
</script>

<style>
.hide-accord .t396__artboard {
    height: 0!important;
    pointer-events: none!important;
    overflow: hidden!important;
}    
.content-accord.time-step .t396__artboard , .accord-icon {   transition: all 0.4s ease-in-out}    
.content-accord {
    padding-top: 0!important;
    padding-bottom: 0!important;
}
.active-accord .accord-icon {  transform: rotate(180deg)}
.accord {  cursor: pointer}
</style>
Авто-блик кнопкиик
  1. Создаем ZERO блок с кнопкой
  2. Назначаем CSS CLASS NAME для кнопки - t580__btn
  3. Создаем блок T123 для вставки html кода
  4. Вставляем код в блок
<script>
          
    $('.t580__btn').addClass('autoflash').append('<div class="flash lighting" style="height: 60px;width: 40px;top: 0px;left: -140px;"></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, 0.5);
    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>
Авто-блик кнопки 2
  1. Создаем ZERO блок с кнопкой
  2. Назначаем CSS CLASS NAME для кнопки - t580__btn
  3. Создаем блок T123 для вставки html кода
  4. Вставляем код в блок
<script>
function button1() {
	 /* https://vakas.ru/tilda/effekty-animacii-dlia-knopok-v-tilde/ */
	$('.t-btn').addClass('autoink').append('<div class="ink animate" style="height: 200px;width: 350px;top: -20px;left: -140px;"></div>');
	$('.t-submit').addClass('autoink').append('<div class="ink animate" style="height: 200px;width: 350px;top: -20px;left: -140px;"></div>');
	$('.mybutton').addClass('autoink').append('<div class="ink animate" style="height: 200px;width: 350px;top: -20px;left: -140px;"></div>');
	$('div[data-elem-type="button"] .tn-atom').addClass('autoink').append('<div class="ink animate" style="height: 200px;width: 350px;top: -20px;left: -140px;"></div>');
}

setTimeout(button1, 1000);
setTimeout(button1, 3000);
</script>




<style>
     .autoink{
        position: relative;
        overflow: hidden;
    }
    .ink{
       display: block;
       position: absolute;
       background: rgba(255, 255, 255, 1.0);
       border-radius: 100%;
       -webkit-transform: scale(0);
       -moz-transform: scale(0);
       -o-transform: scale(0);
       transform: scale(0);
       z-index: 20;
    }

    .animate {
    webkit-animation: ripple 4s linear infinite;
    -moz-animation: ripple 4s linear infinite;
    -ms-animation: ripple 4s linear infinite;
    -o-animation: ripple 4s linear infinite;
    animation: ripple 4s linear infinite;
     }
   @keyframes ripple {
    20% {
        opacity: 0;
        transform: scale(2.5);
        }
    100% {
        opacity: 0;
        transform: scale(2.5);
        }
   }
</style>
Поп-ап окно на Zero блоке
  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 block
        var 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>
krylova2706job@gmail.com
Остались вопросы? Задайте вопрос тут
Made on
Tilda