Сейчас узнаем, какой подарок выпадет именно Вам
Крутите колесо
Ура, вы выиграли!
Ваш приз:
Годовой доступ
к видео на mo-ti -20%
по промокоду T19RAY
Промокод действителен 3 дня

Оформить доступ с промокодом
100
#2470a1
Day pass
— A place in the openspace
— All facilities access: printer, beverages, lockers, etc.
— Access from 10:00 till 23:00
€10
Per day
FIrst Day
ПОДРОБНОЕ ОПИСАНИЕ
Second Day
ПОДРОБНОЕ ОПИСАНИЕ
Third Day
ПОДРОБНОЕ ОПИСАНИЕ

Как сделать карточку с анимацией при наведении в ZeroBlock Tilda

Как выполнили данный пример:
1. Создали ZeroBlock
2. Создали в нём:
2.1. Shape прозрачный с тенью и задали ему ссылку #bgshadowcard1
2.2. Два Shape серый и светлый , поместили поверх первого shape
2.3. Добавили текст "Мультилендинг" поместили поверх shape объектов
2.4. Добавили текст "ПОДРОБНОЕ ОПИСАНИЕ" поместили поверх shape объектов
2.5. Добавили Shape линию и задали ей ссылку #linecard1
2.6. Добавили shape для иконки 96х68 px, поместили в фон картинку
https://clck.ru/F5Ury , задали положение для фона position:right-top
И задали этому shape объекту ссылку #cardpic1
2.7. Создали последний прозрачный shape и наложили его на получившуюся карточку. Задали ему ссылку #mylink1

3. Добавили код на страницу
Скрипт вставляется в блок ДРУГОЕ►Т123
Код первой карточки

<style>
/*Стиль с отменой тени*/
    .noshadow{
        box-shadow: none  !important;
    }
/*Цвет текста при наведении*/    
    .hovercolor{
        color:#F24053 !important;
    }
/*Параметры анимации при наведении */   
    .shadowcard {
       transition:all 0.8s cubic-bezier(0, 0, 0.8, 1.0);  
    }
</style>

<script>
//Присваиваем классы к иконке
   $('[href="#cardpic1"]').addClass('cardicon iconforcard1');
//Присваиваем классы к shape с тенью   
   $('[href="#shadowbg1"]').addClass('bgshadowcard1 shadowcard');
//Позиция иконки на старте   
  var position1 = -2235;
  var direction1 = true;
//Функция анимации иконки...
function auto_play() {
   if (position1<-2100){direction1 = true};
   if (position1>-100){direction1 = false};
   if (direction1){position1 = position1+97.125}else{position1 = position1-97.125};
   $('.iconforcard1').css('background-position' , position1+'px'); 
};

//При наведении на элемент   
   $("[href='#mylink1']").hover(function(){
      //Меняем цвет надписи
                $('[href="#cardlink1"]').addClass('hovercolor');
      //Изменяем размер линии        
                $("[href='#linecard1']").parent(".tn-elem").stop(true,true).animate({width : '+=220',   }, 500, function() {   });
      //Убираем тень у объекта
                $('.bgshadowcard1').addClass('noshadow');
      //Запускаем иконку  
                  autoPlay = setInterval( auto_play, 30 );
                
        },function(){           
//Когда курсор вышел из зоны наведения...
      //Меняем цвет надписи
                $('[href="#cardlink1"]').removeClass('hovercolor');
      //Изменяем размер линии          
                $("[href='#linecard1']").parent(".tn-elem").stop(true,true).animate({width : '-=220',   }, 500, function() {   });
      //Убираем тень у объекта           
                $('.bgshadowcard1').removeClass('noshadow'); 
      //Останавливаем иконку   
                 clearInterval(autoPlay);
                
        });
</script>
Код второй карточки

<script>
//Присваиваем классы к иконке
   $('[href="#cardpic2"]').addClass('cardicon iconforcard2');
//Присваиваем классы к shape с тенью   
   $('[href="#shadowbg2"]').addClass('bgshadowcard2 shadowcard');
//Позиция иконки на старте   
  var position2 = -2208;
  var direction2 = true;
//Функция анимации иконки...
function auto_play2() {
   if (position2<-2100){direction2 = true};
   if (position2>-100){direction2 = false};
   if (direction2){position2 = position2+96}else{position2 = position2-96};
   $('.iconforcard2').css('background-position' , position2+'px'); 
};

//При наведении на элемент   
   $("[href='#mylink2']").hover(function(){
      //Меняем цвет надписи
                $('[href="#cardlink2"]').addClass('hovercolor');
      //Изменяем размер линии        
                $("[href='#linecard2']").parent(".tn-elem").stop(true,true).animate({width : '+=220',   }, 500, function() {   });
      //Убираем тень у объекта
                $('.bgshadowcard2').addClass('noshadow');
      //Запускаем иконку  
                  autoPlay2 = setInterval( auto_play2, 30 );
                
        },function(){           
//Когда курсор вышел из зоны наведения...
      //Меняем цвет надписи
                $('[href="#cardlink2"]').removeClass('hovercolor');
      //Изменяем размер линии          
                $("[href='#linecard2']").parent(".tn-elem").stop(true,true).animate({width : '-=220',   }, 500, function() {   });
      //Убираем тень у объекта           
                $('.bgshadowcard2').removeClass('noshadow'); 
      //Останавливаем иконку   
                 clearInterval(autoPlay2);
                
        });
</script>
Код третьей карточки

<script>
//Присваиваем классы к иконке
   $('[href="#cardpic3"]').addClass('cardicon iconforcard3');
//Присваиваем классы к shape с тенью   
   $('[href="#shadowbg3"]').addClass('bgshadowcard3 shadowcard');
//Позиция иконки на старте   
  var position3 = -2208;
  var direction3 = true;
//Функция анимации иконки...
function auto_play3() {
   if (position3<-2100){direction3 = true};
   if (position3>-100){direction3 = false};
   if (direction3){position3 = position3+96}else{position3 = position3-96};
   $('.iconforcard3').css('background-position' , position3+'px'); 
};

//При наведении на элемент   
   $("[href='#mylink3']").hover(function(){
      //Меняем цвет надписи
                $('[href="#cardlink3"]').addClass('hovercolor');
      //Изменяем размер линии        
                $("[href='#linecard3']").parent(".tn-elem").stop(true,true).animate({width : '+=220',   }, 500, function() {   });
      //Убираем тень у объекта
                $('.bgshadowcard3').addClass('noshadow');
      //Запускаем иконку  
                  autoPlay3 = setInterval( auto_play3, 30 );
                
        },function(){           
//Когда курсор вышел из зоны наведения...
      //Меняем цвет надписи
                $('[href="#cardlink3"]').removeClass('hovercolor');
      //Изменяем размер линии          
                $("[href='#linecard3']").parent(".tn-elem").stop(true,true).animate({width : '-=220',   }, 500, function() {   });
      //Убираем тень у объекта           
                $('.bgshadowcard3').removeClass('noshadow'); 
      //Останавливаем иконку   
                 clearInterval(autoPlay3);
                
        });
</script>
Made on
Tilda