Эффект затемнения css [закрыт]

102

21 октября 2019, 06:20

Как сделать такой эффект затемнения слайдера как здесь

чтобы при скроллинге изменялся стиль opacity

Answer 1

Можно как-то так, посчитать максимально возможною прокрутку, а дальше по формуле текущая_прозрачность = 1 - текущая_прокрутка\максимальная_прокрутка

const div = document.querySelector('div'); 
const maxScrollTop = document.body.clientHeight - window.innerHeight; 
 
window.addEventListener('scroll', () => { 
  div.style.opacity = 1 - window.pageYOffset/maxScrollTop; 
});

body{ 
  background: black; 
  height: 2000px; 
} 
div{ 
  position: fixed; 
  width: 100%; 
  height: 100%; 
  background: url('https://st4.depositphotos.com/1007248/22152/i/1600/depositphotos_221523808-stock-photo-various-chocolates-mint-leaves-small.jpg'); 
  background-size: cover;  
  opacity: 1; 
}