Фильтр SVG: передержка с положением мыши - пример html js css

• HTML код


• CSS код
• JS код
• Результат кода

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">

    <filter id="filter">

        <feColorMatrix values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0 1"/>

    </filter>

    <image preserveAspectRatio="xMidYMid slice" width="100%" height="100%" href="https://assets.codepen.io/721952/forest.jpg" filter="url(#filter)"/>

</svg>



<div class="txt">0%</div>

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@200&display=swap');



html, body {

  width:100%;

  height:100%;

  font-family: 'Montserrat', sans-serif;

  font-size:22px;

}



.txt {

  position:fixed;

  left:10px;

  bottom:10px;

}

window.onmousemove = e => {

  const n = 1 + e.pageX / innerWidth * 100;

  gsap.to('feColorMatrix', { attr: { values: n + ' 0 0 0 0 0 ' + n + ' 0 0 0 0 0 ' + n + ' 0 0 0 0 0 0 1' } });

  gsap.to('.txt', {

    x: e.pageX - 70 * e.pageX / innerWidth,

    innerHTML: n - 1 + '%',

    snap: 'innerHTML', //force values to snap to a whole number

    color: 'hsla(0,0%,' + (99 - n * 2) + '%,1.0)' });



};

//# sourceURL=pen.js