Как плавно сдвигать блоки?

Question

[olya095]

тоесть анимация при прокрутке страницы
как тут https://toccata.com.ua/
https://jsfiddle.net/roehq7c8/

Comments

[dintear_koden]

Для картинки нужно установить CSS-свойство background-attachment со значением fixed.
Для добавления плавного появления блоков можешь посмотреть это видео: https://www.youtube.com/watch?v=kupwmF72Plo
А счетчик можно сделать например таким способом: https://www.youtube.com/watch?v=sX3p6-NeaB4

О создании анимаций есть очень много различных статей и видео

[olya095]

dintear_koden, речь шла о паралаксе. Не подскажешь, пожалуйста? тут нестандартный какой-то

[dintear_koden]

Не заметил небольшого эффекта параллакса у картинки. Ну во-первых, если просмотреть код, то можно заметить, что у картинки стоит background-attachment: fixed; как я и писал ранее, но еще при скролле этой картинке добавляется background-position-y: 0; и оно меняется до значения -50px, его я не заметил сразу. Через консоль браузера, можно посмотреть и реализацию присвоения этого свойства и его изменения через js. Вот фрагмент кода для реализации такого эффекта:

let initialYOffset = window.pageYOffset;
let parallaxContainers = document.querySelectorAll('.parallax');

window.addEventListener('scroll', function (event) {
    if (window.pageYOffset > initialYOffset) { // При скролле вниз

        parallaxContainers.forEach(function (item) {
            let currentBackgroundPos = item.style.backgroundPositionY;

            if (currentBackgroundPos) {
                if (parseInt(currentBackgroundPos) > -50) {
                    item.style.backgroundPositionY = (parseInt(currentBackgroundPos) - 2) + 'px';
                }
            } else {
                item.style.backgroundPositionY = '0px';
            }
        });

    } else { // При скролле вверх

        parallaxContainers.forEach(function (item) {
            let currentBackgroundPos = item.style.backgroundPositionY;

            if (parseInt(currentBackgroundPos) != 0) {
                item.style.backgroundPositionY = (parseInt(currentBackgroundPos) + 2) + 'px';
            }
        });
    }

    initialYOffset = window.pageYOffset;
});

[dintear_koden]

olya095, если интересен какой-то эффект на сайте, то зачастую, можно этот эффект просмотреть через "Просмотреть код элемента" и уже в открывшемся окне выбрать все что нужно. В elements найти нужный элемент с интересующим эффектом, а в source все файлы HTML, CSS, JS и картинки