only after

In this example below you will see how to do a only after with some HTML / CSS and Javascript

I reconsidered where did I come from. This eased my fear.

Thumbnail
This awesome code was written by ge1doot, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright ge1doot ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>only after</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <canvas></canvas>
<!-- Click to generate a new image -->
  <script src='js/https___codepen_io_ge1doo.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/ge1doot/only-after-LdjRqg */
html, body {
	overflow: hidden;
	touch-action: none;
	position: absolute;
	margin: 0;
	padding: 0;
	width: 100%;
	height: 100%;
	background: #000;
}
canvas {
	position: absolute;
	width: 100%; 
	height: 100%;
	user-select: none;
	cursor: pointer;
	background: #000;
}

/*Downloaded from https://www.codeseek.co/ge1doot/only-after-LdjRqg */
"use strict";
{
	const code = {
		setup() {
			this.render({
				startShape: 'start',
				transform: {s: 4, b: 1},
				background: '#111',
				minSize: 1,
				minComplexity: 1000,
				fov: 60,
				camDist: 300,
				lightPosition: [0.0, 5.0, -200.0],
				ambientColor: [0.1, 0.1, 0.1],
				diffuseColor: [0.2, 0.5, 0.8],
				specularColor: [1, 0.7, 0.2],
				shininess: 0.25
			});
		},
		rules() {
			return {
				start: s => {
					this.element(s, {b: 1});
					this.element(s, {x: -1, ry: 180, b: 1});
				},
				element: [
					1, s => {
						this.PLANE(s, {s:[1, 1, 2]});
						this.element(s, {x: 0.9, s: 0.99, hue: 1});
					},
					0.02, s => {
						this.PLANE(s, {s:[1, 1, 2]});
						this.element(s, {x: 1, s: 0.99, ry: 90});
						this.element(s, {x: 1, s: 0.99, ry: -90});
					},
					0.01, s => {
						this.PLANE(s, {s:[1, 1, 2]});
						this.element(s, {x: 0.6, y: 0.15, s: 0.99, ry: 30 });
					},
					0.01, s => {
						this.PLANE(s, {s:[1, 1, 2]});
						this.element(s, {x: 0.6, y: -0.15, s: 0.99, ry: -30 });
					},
					0.005, s => {
						this.CUBE(s, {y:25, s: [10, 50, 10], b: -0.2});
					},
				]
			};
		}
	};
	
	// import cfdg library
	cfdg.apply(code);
	// run code
	code.setup();
	// Click canvas to generate a new image
	["click", "touchdown"].forEach(event => {
		document.addEventListener(event, e => code.setup(), false);
	});
}

Comments