javascript - 태그 - href란



CSS로 이미지 스크롤 블렌드 효과를 만드는 방법은 무엇입니까? (1)

이 작업은 background-attachement :fixed 및 두 개의 유사한 이미지를 사용하여 수행 할 수 있습니다.

다음은 간단한 예입니다.

body {
  min-height:200vh;
  margin:0;
  background:url(https://picsum.photos/g/150/150?image=1069) 20px 20px no-repeat;
  background-attachment:fixed;
}

.box {
  margin-top:220px;
  height:200px;
  background:url(https://picsum.photos/150/150?image=1069) 20px 20px 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>

최신 정보

배경 이미지 솔루션이 마음에 들지 않으면 img 태그를 옮기기 위해 일부 JS를 사용해야 할 의무가 있습니다 (이미지없이 JS없이이를 수행 할 수 있다고 생각하지 않습니다) .

다음은 스크롤을 사용하여 상자 안의 이미지 위치를 업데이트하고 overflow:hidden 사용하는 간단한 예제입니다 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;
  top: 20px;
  left: 20px;
}

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

.box img {
  top: calc(-220px + 20px + var(--scroll-var));
  /* margin of box + top of the other image + scroll*/
  position: absolute;
}
<img src="https://picsum.photos/g/150/150?image=1069">
<div class="box">
  <img src="https://picsum.photos/150/150?image=1069">
</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>

이 멋진 스크롤 효과를 온라인에서 보았습니다 ...

섹션을 스크롤 할 때 이미지가 다음 이미지와 혼합되는 위치. 나는 그것을 재현하려고 노력해 왔지만 그것을 알아낼 수는 없다. 웹에서이 효과를 만들려면 어떻게해야합니까?

여기 내가 효과를 보았던 곳의 링크입니다 ... http://readingbuddysoftware.com/how-it-works/

나는 position: fixed 사용하여 시도했다 position: fixed 이미지보다 높은 섹션의 z-index 가있는 스크린 샷에 position: fixed 되었지만 마지막 스크린 샷은 항상 맨 위에있다.

어떤 아이디어?

업데이트 : 다양한 이유로 (배치를 포함하여, 기울기를 사용하여 ...), background-image CSS 솔루션을 사용할 수 없습니다. 나는 <img> 요소를 사용하기위한 해결책이 필요하다.





css3