-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
125 lines (112 loc) · 4.1 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
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!doctype html>
<html lang="zh" class="no-js dark">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Vi</title>
<meta name="Description" content="Home Page of iissnan">
<script>(function(H){H.className=H.className.replace(/\bno-js\b/,'js')})(document.documentElement)</script>
<link rel="stylesheet" type="text/css" href="assets/css/main.css"/>
</head>
<body>
<div class="vi">
<h1 class="animate-slide-in-down">Vi</h1>
<div class="quote">
<span class="quote-line quote-line-start animate-slide-in-left"></span>
<span class="quote-icon quote-icon-start animate-slide-in-down">
<i class="icon icon-quotes-left"></i>
</span>
<p class="quote-content animate-slide-in-down">不积跬步，无以至千里。不积小流，无以成江海。</p>
<p class="quote-author animate-slide-in-down">《劝学篇》—— <em>荀子</em></p>
<span class="quote-icon quote-icon-end animate-slide-in-up">
<i class="icon icon-quotes-right"></i>
</span>
<span class="quote-line quote-line-end animate-slide-in-right"></span>
</div>
<div class="links">
<a href="https://github.com/iissnan" class="animate-slide-in-down">GitHub</a>
<a href="https://notes.iissnan.com" class="animate-slide-in-down">Notes</a>
<a href="https://douban.com/people/iissnan" class="animate-slide-in-down">DouBan</a>
<a href="https://weibo.com/iissnan" class="animate-slide-in-down">WeiBo</a>
</div>
<div class="location">
<span class="location-icon animate-slide-in-up">
<i class="icon icon-map-pin"></i>
</span>
<span class="location-text animate-slide-in-down">XiaMen - China</span>
</div>
<div class="relocating">
Navigating to: <span class="relocate-location"></span>...
</div>
</div>
<script src="assets/vendors/jquery-3.3.1.min.js"></script>
<script>
$(function () {
var SLIDE_IN_DOWN = { opacity: 1, top: 0 };
var SLIDE_IN_UP = { opacity: 1, bottom: 0 };
var SLIDE_IN_LEFT = { left: 0 };
var SLIDE_IN_RIGHT = { right: 0 };
registerCheatCode();
executeAnimations();
function executeAnimations() {
$.when()
.then(animateTitle)
.then(animateQuote)
.then(animateLinks)
.then(animateLocation);
}
function animateTitle() {
return animate('h1', SLIDE_IN_DOWN);
}
function animateQuote() {
return $.when(
animate('.quote-line-start', SLIDE_IN_LEFT),
animate('.quote-line-end',SLIDE_IN_RIGHT),
animate('.quote-icon-start', SLIDE_IN_DOWN),
animate('.quote-icon-end', SLIDE_IN_UP)
)
.then(function () {
return animate('.quote-content', SLIDE_IN_DOWN);
})
.then(function () {
return animate('.quote-author', SLIDE_IN_DOWN);
});
}
function animateLinks() {
var DELAY_STEP = 200;
var elements = $('.links a');
var concurrent = $.makeArray(elements)
.map(function (element, index) {
return animate(element, SLIDE_IN_DOWN, index * DELAY_STEP);
});
return $.when.apply($, concurrent);
}
function animateLocation() {
return $.when(
animate('.location-icon', SLIDE_IN_UP),
animate('.location-text', SLIDE_IN_DOWN)
);
}
function animate(selector, properties, delay, options) {
delay = delay || 0;
return $(selector).delay(delay)
.animate(properties, options)
.promise();
}
function registerCheatCode() {
$(document.body).on('keydown', function (event) {
var KEY_B = 66;
if (event.which === KEY_B) {
$('.relocate-location').text('Bookmark Page');
$('.relocating').css('opacity', 1);
window.setTimeout(function () {
window.location.href = '/bookmarks.html';
}, 1000);
}
});
}
});
</script>
</body>
</html>