<style>
    .image-skew {transition: transform .2s linear;}
</style>
<script>
document.addEventListener('DOMContentLoaded', (event) => {
// максимальное искажение (в данном случае на 50px
const max = 50;

let checkScrollSpeed=(function(settings){settings=settings||{};var lastPos,newPos,timer,delta,delay=settings.delay||50;function clear(){lastPos=null;delta=0}
clear();return function(){newPos=window.scrollY;if(lastPos!=null){delta=newPos-lastPos}
lastPos=newPos;clearTimeout(timer);timer=setTimeout(clear,delay);return delta}})();function debounce(func,wait,immediate){let timeout;return function executedFunction(){const context=this;const args=arguments;const later=function(){timeout=null;if(!immediate)func.apply(context,args)};const callNow=immediate&&!timeout;clearTimeout(timeout);timeout=setTimeout(later,wait);if(callNow)func.apply(context,args)}};function setSkew(skew){let elem=document.querySelectorAll('.image-skew').forEach((el)=>el.style.transform='skewY('+skew+'deg)')}
const setBack=debounce(function(){let elem=document.querySelectorAll('.image-skew').forEach((el)=>el.style.transform='skewY(0deg)')},100);if(window.matchMedia("(min-width: 960px)").matches){window.onscroll=function(){let speed=checkScrollSpeed();if(speed>max)speed=max;if(speed<-max)speed=-max;setSkew(speed/10);setBack()}}
});
</script>