Анимация увеличения изображения фона при наведении на шейп в нулевом блоке
Этот код поможет сделать анимацию наведения на шейп, фон увеличитввается, в заимосвязке с анимации Step By Step.
- Задаем класс шейпу "anim"
- Назначаем анимацию увеличение при наведении для шейпа, чтобы он увеличивался при наведении.
- Вставляем код в блок 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>
Текст на всю ширину своего контейнера в нулевом блоке
Этот код сделать делает текст на свю ширину контейнера, прямо как в вашем шокльном реферате, да пробелы ужасны, но кому то пригодится данный эффект.
- Задаем класс для текста в нулевом блоке"shirina"
- Вставляем код в блок 123 html.
<style>.shirina {
text-align: justify;
}
</style>
Меню МЕ610 на всю ширину
- Копируем код,
- Меняем номер блока на свой
- Вставляем в блок Т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>
Иконка для кнопки подробнее в товарах (справа)
- Копируете код
- Меняете ссылку на иконку на свою
- Вставляете в Т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>