This repository has been archived by the owner on Mar 19, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 1
/
demo.html
78 lines (77 loc) · 2.6 KB
/
demo.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
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Dejavu.js Demo</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/normalize/3.0.3/normalize.min.css">
<style>
html,body{height:100%;}
*{box-sizing: border-box;}
ul{list-style:none;padding:0;}
li{position:relative;padding:0;}
figure{width:640px;margin:0;}
figcaption{
display:block;bottom:0;left:0;position:absolute;
width:640px;height:6em;color:white;padding:.5em 0 0 1em;
background-color: rgba(0, 0, 0, 0.5);
}
figcaption>h3{margin:0;padding:.5em 0;}
figcaption>h3{margin:0;padding:0;}
.br100{height:120%;clear:both;}
</style>
</head>
<body>
<h1>Dejavu.js Demo</h1>
<h2 id="hey">hey! are you bored? just scroll it down.</h2>
<div class="br100"></div>
<ul id="demo">
<li><figure>
<img src="https://unsplash.it/640/480?image=0" alt="Image 1">
<figcaption>
<h3>Image 1</h3>
<p>Some image placed here.</p>
</figcaption>
</figure></li>
<li><figure>
<img src="https://unsplash.it/640/480?image=100" alt="Image 2">
<figcaption>
<h3>Image 2</h3>
<p>Some image placed here.</p>
</figcaption>
</figure></li>
<li><figure>
<img src="https://unsplash.it/640/480?image=200" alt="Image 3">
<figcaption>
<h3>Image 3</h3>
<p>Some image placed here.</p>
</figcaption>
</figure></li>
<li><figure>
<img src="https://unsplash.it/640/480?image=300" alt="Image 4">
<figcaption>
<h3>Image 4</h3>
<p>Some image placed here.</p>
</figcaption>
</figure></li>
<li><figure>
<img src="https://unsplash.it/640/480?image=400" alt="Image 5">
<figcaption>
<h3>Image 5</h3>
<p>Some image placed here.</p>
</figcaption>
</figure></li>
</ul>
<div class="br100"></div>
<h2>Nice work. Scroll up again.</h2>
<script src="dejavu.js"></script>
<script>
Dejavu.debug = true;
window.onload = function(){
Dejavu('#demo');
document.querySelector('#demo').dejavu.on('inside', function(){
document.querySelector('#hey').innerHTML = 'good work. oh, I missing to tell you what something changed. scroll it down again.';
});
};
</script>
</body>
</html>