如何使用CSS创建图像滚动混合效果？

更新时间：2023-11-17 14:15:40

这可以使用 background-attachment $ c> ：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不重复，灰色; $ c>< 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; &GT; < 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>

上一篇 : ：创建框架类型列标题以在JavaFX 8中全选下一篇 : UITextField多行

如何使用CSS创建图像滚动混合效果？

相关阅读

推荐文章