const farea = document.querySelector('#farea')
const bubble = document.querySelector('.bubble')
const rangeVal = document.querySelector('#r');
const rangeMin = rangeVal.getAttribute('min')
const rangeMax = rangeVal.getAttribute('max')
farea.addEventListener('input', () => {
if (farea.value.match(/[^0-9\.]/g)) {
farea.value = this.value.replace(/[^0-9\.]/g, '')
}
const inputValue = farea.value
const toOut = Math.max(rangeMin, Math.min(rangeMax, inputValue))
rangeVal.value = toOut
bubble.innerHTML = toOut
})let startFunctionPos = 400;
let isActiveFun = false;
window.addEventListener('scroll', () => {
if(!isActiveFun && window.pageYOffset > startFunctionPos ){
functionStart();//Запускаем функцию.
isActiveFun = !isActiveFun;// Чтобы не запустить 2 раз, в иделае убрать обработчик.
}
})
const img = document.getElementById(ID_твоей_картинки);
window.onscroll = () => {
const scrolled = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
// если достигли картинки (можно еще через IntersectionObserver)
if (scrolled > img.getBoundingClientRect().top) {
// step - это кол-во пикселей в шаге
const step = 2;
img.style.backgroundPosition = ((scrolled - img.getBoundingClientRect().top) * step) + "px 0px";
}
}