-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
85 lines (75 loc) · 2.47 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
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
---
---
<!DOCTYPE html>
<html>
<head>
<title>The Process</title>
<meta charset="utf-8" />
<meta http-equiv="x-ua-compatible" content="ie=edge" />
<meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1" />
<meta name="google" value="notranslate">
<meta name="referrer" content="no-referrer"/>
<meta name="author" content="Jesse Talavera-Greenberg & Ranzi Tian"/>
<meta name="application-name" content="The Process"/>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js"></script>
<style>
body {
margin: 0;
padding: 0;
background-color: white;
display: block;
height: 500vh;
}
img {
height: 100vh;
position: fixed;
will-change: opacity;
}
main {
display: flex;
justify-content: center;
}
</style>
</head>
<body>
<noscript>Please enable JavaScript to see this work.</noscript>
{% comment %}
Images are sorted to guarantee that they'll be returned in the right order,
since I'm not assuming that the "where" filter will do that.
{% endcomment %}
{% assign images = site.static_files | where:"extname",".jpg" | sort:"basename" %}
<main id="images">
{% for image in images %}
<img id="img{{ forloop.index }}" style="z-index: {{ forloop.rindex }}" src="{{ image.path | remove_first:'/' }}" />
{% comment %}
First slash is removed so that image.path is made relative (otherwise it won't work as a subdirectory of my domain)
{% endcomment %}
{% endfor %}
</main>
<script>
var clamp = function(x, min, max) {
if (x < min) return min;
if (x > max) return max;
return x;
};
// imageNumber is a 0-index
var computeOpacity = function(x, numImages, imageNumber) {
return clamp(1 - (Math.pow(x - (imageNumber / (numImages - 1)), 2.25)) * Math.pow(numImages, 2), 0, 1);
};
var doc = $(document);
doc.ready(function() {
var images = $('img');
var numImages = images.length;
doc.scroll(function() {
var scrollHeight = document.body.scrollHeight;
var scrollTop = (window.pageYOffset !== undefined) ? window.pageYOffset : (document.documentElement || document.body).scrollTop;
// The top of the user's view to the page (i.e. won't ever be at the bottom)
var fraction = scrollTop / (scrollHeight - window.innerHeight);
images.each(function(i, element) {
$(element).css('opacity', computeOpacity(fraction, numImages, i));
});
});
});
</script>
</body>
</html>