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

#javascript #html #jquery #css

Здравствуйте! Подскажите, пожалуйста, никак не могу понять, как можно сделать такой
эффект с обложкой как здесь (http://ljudi_kryma.tass.ru/)? Спасибо!



.cover {
  height: 100%;
  height: 100vh;
  min-height: 700px;
  background: chocolate;
}

.container {
  height: 2000px;
  background: gray;
}
обложка
текст



    

Ответы

Ответ 1

Не знаю где тут коллеги увидели параллакс, но вот набросок решения.

Краткая суть: есть обложка с фиксированной позицией, она лежит поверх всего.

Есть контейнер с нашим контентом, изначально находится на той же позиции. Его мы
по событию скролл возим на величину скролла до упора в в границы страницы.

Есть затемнитель лежащий поверх котнейнера и имеющий те же размеры, обычный черный
слой, в зависимости от позиции накручиваем его прозрачность, возим его по полотну параллельно
с контейнером.

Есть элемент хинт, имеет размеры контейнера, стоит на фиксированной позиции после
обложки. Лежит подо всем, нужен для эмуляции большего размера страницы чтобы не прыгал
размер скроллбара.

Основной завтык тут в том как заставить котейнер скроллиться вверх когда нужно вместо
того чтобы везти его вверх. Тут помогла проверка scrollTop, если проскроллили страницу
больше чем на размер экрана, то элементы не возим.



var win_height = $(window).height();
var height = $('#container').height();
$('#hint, #hider').height(height);

var start_pos = height < win_height ? win_height - height : 0;
var saved_pos = $(document).scrollTop();
var container = $('#container');
var container_top;
var scroll_amount;
container.css({
  'top': start_pos + 'px'
});
$('#hider').css({
  'top': start_pos + 'px'
});
$(document).on('scroll', function() {
  current_pos = $(document).scrollTop();
  scroll_amount = current_pos - saved_pos;
  container_top = container.position().top;
  saved_pos = current_pos;
  if ((current_pos <= win_height + scroll_amount) || (container_top < win_height)) {
    var new_top = container_top + scroll_amount;
    if (new_top > win_height) new_top = win_height;
    else if (new_top < start_pos) new_top = start_pos;
    container.css({
      'top': new_top + 'px'
    });
    $('#hider').css({
      'top': new_top + 'px',
      'opacity': (height >= win_height) ? ((win_height - saved_pos) / win_height) :
        ((win_height - container_top) / height)
    });
  }
});
#cover {
  top: 0px;
  background: chocolate;
  z-index: 4;
  height: 100vh;
}

#container {
  background: green;
  z-index: 2;
}

#hider {
  opacity: 1.0;
  background: black;
  z-index: 3;
  pointer-events: none;
}

#hint {
  z-index: 1;
  top: 100vh;
}

.sized {
  position: absolute;
  width: 100%;
}

body {
  overflow-x: hidden;
}

обложка
Lorem ipsum dolor sit amet, consectetur adipiscing
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
  sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore
  eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt
in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet,
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat
  non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor
  in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.





Ответ 2

Самое простое решение, имхо: для container устанавливаем margin-top >50vh, и при
скролле страницы, смещаем фиксированный cover вверх на удвоенную величину window.pageYOffset
(через стиль top).
Таким образом, обложка будет "уползать" выше вьюпорта вдвое быстрее, чем выполняется
прокрутка. И при полном скрытии обложки, отступ content'а сверху будет равен его margin-top
минус 50vh.
Есть очевидный нюанс - контент будет двигаться при скролле пока обложка видна. При
просмотре на мобильном, это создает некоторое подобие эффекта параллакса (в примере
по ссылке из вопроса, такого нет).
Демо описанного выше варианта.  

upd: Только сейчас посмотрел на компе - в отличие от мобильного браузера, все это
страшненько смотрится, из-за большей скорости скролла и отсутствия его плавности. Единственным
вариантом остается смещение самого container через top, но это не годится для мобильных
браузеров (получается, один способ хорошо выглядит на мобильном браузере, другой -
в десктопном, а универсального варианта нет...).
Демо со сдвигом через content.style.top (не для мобильных браузеров, текст будет
дергаться).  

p.s.: Мой вариант принципиально не отличается от того что указан в предыдущего ответе
- в первую очередь, я хотел пояснить саму логику такой реализации.