WebGLDistortionConfigurator/index4.html at master · Anemolo/WebGLDistortionConfigurator · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
<!DOCTYPE html>
<html lang="en" class="no-js">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>Configurator for Creating Custom WebGL Distortion Effects | Preset 4 | Codrops</title>
		<meta name="description" content="A configurator for creating unique fullscreen image animations with WebGL distortion effects powered by Three.js." />
		<meta name="keywords" content="configurator, animation, grid, fullscreen, liquid, effect, webgl, ripples, distortion, three.js" />
		<meta name="author" content="Daniel Velasquez for Codrops" />
		<link rel="shortcut icon" href="favicon.ico">
		<link rel="stylesheet" type="text/css" href="css/base.css" />
		<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script><script src="//tympanus.net/codrops/adpacks/analytics.js"></script>
	</head>
	<body class="loading cda-naked cda-noimg cda-removeleft  demo-4">
		<main>
			<div class="frame">
				<div class="frame__title-wrap">
					<h1 class="frame__title">Configurator for Creating Custom WebGL Distortion Effects</h1>
					<p class="frame__tagline">Click the image</a></p>
				</div>
				<div class="frame__links">
					<!--a href="">GitHub</a-->
					<a href="https://tympanus.net/Development/ImageTrailEffects/">Previous Demo</a>
					<a href="https://tympanus.net/codrops/?p=40753">Article</a>
				</div>
				<div class="frame__demos">
					<a href="index.html?default=true" class="frame__demo">preset 1</a>
					<a href="index2.html?default=true" class="frame__demo">preset 2</a>
					<a href="index3.html?default=true" class="frame__demo">preset 3</a>
					<a href="index4.html?default=true" class="frame__demo frame__demo--current">preset 4</a>
					<a href="index5.html?default=true" class="frame__demo">preset 5</a>
					<a href="index6.html?default=true" class="frame__demo">preset 6</a>
				</div>
			</div>
		<div id="app"></div>
			<div class="content" id="items-wrap">
				<div class="item">
					<img class="content__img" src="img/4.jpg" alt="An image" />
					<img class="content__img content__img--large" src="img/4_large.jpg" alt="An image" />
				</div>
			</div>
		</main>
		<script src="js/imagesloaded.pkgd.min.js"></script>
		<script src="js/three.min.js"></script>
		<script src="js/TweenLite.min.js"></script>
		<script src="js/CSSPlugin.min.js"></script>
		<script src="js/EasePack.min.js"></script>
		<script src="js/dat-gui.min.js"></script>
		<script src="js/Configurator.js"></script>
		<script src="js/GridToFullscreenEffect.js"></script>
		<script src="js/basicDemo.js"></script>
		<script>
			const itemsWrapper = document.getElementById('items-wrap');

			const configurator = createDemoConfigurator({
				activation: { type: "radial", props:{onMouse: true} },
				transformation: {
					type: "simplex",
					props: {
						frequencyX: 0.2,
						frequencyY: 0.2,
						amplitudeX: 0.3,
						amplitudeY: 0.3
					}
				},
				duration: 2.,
				easings: {
					toFullscreen: Power1.easeOut,
					toGrid: Power1.easeInOut
				}

			})
		imagesLoaded(document.querySelectorAll("img"), instance => {

			//https://www.techrepublic.com/article/preloading-and-the-javascript-image-object/
			document.body.classList.remove("loading");
			let images = [];
				for (var i = 0, imageSet = {}; i < instance.elements.length; i++) {
					let image = {
						element: instance.elements[i],
						image: instance.images[i].isLoaded ? instance.images[i].img : null
					};
					if (i % 2 === 0) {
						imageSet = {};
						imageSet.small = image;
					}

					if (i % 2 === 1) {
						imageSet.large = image;
						images.push(imageSet);
					}
				}
				configurator.effect.createTextures(images);
			});

		</script>
	<script src="https://tympanus.net/codrops/adpacks/demoad.js"></script></body>
</html>