<style>
canvas {
position: fixed;
top: 0px;
left: 0px;
z-index: -1;
width: 100%;
height: 100%;
}
</style>
<script src="js/js/fon_fon.js"></script>
<script src="js/js/new_fon.js"></script>
<script type="x-shader/x-fragment" id="mask">
precision highp float;
uniform vec2 resolution;
uniform sampler2D image;
uniform vec2 imageResolution;
uniform float progress;
vec2 adjustRatio(vec2 uv, vec2 inputResolution, vec2 outputResolution) {
vec2 ratio = vec2(
min((outputResolution.x / outputResolution.y) / (inputResolution.x / inputResolution.y), 1.),
min((outputResolution.y / outputResolution.x) / (inputResolution.y / inputResolution.x), 1.)
);
return uv * ratio + (1. - ratio) * 0.5;
}
vec2 getZoomedUv(vec2 uv, float zoom, vec2 origin) {
origin.x = -origin.x;
uv += origin;
float scale = 1. / zoom;
vec2 zoomedUv = uv * scale;
zoomedUv -= 0.5 * (scale - 1.);
return zoomedUv;
}
const float maxMove = 0.032;
void main() {
vec2 uv = gl_FragCoord.st / resolution;
uv.y = 1. - uv.y;
uv = adjustRatio(uv, imageResolution, resolution);
uv = getZoomedUv(uv, 1. + maxMove, vec2((progress - 0.5) * maxMove, 0.));
gl_FragColor = texture2D(image, uv);
}
</script>