Как сделать такой эффект?

Question

[ChrisMenschenin]

Здравствуйте.
Как сделать эффект перелистывания как на этом сайте demos.themetrust.com/baylie/? Я не смог найти код на сайте.
Спасибо.

Answer 1

[alexandzolotarev]

Менять opacity.

Answer 2

[Юрий Есин]

Там страница разбита на несколько блоков. У самого первого стоит обычный эффект параллакса, происходит смещение фона с более низкой скоростью, чем у самого скролла. В сети есть более 35 готовых реализаций на любой вкус и цвет. Во втором блоке просто идёт активация по триггеру, как только позиция скролла достигает позиции блока, проявляется верхний элемент с надписью, такое тоже не сложно реализовать, в сети есть куча примеров на том же jQuery. У остальных двух блоков эффектов при скроллинге я не заметил.

Comments

[ChrisMenschenin]

Я про смену фотографий имел в виду, но всё равно спасибо.

[Юрий Есин]

ChrisMenschenin: Делаете внешнему блоку background-image, а внутренний растягиваете по ширине и высоте родителя, заливаете нужным цветом, добавляете надпись, делаете opacity: 0. Далее ставите дочернему transition, чтобы анимация была плавной, и прописываете дочернему при наведении на родителя opacity: 1. Выглядит примерно следующим образом:

<div class="parent">
    <span>Text</span>
</div>

.parent {
    background-image: url('/image.png');
    background-position: center;
    background-size: cover;
    position: relative;
    width: 25vw;
    height: 25rem;
}

.parent > * {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: inherit;
    display: block;
    text-align: center;
    padding-top: calc(50% - .5rem);    /* .5rem это половина вашего font-size */
    opacity: 0;
    transition: 750ms opacity ease-in-out;
    color: #f5f5f5;
    background: #f5164E;
}

.parent:hover > * {
    opacity: 1;
}

[ChrisMenschenin]

Юрий Есин: Спасибо огромное