Good afternoon, tell me how to deliver css parameters during page scrolling. For example, if I start to scroll the transform page: scale (0.9); 0.9 decreases by 0.8 0.7 and so on to zero.

    1 answer 1

    Use the wheel event to change the scale while scrolling the wheel:

    var elem = document.getElementById('blockId'); var scale = 1; var scaleStep = 0.0001; if (elem.addEventListener) { if ('onwheel' in document) { // IE9+, FF17+, Ch31+ elem.addEventListener("wheel", onWheel); } else if ('onmousewheel' in document) { // устаревший вариант события elem.addEventListener("mousewheel", onWheel); } else { // Firefox < 17 elem.addEventListener("MozMousePixelScroll", onWheel); } } else { // IE8- elem.attachEvent("onmousewheel", onWheel); } function onWheel(e) { e = e || window.event; // wheelDelta не дает возможность узнать количество пикселей var delta = e.deltaY || e.detail || e.wheelDelta; scale = scale + delta*scaleStep; elem.innerHTML = scale; elem.style.transform = 'scale(' + scale + ')'; e.preventDefault ? e.preventDefault() : (e.returnValue = false); } 
      .block{ width:200px; height:200px; background:lightgrey; } 
     <div class="block" id="blockId"> </div>

    Use the scroll event to change the scale while scrolling the page:

     var elem = document.getElementById('blockId'); var scale = 1; var scaleStep = 0.0001; window.onscroll = function() { var scrolled = window.pageYOffset || document.documentElement.scrollTop; scale = scale + scrolled *scaleStep; elem.innerHTML = scale; elem.style.transform = 'scale(' + scale + ')'; } 
      .block{ width:200px; height:200px; background:lightgrey; } 
     <div class="block" id="blockId"> </div>