<div class="mask">
	<div class="cont">
		<h1>Сайт на обновлении</h1>
		<h2>(покажем новые проекты)</h2>
			<div class="cont2">
					<div class="column1">
						<h3>пока вы видите это, действует <nobr>скидка 10%</nobr><h3>
						<h3 class="color">(на дизайн <nobr>и разработку</nobr> сайта)<h3>
						<div class="icon">
							<a href="https://t.me/shhhnastia" target="_blank"><img src="https://uxy-studio.com/wp-content/uploads/2022/09/1tg.svg" class="btn"></a>
							<a href="https://wa.me/79513538250" target="_blank"><img src="https://uxy-studio.com/wp-content/uploads/2022/09/1whatsapp.svg"class="btn"></a>
						</div>
					</div>
					<div class="column2">
						<img src="https://uxy-studio.com/wp-content/uploads/2022/09/magic-cat3-3.png" class="img">
					</div>
			</div>
	</div>
</div>
body {
	position: fixed;
	height: 100%;
  overflow: hidden;
}
canvas {
	position: absolute;
	width: 100vw;
	height: 100vh;
	top: 0;
	left: 0;
}
.mask {
	position: absolute;
	z-index: 2;
	background: linear-gradient(to top, rgba(59,36,153,0.8), rgba(59,36,153,0.6));
	height: 100vh;
	width: 100vw;
	overflow: hidden;
}
.cont {
	width: 100%;
	display: block;
	justify-content: space-between;
	margin-top: 12%;
	padding-left: 10%;
	padding-right:10%;
}
.cont2 {
	display: flex;
	width: 100%;
}
.color {
	width:75%;
	line-height: 1.2;
	color: #00E432;
	font-family: 'Playfair Display', serif;
	font-style: italic;
	text-align: left;
}
.column1 {
	width: 50%;
}
.column2 {
	display: flex;
	width: 50%;
}
.img {
	margin-top: -20%;
	width: 600px;
}
.icon {
	margin-top: 20px;
	gap: 20px;
}
.btn {
	border-radius: 100px;
	transition: all 0.5s ease;
}
.btn:hover {
	background: #00E432;
	border-radius: 100px;
	transition: all 0.5s ease;
}
@import url('https://fonts.googleapis.com/css2?family=Prosto+One&display=swap');
h1 {
	width: 90%;
	font-size: 7em;
	line-height: 1.2;
	font-family: 'Prosto One';
	color: #fff;
	text-transform: uppercase;
	word-wrap: break-word;
	z-index: 99;
}
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap');
h2 {
	width: 75%;
	font-size: 4em;
	font-family: 'Playfair Display', serif;
	font-style: italic;
	color: #00E432;
	text-align: right;
	z-index: 99;
	margin-bottom:200px;
}
h3 {
	width: 90%;
	font-size: 2em;
	z-index: 99;
	color: #fff;
	font-family: 'Prosto One';
	text-align: left;
}
@media (max-width: 1680px) {
	.img {
	margin-top: -25%;
}
	h1 {
		width: 85%;
		font-size: 8.8em;
		line-height: 1;
	}
	h2 {
		font-size: 3.5em;
		margin-bottom:150px;
	}
}
@media (max-width: 1400px) {
	.img {
	margin-top: -30%;
	width:650px;
}
	h1 {
		font-size: 7.6em;
	}
	h2 {
		font-size: 4em;
		width: 80%;
	}
}
@media (max-width: 1200px) {
	.img {
	margin-top: -35%;
		width: 580px;
}
	h1 {
		font-size: 6.8em;
	}
	h2 {
		font-size: 3em;
		margin-bottom: 250px;
	}
	h3 {
	font-size: 1.5em;
}
}
@media (max-width: 1100px) {
	.cont {
	margin-top: 25%;
}
	h1 {
		font-size: 5.6em;
	}
	h2 {
		font-size: 3em;
		margin-bottom: 150px;
	}
}
@media (max-width: 900px) {
	h1 {
		font-size: 5em;
	}
	.cont2 {
		width: 100%;
		flex-direction: column;
	}
	.column1 {
		width: 100%;
	}
	.column2 {
		width: 100%;
	}
	.img {
		position: absolute;
		right: -10%;
		bottom: -15%;
	}
}
@media (max-width: 780px) {
	h1 {
		font-size: 4.6em;
	}
	h2 {
		margin-bottom: 150px;
	}
	h3 {
	width: 75%;
	}
	.img {
		width: 450px;
		right: -10%;
		bottom: -8%;
	}
}
@media (max-width: 760px) {
	.img {
		display: none;
	}
	h1 {
		font-size: 3.8em;
	}
	h2 {
		margin-bottom: 200px;
	}
}
@media (max-width: 600px) {
	.cont {
	margin-top: 35%;
}
	h2 {
		font-size: 2em;
		margin-bottom: 130px;
	}
	h3 {
	width: 75%;
	font-size: 1.5em;
}
	.color {
	width: 75%;
}
}
View Compiled
var vertex = `
		attribute vec2 uv;
		attribute vec2 position;
		varying vec2 vUv;
		void main() {
				vUv = uv;
				gl_Position = vec4(position, 0, 1);
		}
`;
var fragment = `
		precision highp float;
		precision highp int;
		uniform sampler2D tWater;
		uniform sampler2D tFlow;
		uniform float uTime;
		varying vec2 vUv;
		uniform vec4 res;
		uniform vec2 img;

		vec2 centeredAspectRatio(vec2 uvs, vec2 factor){
				return uvs * factor - factor /2. + 0.5;
		}

		void main() {

			// R and G values are velocity in the x and y direction
			// B value is the velocity length
			vec3 flow = texture2D(tFlow, vUv).rgb;

			vec2 uv = .5 * gl_FragCoord.xy / res.xy ;

			// vec2 uv = .5 * gl_FragCoord.xy / res.xy ;
			vec2 myUV = (uv - vec2(0.5))*res.zw + vec2(0.5);
			myUV -= flow.xy * (0.15 * 1.2);

			vec2 myUV2 = (uv - vec2(0.5))*res.zw + vec2(0.5);
			myUV2 -= flow.xy * (0.125 * 1.2);

			vec2 myUV3 = (uv - vec2(0.5))*res.zw + vec2(0.5);
			myUV3 -= flow.xy * (0.10 * 1.4);

			vec3 tex = texture2D(tWater, myUV).rgb;
			vec3 tex2 = texture2D(tWater, myUV2).rgb;
			vec3 tex3 = texture2D(tWater, myUV3).rgb;

			gl_FragColor = vec4(tex.r, tex2.g, tex3.b, 1.0);
		}
`;
{
	var _size = [2048, 1638];
	var renderer = new ogl.Renderer({ dpr: 2 });
	var gl = renderer.gl;
	document.body.appendChild(gl.canvas);

	// Variable inputs to control flowmap
	var aspect = 1;
	var mouse = new ogl.Vec2(-1);
	var velocity = new ogl.Vec2();
	function resize() {
		gl.canvas.width = window.innerWidth * 2.0;
		gl.canvas.height = window.innerHeight * 2.0;
		gl.canvas.style.width = window.innerWidth + "px";
		gl.canvas.style.height = window.innerHeight + "px";

		var a1, a2;
		var imageAspect = _size[1] / _size[0];
		if (window.innerHeight / window.innerWidth < imageAspect) {
			a1 = 1;
			a2 = window.innerHeight / window.innerWidth / imageAspect;
		} else {
			a1 = window.innerWidth / window.innerHeight * imageAspect;
			a2 = 1;
		}
		mesh.program.uniforms.res.value = new ogl.Vec4(
			window.innerWidth,
			window.innerHeight,
			a1,
			a2
		);

		renderer.setSize(window.innerWidth, window.innerHeight);
		aspect = window.innerWidth / window.innerHeight;
	}
	var flowmap = new ogl.Flowmap(gl, {
		falloff: 0.8,
		dissipation: 0.92,
		alpha: 0.5
	});
	// Triangle that includes -1 to 1 range for 'position', and 0 to 1 range for 'uv'.
	var geometry = new ogl.Geometry(gl, {
		position: {
			size: 2,
			data: new Float32Array([-1, -1, 3, -1, -1, 3])
		},
		uv: { size: 2, data: new Float32Array([0, 0, 2, 0, 0, 2]) }
	});
	var texture = new ogl.Texture(gl, {
		minFilter: gl.LINEAR,
		magFilter: gl.LINEAR
	});
	var img = new Image();
	img.onload = () => (texture.image = img);
	img.crossOrigin = "Anonymous";
	img.src = "https://images.unsplash.com/photo-1626428091984-48f9ffbf927c?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1233&q=80";

	var a1, a2;
	var imageAspect = _size[1] / _size[0];
	if (window.innerHeight / window.innerWidth < imageAspect) {
		a1 = 1;
		a2 = window.innerHeight / window.innerWidth / imageAspect;
	} else {
		a1 = window.innerWidth / window.innerHeight * imageAspect;
		a2 = 1;
	}

	var program = new ogl.Program(gl, {
		vertex,
		fragment,
		uniforms: {
			uTime: { value: 0 },
			tWater: { value: texture },
			res: {
				value: new ogl.Vec4(window.innerWidth, window.innerHeight, a1, a2)
			},
			img: { value: new ogl.Vec2(_size[1], _size[0]) },
			// Note that the uniform is applied without using an object and value property
			// This is because the class alternates this texture between two render targets
			// and updates the value property after each render.
			tFlow: flowmap.uniform
		}
	});
	var mesh = new ogl.Mesh(gl, { geometry, program });

	window.addEventListener("resize", resize, false);
	resize();

	// Create handlers to get mouse position and velocity
	var isTouchCapable = "ontouchstart" in window;
	if (isTouchCapable) {
		window.addEventListener("touchstart", updateMouse, false);
		window.addEventListener("touchmove", updateMouse, { passive: false });
	} else {
		window.addEventListener("mousemove", updateMouse, false);
	}
	var lastTime;
	var lastMouse = new ogl.Vec2();
	function updateMouse(e) {
		e.preventDefault();
	
		if (e.changedTouches && e.changedTouches.length) {
			e.x = e.changedTouches[0].pageX;
			e.y = e.changedTouches[0].pageY;
		}
		if (e.x === undefined) {
			e.x = e.pageX;
			e.y = e.pageY;
		}
		// Get mouse value in 0 to 1 range, with y flipped
		mouse.set(e.x / gl.renderer.width, 1.0 - e.y / gl.renderer.height);
		// Calculate velocity
		if (!lastTime) {
			// First frame
			lastTime = performance.now();
			lastMouse.set(e.x, e.y);
		}

		var deltaX = e.x - lastMouse.x;
		var deltaY = e.y - lastMouse.y;

		lastMouse.set(e.x, e.y);

		var time = performance.now();

		// Avoid dividing by 0
		var delta = Math.max(10.4, time - lastTime);
		lastTime = time;
		velocity.x = deltaX / delta;
		velocity.y = deltaY / delta;
		// Flag update to prevent hanging velocity values when not moving
		velocity.needsUpdate = true;
	}
	requestAnimationFrame(update);
	function update(t) {
		requestAnimationFrame(update);
		// Reset velocity when mouse not moving
		if (!velocity.needsUpdate) {
			mouse.set(-1);
			velocity.set(0);
		}
		velocity.needsUpdate = false;
		// Update flowmap inputs
		flowmap.aspect = aspect;
		flowmap.mouse.copy(mouse);
		// Ease velocity input, slower when fading out
		flowmap.velocity.lerp(velocity, velocity.len ? 0.15 : 0.1);
		flowmap.update();
		program.uniforms.uTime.value = t * 0.01;
		renderer.render({ scene: mesh });
	}
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js
  2. https://robindelaporte.fr/codepen/bundle.js