6

Я видел этот классный эффект прокрутки онлайн ...

введите сюда описание изображения

Когда одно изображение совмещается с последующим изображением при прокрутке по секциям.

Я пытался воспроизвести этот эффект, но не могу понять, как сделать это?

Вот ссылка, где я видел этот эффект: http://readingbuddysoftware.com/how-it-works/

Я пробовал использовать position: fixed на скриншотах с z-index в разделе выше, чем изображение, но последний снимок экрана всегда находится вверху.

Update:
по разным причинам (включая размещение, используя наклон ...), я не могу использовать background-image css. Мне нужно решение для использования элемента <img>.

1

1 ответ 1

11

Это можно сделать, используя background-attachement: fixed и два похожих по размерам изображения.

Вот простой пример:

body {
  min-height:150vh;
  margin:0;
  background:url(https://lorempixel.com/g/100/100/) 50px 50px/auto no-repeat;
  background-attachment:fixed;
}

.box {
  margin-top:200px;
  height:200px;
  background:url(https://lorempixel.com/100/100/) 50px 50px/auto no-repeat,
  grey;
  background-attachment:fixed;
}
<div class="box">

</div>

Так же вы можете легко масштабировать смешивая большее количество изображений:

body {
  min-height:250vh;
  margin:0;
  background:url(https://lorempixel.com/g/100/100/) 50px 50px/auto no-repeat;
  background-attachment:fixed;
}

.box {
  height:200px;
  background:url(https://lorempixel.com/100/100/) 50px 50px/auto no-repeat,
  grey;
  background-attachment:fixed;
}
.box:first-child {
  margin-top:200px;
}
<div class="box">
</div>
<div class="box" style="background-image:url(https://lorempixel.com/100/100/sports);background-color:yellow">
</div>
<div class="box" style="background-image:url(https://lorempixel.com/100/100/food);background-color:pink">
</div>

UPDATE

Если вам не нравится решение с background-image, то вам будет необходимо использовать некоторое количество кода JS для того, чтобы переместить IMG тег.

window.onscroll = function() {
  var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
  document.documentElement.style.setProperty('--scroll-var', scroll+"px");
}
:root {
  --scroll-var: 0px;
}

body {
  min-height: 150vh;
  margin: 0;
}

img {
  position: fixed;
  top: 50px;
  left: 50px;
}

.box {
  margin-top: 200px;
  height: 200px;
  background: grey;
  position: relative;
  overflow: hidden;
}

.box img {
  top: calc(-200px + 50px + var(--scroll-var));
  /* margin of box + top of the other image + scroll*/
  position: absolute;
}
<img src="https://lorempixel.com/g/100/100/">
<div class="box">
  <img src="https://lorempixel.com/100/100/">
</div>

С несколькими изображениями:

window.onscroll = function() {
  var scroll = window.scrollY || window.scrollTop || document.getElementsByTagName("html")[0].scrollTop;
  document.documentElement.style.setProperty('--scroll-var', scroll+"px");
}
:root {
  --scroll-var: 0px;
}

body {
  min-height: 250vh;
  margin: 0;
  padding-top:200px;
}

img {
  position: fixed;
  top: 50px;
  left: 50px;
}

.box {
  height: 200px;
  background: grey;
  position: relative;
  overflow: hidden;
}
img.f1 {
  top: calc(-200px + 50px + var(--scroll-var));
  position: absolute;
}
img.f2 {
  top: calc(-400px + 50px + var(--scroll-var));
  position: absolute;
}
img.f3 {
  top: calc(-600px + 50px + var(--scroll-var));
  position: absolute;
}
<img src="https://lorempixel.com/g/100/100/">
<div class="box">
  <img class="f1" src="https://lorempixel.com/100/100/">
</div>
<div class="box" style="background-color:yellow;">
  <img class="f2" src="https://lorempixel.com/100/100/sports">
</div>
<div class="box" style="background-color:pink;">
  <img class="f3" src="https://lorempixel.com/100/100/animals">
</div>

Источник ответа

2
  • то что то типа parallax - да я уже раньше баловался такой штукой - но познавательно - + от меня
    – user33274
    17 июл 2018 в 3:42
  • Как всегда.....
    – Air
    27 июл 2018 в 10:40

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

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