@makssshow

Как сделать движение блоков при скролле?

<div class=" portfol">
            <a href="##">
                <img src="img/progects/photo-01.png" alt="pr1">
            </a>
            <div>website</div>
        </div>

.portfol {
    margin: 0 80px 0 0;
    width: 400px;
    font-family: $Mor;
    font-size: 10px;
    text-align: left;

    img {
        width: 400px;
        height: 700px;
        margin-bottom: 31px;
        transform: translateY(-150px);
    }

    div {
        text-align: right;
        padding-bottom: 31px;
        border-bottom: 1px solid $dark;
    }
}

5f612894a114f437852391.png
Нужно, чтобы при скролле (Это уже середина страницы) картинка постепенно, ИМЕННО ПОСТЕПЕННО, изменяла transform до 0. Начинала это делать, когда появиться на экране и закончит, когда полностью появится на экране. С возвратом, то есть, при скролле наверх все было в обратную сторону.
5f6128be7996b141609756.png
  • Вопрос задан
  • 72 просмотра
Решения вопроса 1
sharnirio
@sharnirio
Front-end developer
как вариант для этой задачи scrollmagic + gsap - будет что то по типу - link
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы