-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
69 lines (60 loc) · 3.14 KB
/
index.html
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
<!DOCTYPE html>
<html>
<head>
<script>
var r = document.querySelector(':root');
function cargarImagen() {
//calcula la anchura y la altura del objeto "wigglegram"
r.style.setProperty('--wigglegram-width', document.getElementById('invisible').naturalWidth/2+'px' );
r.style.setProperty('--wigglegram-height', document.getElementById('invisible').naturalHeight+'px' );
//carga la imagen
r.style.setProperty('--wigglegram-image', "url("+document.getElementById('invisible').src+")" );
}
var show = "right";
setInterval(wiggleStepper, 200);
function wiggleStepper() {
if ( show == "right" ) {
document.getElementById("right").style.visibility = "visible";
document.getElementById("left").style.visibility = "hidden";
show = "left";
}
else {
document.getElementById("left").style.visibility = "visible";
document.getElementById("right").style.visibility = "hidden";
show = "right";
}
}
</script>
<style>
:root { --wigglegram-width; --wigglegram-height; --wigglegram-image; }
.wigglegram { position: relative; display: inline-block; overflow: hidden; width: var(--wigglegram-width); height: var(--wigglegram-height); }
.wiggle { background-image: var(--wigglegram-image); position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; mix-blend-mode: screen;}
.left { background-position: left 0; }
.right { background-position: right 0; }
</style>
</head>
<body>
<!-- ========== TRUCO PARA FORZAR LA CARGA DE LA IMAGEN ====== -->
<img id="invisible" style="display: none" onload = "cargarImagen()">
<script>document.getElementById('invisible').src = 'https://i.imgur.com/3TSTDNt.jpeg'</script>
<!-- ========== EL TEXTO DE LA PÁGINA EMPIEZA AQUÍ =========== -->
<h1>3D wigglegram from stereo pairs</h1>
<h2> On-the-fly wiggles</h2>
<p>The purpose of this web page is to generate stereo wiggles from stereoscopic pairs.</a>.
<p>Wiggles here are built on the fly using HTML5, CSS and JavaScript.
<p><p>Type a link to a stereoscopic pair in the box below and click the button <i>Wiggle it!</i>
<p><input type="text" id="url-image" size="75%" value="https://i.imgur.com/3TSTDNt.jpeg">
<button onclick="document.getElementById('invisible').src = document.getElementById('url-image').value">Wiggle it!</button>
</br><small>The default link is provided just in case you haven't got any on hand. It points to a classic stereoscopic pair called <i><a href="https://www.loc.gov/resource/stereo.1s27448/">A typical Irish street in Cork, Ireland.</a></i>
</small>
</br><small>The code of the present page is on repository <a href="https://github.com/raphikWasHere/wiggle-it/">https://github.com/raphikWasHere/wiggle-it/</a></small>
<!-- ========== EL TEXTO DE LA PÁGINA TERMINA AQUÍ =========== -->
<p><b>Wiggle 3D image</b></br>
<object class="wigglegram">
<img id="left" class="left wiggle">
<img id="right" class="right wiggle">
</object>
<p><small>:P 2023 raphik</small>
<p>
</body>
</html>