VIAN COMMUNITY FREE

Мини код для Тильды - эффекты, скрипты, помощники, стили

Анимация увеличения изображения фона при наведении на шейп в нулевом блоке

Этот код поможет сделать анимацию наведения на шейп, фон увеличитввается, в заимосвязке с анимации Step By Step.

  1. Задаем класс шейпу "anim"
  2. Назначаем анимацию увеличение при наведении для шейпа, чтобы он увеличивался при наведении.
  3. Вставляем код в блок 123 html.
<script>var animEasingCheck = setInterval(function() { 
if ($(".sbs-anim-keyframes").length == 1) { 
var css = $(".sbs-anim-keyframes").html().replaceAll("linear", "cubic-bezier(0.34, 1, 0.68, 1)"); 
$(".sbs-anim-keyframes").text(""); 
setTimeout(function(){
$(".sbs-anim-keyframes").text(css); }); 
clearInterval(animEasingCheck); }}, 200)</script>

<style>
.anim { overflow: hidden; }
</style>

Текст на всю ширину своего контейнера в нулевом блоке

Этот код сделать делает текст на свю ширину контейнера, прямо как в вашем шокльном реферате, да пробелы ужасны, но кому то пригодится данный эффект.

  1. Задаем класс для текста в нулевом блоке"shirina"
  2. Вставляем код в блок 123 html.
<style>.shirina {
       text-align: justify;
   }
   </style>

Меню МЕ610 на всю ширину

  1. Копируем код,
  2. Меняем номер блока на свой
  3. Вставляем в блок Т123.
<style>
    
/* Стили для блока с ID rec1072896326 при ширине экрана от 961px и больше */
@media (min-width: 961px) {
    /* Стили для элементов с классом t395 */
    #rec1072896326 .t395 .t-container {
        max-width: 100%; /* Контейнер занимает всю доступную ширину */
    }
    
    #rec1072896326 .t395__col {
        max-width: calc(100% - 80px); /* Ширина колонки: 100% минус 80px */
        margin-left: 40px;            /* Отступ слева 40px */
        margin-right: 40px;           /* Отступ справа 40px */
    }

    /* Стили для элементов с классом t397 (дублирующая структура) */
    #rec1072896326 .t397 .t-container {
        max-width: 100%; /* Контейнер занимает всю доступную ширину */
    }
    
    #rec1072896326 .t397__col {
        max-width: calc(100% - 80px); /* Ширина колонки: 100% минус 80px */
        margin-left: 40px;            /* Отступ слева 40px */
        margin-right: 40px;           /* Отступ справа 40px */
    }
}
</style>

Иконка для кнопки подробнее в товарах (справа)

  1. Копируете код
  2. Меняете ссылку на иконку на свою
  3. Вставляете в Т123
<style>
    
.js-store-prod-btn2.t-store__card__btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    padding-right: 20px !important; /* Место под иконку */
    text-align: center !important;
}

.js-store-prod-btn2.t-store__card__btn::after {
    content: url('https://static.tildacdn.com/tild6365-6263-4730-b661-336531383163/Exclude.svg') !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) rotate(0deg) !important;
    width: 20px !important;
    height: 20px !important;
    display: inline-block !important;
    transition: transform 0.2s ease-in-out !important; /* Анимация */
}

.js-store-prod-btn2.t-store__card__btn:hover::after {
    transform: translateY(-50%) rotate(45deg) !important; /* Поворот при наведении */
}
</style>
2025-05-31 01:35