Time Dilation

Developer
Josh Beckwith
Size
3,166 Kb
Views
26,312
  1. Time Dilation Previews
  2. Time Dilation HTML Codes
  3. Time Dilation CSS Codes
  4. Time Dilation JS Codes

How do I make an time dilation?

Pushing the limits of time and space (and CSS). What is a time dilation? How do you make a time dilation? This script and codes were developed by Josh Beckwith on 29 August 2022, Monday.

Time Dilation Previews
IQ Test

Time Dilation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Time Dilation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="layers"></div>
<div class="controls"> <div class="control"> <input id="layers" type="range" value="70" min="1" max="100"/> <label for="layers">layers</label> <div class="val"></div> </div> <div class="control"> <input id="offset-x" type="range" value="0" min="-400" max="400"/> <label for="offset-x">offset x</label> <div class="val"></div> </div> <div class="control"> <input id="offset-y" type="range" value="0" min="-400" max="400"/> <label for="offset-y">offset y</label> <div class="val"></div> </div> <div class="control"> <input id="dilation" type="range" value="-500" min="-640" max="2000"/> <label for="dilation">dilation</label> <div class="val"></div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Time Dilation - Script Codes CSS Codes

.layers { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 500px; height: 500px;
}
.layer { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); background-image: url("https://farm2.staticflickr.com/1142/5135054840_3c31e76d7b_z_d.jpg"); border-radius: 50%; /* border: 1px solid red;*/
}
.controls { position: absolute; left: 20px; top: 20px;
}
.controls .control { margin: 0px 0px 10px 0px;
}
.controls .val { float: right; margin-left: 20px;
}
body { background: black; color: white;
}

Time Dilation - Script Codes JS Codes

var layers = document.querySelector('.layers');
var layersInput = document.querySelector('#layers');
var offsetInputX = document.querySelector('#offset-x');
var offsetInputY = document.querySelector('#offset-y');
var dilation = document.querySelector('#dilation');
var controls = Array.prototype.slice.apply(document.querySelectorAll('.control'));
var render = function(){ layers.innerHTML = ''; var layerIndex = layersInput.value; while(layerIndex){ var layer = document.createElement('div'); layers.appendChild(layer); layer.className = 'layer'; layerIndex --; } update();
}
var update = function(){ console.log('update'); Array.prototype.slice.apply(layers.querySelectorAll('.layer')).forEach(function(layer, layerIndex){ console.log(layerIndex) var numLayers = layersInput.value; var size = layerIndex/numLayers * 100; layer.style.width = size + '%'; layer.style.height = size + '%'; layer.style.backgroundSize = 640 + (1-layerIndex/numLayers) * dilation.value + 'px'; layer.style.backgroundPositionX = layerIndex/numLayers * offsetInputX.value + '%'; layer.style.backgroundPositionY = layerIndex/numLayers * offsetInputY.value + '%'; layer.style.zIndex = numLayers - layerIndex; }); controls.forEach(function(control, i){ var val = control.querySelector('input').value; control.querySelector('.val').innerHTML = val; });
}
layersInput.addEventListener('change', render);
offsetInputX.addEventListener('input', update);
offsetInputY.addEventListener('input', update);
dilation.addEventListener('input', update);
render();
Time Dilation - Script Codes
Time Dilation - Script Codes
Home Page Home
Developer Josh Beckwith
Username positlabs
Uploaded August 29, 2022
Rating 3
Size 3,166 Kb
Views 26,312
Do you need developer help for Time Dilation?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Josh Beckwith (positlabs) Script Codes
Name
A Pen by Josh Beckwith
Spherical orbiter
HammerJS Test
Blurry text
Emoji Split with spliddit
Punch Button
JitterSCSS
Fly Eye CSS
Youtube 360 player sandbox
Temporalis
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!