16

Как можно сделать такой параллакс эффект как здесь http://ljudi_kryma.tass.ru/?

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

.container {
  height: 2000px;
  background: gray;
}
<div class="cover">обложка</div>
<div class="container">текст</div>

2
  • Это называется параллакс эффект. Commented 4 мар. 2018 в 16:27
  • 7
    Вот именно это параллаксом не называется Commented 7 мар. 2018 в 6:42

2 ответа 2

23
+100

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

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

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

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

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

Основной завтык тут в том как заставить котейнер скроллиться вверх когда нужно вместо того чтобы везти его вверх. Тут помогла проверка 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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="sized" id="cover">обложка</div>
<div class="sized" id="container"><span>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.
</span></div>
<div class="sized" id="hider"></div>
<div class="sized" id="hint"></div>

8
  • скролл убрал, по второй претензии не совсем понял. или у меня не воспроизводится или попробуйте перефразировать. или гифку сделайте.
    – yolosora
    Commented 7 мар. 2018 в 11:13
  • Понял теперь, расчет был на то, что все блоки имеют размер экрана как на указанной странице. Окей, посмотрю как можно выкрутиться для такой ситуации.
    – yolosora
    Commented 7 мар. 2018 в 11:41
  • только ещё когда произошёл скролл надо url сменить
    – user33274
    Commented 11 мар. 2018 в 13:18
  • Я только хотел спросить как вы сделали что бы затемнитель не блокировал контент на фоне как на примере, а оказалось у вас его нет. Есть идеи как реализовать его как на сайте?
    – Telion
    Commented 12 мар. 2018 в 23:22
  • @Telion спасибо за замечание, легко. pointer-events: none в css для затемнителя
    – yolosora
    Commented 13 мар. 2018 в 4:06
4

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

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

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

6
  • @LADYX, я вижу только один вариант как сделать текст неподвижным - это установка container.styles.top в обработчике события scroll. Но, к сожалению, в мобильном Хроме это работает плохо: текст дергается при прокрутке.
    – yar85
    Commented 11 мар. 2018 в 12:59
  • И это никак побороть нельзя? - думаю что нельзя, т.к. браузер фактически два раза меняет позицию элемента (сначала при скролле, затем в JS-обработчике). Да, CONTENT_MARGINTOP - это верхний отступ контента: просто постоянная прибавка к значению top. Так я попытался компенсировать резкий скроллинг в Хроме.
    – yar85
    Commented 11 мар. 2018 в 14:33
  • Не понял, во втором демо у вас не дергается текст?
    – yolosora
    Commented 11 мар. 2018 в 16:22
  • @yolosora, в хроме на ПК у меня текст не дергается (даже если скроллить быстро), а в мобильном - дергается ужасно при любой скорости скроллинга.
    – yar85
    Commented 11 мар. 2018 в 20:16
  • @yar85 может от разрешения зависит... у вас какое?
    – yolosora
    Commented 12 мар. 2018 в 4:42

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.