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

Оформить доступ с промокодом
100
#2470a1
Как сделать эффект автоскролла фона при наведении в блоке ТЕ225 и Zero в Tilda
Our Best Projects
We will help you to become a better designer
Project#1
Graphic design is the process of visual communication and problem-solving
Project#2
Information architecture is the art and science of structuring and organizing information
Project#3
It is a form of solution-based thinking with the intent of producing a constructive future result
Product #1
Graphic design is the process of visual communication and problem-solving
Product #2
Information architecture is the art and science of structuring and organizing the information
It is a form of solution-based thinking with the intent of producing a constructive future result
Product #3
Our Best Articles
We will help you to become a better designer
Read more
Read more
Read more

Как сделать эффект автоскролла фона при наведении в блоке ТЕ225 и Zero в Tilda

1
Создали блок TE225 и добавили в него вертикальные изображения
1*
В Zero добавили Shape с картинкой и задали ему класс hoverbg
2
Добавляем нужный код в блок Другое - Т123
Библиотека для примера
TE225

<style>
.t774__bgimg {
    background-position-y: top;
    transition: 1s ease-in-out;
}
.t774__wrapper:hover .t774__bgimg {
    background-position-y: bottom;
    transition: 2s linear;
}    
</style>
Библиотека для примера
ZeroBlock

<style>
.hoverbg .tn-atom{
    cursor:pointer;
}
</style>

<style>
.hoverbg .tn-atom {
    background-position-y: top;
    transition: 1s ease-in-out;
}
.hoverbg:hover .tn-atom {
    background-position-y: bottom !important;
    transition: 2s linear;
}    
</style>
Made on
Tilda