스크롤했을때 나타나는 이미지

처음엔 안보이다가 스크롤을 했을때 스르륵 나타나는 이미지를

ES6를 사용해 만들어 봤습니다.

 

<div class="img">
  <div class="fill"></div>
</div>
<br><br>
<div class="img">
  <div class="fill"></div>
</div>

 

.img {
  position: relative;
  background: url(http://lorempixel.com/output/nightlife-q-c-400-400-3.jpg) 50% / cover;
  width: 400px;
  height: 400px;
}

.fill {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  background: #ddd;
  width: 100%;
  height: 100%;
  transform-origin: 100% 0;
  transition: all 1s ease;
}

.img.on .fill {
  transform: scaleX(0);
}

 

function view(){
	const img = document.querySelectorAll('.img');
 	const winTop = document.documentElement.scrollTop;
  
  img.forEach((i) => {
  	const imgTop = i.offsetTop-100;
    
    if( imgTop <= winTop )
    	i.classList.add('on')
  });
}

window.addEventListener('scroll', () => {
	view()
})

 

jsfiddle에서 보기

https://jsfiddle.net/hyuckjin/d8vbgyoe/6