如何使用CSS创建图像滚动混合效果？ [英] How to create image scrolling blend effect with CSS?

问题描述

我在网上看到了这个很酷的滚动效果......

在滚动片段时，图像与下一个图像混合。我一直试图重现它，但我似乎无法弄清楚它？
如何在网上创建这种效果？

以下是我看到效果的链接... http://readingbuddysoftware.com/how-it-works/

我已经尝试在截图中使用 position：fixed ，并使用 z-index ，但上一个截图始终位于顶部。

有什么想法？

更新：由于各种原因（包括放置，使用斜体......），我无法使用 background-image css解决方案。我需要一个解决方案来使用< img> 元素。

解决方案

这可以使用 background-attachment ：fixed 和两张相似的图片

这是一个简单的例如：
$ b

body {min-height：150vh;余量：0;背景：url（https://lorempixel.com/g/100/100/）50px 50px / auto no-repeat; background-attachment：fixed;}。box {margin-top：200px;高度：200像素;背景：url（https://lorempixel.com/100/100/）50px 50px / auto不重复，灰色; < div class = box>< / div>

轻松缩放多个图片：数据控制台=真数据

body {min-高度：250vh;余量：0;背景：url（https://lorempixel.com/g/100/100/）50px 50px / auto no-repeat; background-attachment：fixed;}。box {height：200px;背景：url（https://lorempixel.com/100/100/）50px 50px / auto不重复，灰色; < div class =box>< / div>< div class =boxstyle =background-image：url（https://lorempixel.com/100 / 100 / sports）; background-color：yellow>< / div>< div class =boxstyle =background-image：url（https://lorempixel.com/100/100/food） ;背景颜色：粉红色>< / div>

b
$ b

更新

如果您不喜欢背景图像解决方案，您将被迫使用一些JS来移动 img tag （我不认为你可以通过图片和JS来实现这一点）。

下面是一个简单的例子，我用滚动来更新框中图像的位置，并使用 overflow：hidden ，以便在需要时显示：

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;顶部：50px; left：50px;}。box {margin-top：200px; height：200px;背景：灰色;位置：相对; overflow：hidden;}。box img {top：calc（-200px + 50px + var（ -  scroll-var））; / *边框框+其他图像的顶部+滚动* /位置：绝对;}  

 < 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;保证金：0; padding-top：200px;} img {position：fixed;顶部：50px; left：50px;}。box {height：200px;背景：灰色;位置：相对; 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 =f1src =https://lorempixel.com/100/100/>< / div>< div class =boxstyle =background-color：yellow;> ; < img class =f2src =https://lorempixel.com/100/100/sports>< / div>< div class =boxstyle =background-color：pink; > < img class =f3src =https://lorempixel.com/100/100/animals>< / div>

I saw this cool scrolling effect online...

Where the image blends with the next image when scrolling through sections. I've been trying to reproduce it, but I can't seem to figure it out? How can I create this effect on the web?

Here is the link to where I saw the effect... http://readingbuddysoftware.com/how-it-works/

I've tried using position: fixed on the screenshots with the z-index of the section higher then the image, but the last screenshot is always on the top.

Any ideas?

Update: For various reasons (including placement, using slants...), I can't use the background-image css solution. I need a solution for using the <img> element.

解决方案

This can be done using background-attachement:fixed and two similar images.

Here is a simple example:

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>

That you can easily scale with many images:

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

If you don't like the background-image solution, you will be obliged to use some JS in order to move the img tag (I don't think you can achieve this with image and without JS).

Here is a simple example where I update the position of the image inside the box with the scroll and I use overflow:hidden so it shows when needed:

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>

With many images:

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>

这篇关于如何使用CSS创建图像滚动混合效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！