-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
119 lines (115 loc) · 6.13 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
<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="asset/icon.png" />
<title>Walle</title>
<meta name="description" content="A slideshow that shows an animated SVG frame on the transitions between slides" />
<meta name="keywords" content="slideshow, javascript, frame, animation, svg, shape, path, web design" />
<meta name="author" content="Lisheng Chang" />
<!--<link rel="shortcut icon" href="favicon.ico">-->
<link rel="stylesheet" type="text/css" href="css/base.css" />
<script>document.documentElement.className="js";var supportsCssVars=function(){var e,t=document.createElement("style");return t.innerHTML="root: { --tmp-var: bold; }",document.head.appendChild(t),e=!!(window.CSS&&window.CSS.supports&&window.CSS.supports("font-weight","var(--tmp-var)")),t.parentNode.removeChild(t),e};supportsCssVars()||alert("Please view this demo in a modern browser that supports CSS Variables.");</script>
<script src="https://use.typekit.net/mei6cvo.js"></script>
<script>try{Typekit.load({ async: true });}catch(e){}</script>
</head>
<body class="demo-1 loading">
<main>
<div class="slideshow">
<div class="slides">
<div class="slide slide--current">
<div class="slide__img" style="background-image: url(img/180823.jpg)"></div>
<h2 class="slide__title">I will grow old with her</h2>
<p class="slide__desc">Just from afar</p>
<a class="slide__link" href="https://unsplash.com/photos/a-xEUwYSPLw">Photo by Molly Belle</a>
</div>
<div class="slide slide">
<div class="slide__img" style="background-image: url(img/180809.jpg)"></div>
<h2 class="slide__title">take my heart when you go</h2>
<p class="slide__desc">take mine in its place</p>
<a class="slide__link" href="https://unsplash.com/photos/9bFLTsaP_xo">Photo by Velizar Ivanov</a>
</div>
<div class="slide slide">
<div class="slide__img" style="background-image: url(img/180409.jpg)"></div>
<h2 class="slide__title">誤入世界</h2>
<p class="slide__desc">目的雖有,卻無路可循;我們稱之為路的,無非是躊躇</p>
<a class="slide__link" href="https://unsplash.com/photos/VdCr63BypLI">Photo by Ariel Domenden</a>
</div>
<div class="slide">
<div class="slide__img" style="background-image: url(img/180328.jpg)"></div>
<h2 class="slide__title">我亦飄零久</h2>
<p class="slide__desc">十年來 深恩負盡 死生師友</p>
<a class="slide__link" href="https://unsplash.com/photos/SUpvIqLW5YI">Photo by charlotte</a>
</div>
<div class="slide">
<div class="slide__img" style="background-image: url(img/180208.jpg)"></div>
<h2 class="slide__title">聚散都不由我</h2>
<p class="slide__desc">怨只怨人在風中</p>
<a class="slide__link" href="https://unsplash.com/photos/WypHPk6lBFQ">Photo by Alex</a>
</div>
<div class="slide">
<div class="slide__img" style="background-image: url(img/180119.jpg)"></div>
<h2 class="slide__title">別送我了</h2>
<p class="slide__desc">你一個人回去多難受</p>
<a class="slide__link" href="https://unsplash.com/photos/bLSMN09NCss">Photo by Bulkan Evcimen</a>
</div>
<div class="slide">
<div class="slide__img" style="background-image: url(img/180104.jpg)"></div>
<h2 class="slide__title">餞別</h2>
<p class="slide__desc">關山難越 誰悲失路之人 萍水相逢 盡是他鄉之客</p>
<a class="slide__link" href="https://unsplash.com/photos/3OC0aqDgZC0">Photo by Daniel Tseng</a>
</div>
<div class="slide">
<div class="slide__img" style="background-image: url(img/180101.jpg)"></div>
<h2 class="slide__title">2018</h2>
<p class="slide__desc">今天的妳和昨天一樣,並不會因為2018就可以改變什麼。</p>
<a class="slide__link" href="https://unsplash.com/photos/AmPRUnRb6N0">Photo by Oscar Keys</a>
</div>
<div class="slide">
<div class="slide__img" style="background-image: url(img/171220.jpg)"></div>
<h2 class="slide__title">思念</h2>
<p class="slide__desc">有人在思念我,在世間我活在一個人的心裏。</p>
<a class="slide__link" href="https://unsplash.com/photos/BmXDpCCQCLY">Photo by Louis Blythe</a>
</div>
<div class="slide">
<div class="slide__img" style="background-image: url(img/171221.jpg)"></div>
<h2 class="slide__title">山丘</h2>
<p class="slide__desc">越過山丘,才發現無人等候。</p>
<a class="slide__link" href="https://unsplash.com/photos/akT1bnnuMMk">Photo by Eric Ward</a>
</div>
<div class="slide">
<div class="slide__img" style="background-image: url(img/171225.jpg)"></div>
<h2 class="slide__title">你最喜歡的話</h2>
<p class="slide__desc">「你去死」,「滾開」。</p>
<a class="slide__link" href="https://unsplash.com/photos/wGKCaRbElmk">Photo by Cristian Newman</a>
</div>
<!--<div class="slide">
<div class="slide__img" style="background-image: url(img/mov4.jpg)"></div>
<h2 class="slide__title">Colossal</h2>
<p class="slide__desc">A matter of delicate proportions and aesthetics.</p>
<a class="slide__link" href="#">Explore our works</a>
</div>-->
</div>
<nav class="slidenav">
<button class="slidenav__item slidenav__item--prev">Previous</button>
<span>|</span>
<button class="slidenav__item slidenav__item--next">Next</button>
</nav>
</div>
</main>
<script src="js/demo.js"></script>
<script src="js/imagesloaded.pkgd.min.js"></script>
<script src="js/anime.min.js"></script>
<script src="js/demo1.js"></script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-48568977-4"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-48568977-4');
</script>
</body>
</html>