-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
103 lines (78 loc) · 4.35 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
<!DOCTYPE html>
<html class="scroll-smooth">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script src="./scrollifyReveal.js"></script>
<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
seablue: '#0d1117',
sombre: '#181818',
}
}
}
}
</script>
</head>
<body class="bg-sombre">
<div class="flex h-screen w-screen flex-col">
<div class="flex w-full h-24 bg-sombre items-center px-40 justify-end">
<a href="https://github.com/romainfb/Scrollify-Reveal" class="text-white text-lg font-bold uppercase"><i class='bx bxl-github'></i> Github</a>
</div>
<div class="flex w-full h-full bg-sombre flex-col pt-24 items-center">
<h1 class="text-white text-8xl font-bold py-6 onehundreddelay">Scrollify Reveal</h1>
<p class="text-white text-3xl font-thin threehundreddelay">Create animations of HTML elements as they appear or disappear on the page.</p>
<div class="flex flex-row space-x-8 py-20">
<a href="#demo" class="threehundreddelay button text-sombre bg-white px-8 py-2 text-3xl font-medium uppercase rounded-lg">Demo</a>
<a href="https://github.com/romainfb/Scrollify-Reveal" class="threehundreddelay button text-white border-white border-2 px-8 py-2 text-3xl font-medium uppercase rounded-lg"><i class='bx bxl-github'></i> Github</a>
</div>
<div class="flex w-full h-full justify-center space-x-12">
<div class="flex bg-white w-[5%] rounded-lg h-5/6 onehundreddelay hover:scale-110 duration-300"></div>
<div class="flex bg-white w-[5%] rounded-lg h-1/3 twohundreddelay hover:scale-110 duration-300"></div>
<div class="flex bg-white w-[5%] rounded-lg h-2/3 threehundreddelay hover:scale-110 duration-300"></div>
</div>
</div>
</div>
<div class="flex h-screen w-screen flex-col" id="demo">
<div class="flex h-full w-full justify-center items-center flex-col">
<h1 class="text-white text-8xl font-bold pb-12 onehundreddelay font-black">Demo time!</h1>
<div class="flex h-2/3 w-2/3 gap-4 flex-col">
<div class="flex w-full h-1/3 gap-4">
<div class="flex w-2/12 h-full bg-white rounded-lg onehundreddelay"></div>
<div class="flex w-4/12 h-full bg-white rounded-lg twohundredlongdelay items-center justify-center">
<p class="text-sombre text-4xl font-bold">Sorry I'm late!</p>
</div>
<div class="flex w-6/12 h-full bg-white rounded-lg threehundreddelay"></div>
</div>
<div class="flex w-full h-1/3 gap-4">
<div class="flex w-4/12 h-full bg-white rounded-lg twohundreddelay"></div>
<div class="flex w-6/12 h-full bg-white rounded-lg threehundreddelayfixed items-center justify-center">
<p class="text-sombre text-4xl font-bold">I'm not disappearing!</p>
</div>
<div class="flex w-2/12 h-full bg-white rounded-lg onehundreddelay"></div>
</div>
<div class="flex w-full h-1/3 gap-4">
<div class="flex w-6/12 h-full bg-white rounded-lg threehundreddelaydiscret justify-center items-center">
<p class="text-sombre text-4xl font-bold">I'm discreet!</p>
</div>
<div class="flex w-4/12 h-full bg-white rounded-lg twohundreddelay"></div>
<div class="flex w-2/12 h-full bg-white rounded-lg onehundreddelay"></div>
</div>
</div>
</div>
</div>
<script>
scrollifyReveal.reveal('.onehundreddelay', { delay: 100, duration: '800ms'});
scrollifyReveal.reveal('.twohundreddelay', { delay: 200, duration: '800ms'});
scrollifyReveal.reveal('.threehundreddelay', { delay: 300, duration: '800ms'});
scrollifyReveal.reveal('.threehundreddelayfixed', { delay: 300, duration: '800ms', hideOnExit: false});
scrollifyReveal.reveal('.twohundredlongdelay', { delay: 1200, duration: '800ms'});
scrollifyReveal.reveal('.threehundreddelaydiscret', { delay: 300, duration: '800ms', opacity: 0.7});
</script>
</body>
</html>