Browse code

Implement a new fullpage.js based scrolling and slide handling and remove the old one

Benjamin Roth authored on27/03/2015 12:46:35
Showing1 changed files
1 1
new file mode 100644
... ...
@@ -0,0 +1,202 @@
1
+/**
2
+ * fullPage 2.6.0
3
+ * https://github.com/alvarotrigo/fullPage.js
4
+ * MIT licensed
5
+ *
6
+ * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
7
+ */
8
+html, body {
9
+    margin: 0;
10
+    padding: 0;
11
+    overflow:hidden;
12
+
13
+    /*Avoid flicker on slides transitions for mobile phones #336 */
14
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
15
+}
16
+#superContainer {
17
+    height: 100%;
18
+    position: relative;
19
+
20
+    /* Touch detection for Windows 8 */
21
+    -ms-touch-action: none;
22
+
23
+    /* IE 11 on Windows Phone 8.1*/
24
+    touch-action: none;
25
+}
26
+.fp-section {
27
+    position: relative;
28
+    -webkit-box-sizing: border-box; /* Safari<=5 Android<=3 */
29
+    -moz-box-sizing: border-box; /* <=28 */
30
+    box-sizing: border-box;
31
+}
32
+.fp-slide {
33
+    float: left;
34
+}
35
+.fp-slide, .fp-slidesContainer {
36
+    height: 100%;
37
+    display: block;
38
+}
39
+.fp-slides {
40
+    z-index:1;
41
+    height: 100%;
42
+    overflow: hidden;
43
+    position: relative;
44
+    -webkit-transition: all 0.3s ease-out; /* Safari<=6 Android<=4.3 */
45
+    transition: all 0.3s ease-out;
46
+}
47
+.fp-section.fp-table, .fp-slide.fp-table {
48
+    display: table;
49
+    table-layout:fixed;
50
+    width: 100%;
51
+}
52
+.fp-tableCell {
53
+    display: table-cell;
54
+    vertical-align: middle;
55
+    width: 100%;
56
+    height: 100%;
57
+}
58
+.fp-slidesContainer {
59
+    float: left;
60
+    position: relative;
61
+}
62
+.fp-controlArrow {
63
+    position: absolute;
64
+    z-index: 4;
65
+    top: 50%;
66
+    cursor: pointer;
67
+    width: 0;
68
+    height: 0;
69
+    border-style: solid;
70
+    margin-top: -38px;
71
+    -webkit-transform: translate3d(0,0,0);
72
+    -ms-transform: translate3d(0,0,0);
73
+    transform: translate3d(0,0,0);
74
+}
75
+.fp-controlArrow.fp-prev {
76
+    left: 15px;
77
+    width: 0;
78
+    border-width: 38.5px 34px 38.5px 0;
79
+    border-color: transparent #fff transparent transparent;
80
+}
81
+.fp-controlArrow.fp-next {
82
+    right: 15px;
83
+    border-width: 38.5px 0 38.5px 34px;
84
+    border-color: transparent transparent transparent #fff;
85
+}
86
+.fp-scrollable {
87
+    overflow: scroll;
88
+}
89
+.fp-notransition {
90
+    -webkit-transition: none !important;
91
+    transition: none !important;
92
+}
93
+#fp-nav {
94
+    position: fixed;
95
+    z-index: 100;
96
+    margin-top: -32px;
97
+    top: 50%;
98
+    opacity: 1;
99
+    -webkit-transform: translate3d(0,0,0);
100
+}
101
+#fp-nav.right {
102
+    right: 17px;
103
+}
104
+#fp-nav.left {
105
+    left: 17px;
106
+}
107
+.fp-slidesNav{
108
+    position: absolute;
109
+    z-index: 4;
110
+    left: 50%;
111
+    opacity: 1;
112
+}
113
+.fp-slidesNav.bottom {
114
+    bottom: 17px;
115
+}
116
+.fp-slidesNav.top {
117
+    top: 17px;
118
+}
119
+#fp-nav ul,
120
+.fp-slidesNav ul {
121
+  margin: 0;
122
+  padding: 0;
123
+}
124
+#fp-nav ul li,
125
+.fp-slidesNav ul li {
126
+    display: block;
127
+    width: 14px;
128
+    height: 13px;
129
+    margin: 7px;
130
+    position:relative;
131
+}
132
+.fp-slidesNav ul li {
133
+    display: inline-block;
134
+}
135
+#fp-nav ul li a,
136
+.fp-slidesNav ul li a {
137
+    display: block;
138
+    position: relative;
139
+    z-index: 1;
140
+    width: 100%;
141
+    height: 100%;
142
+    cursor: pointer;
143
+    text-decoration: none;
144
+}
145
+#fp-nav ul li a.active span,
146
+.fp-slidesNav ul li a.active span,
147
+#fp-nav ul li:hover a.active span,
148
+.fp-slidesNav ul li:hover a.active span{
149
+    height: 12px;
150
+    width: 12px;
151
+    margin: -6px 0 0 -6px;
152
+    border-radius: 100%;
153
+ }
154
+#fp-nav ul li a span,
155
+.fp-slidesNav ul li a span {
156
+    border-radius: 50%;
157
+    position: absolute;
158
+    z-index: 1;
159
+    height: 4px;
160
+    width: 4px;
161
+    border: 0;
162
+    background: #333;
163
+    left: 50%;
164
+    top: 50%;
165
+    margin: -2px 0 0 -2px;
166
+    -webkit-transition: all 0.1s ease-in-out;
167
+    -moz-transition: all 0.1s ease-in-out;
168
+    -o-transition: all 0.1s ease-in-out;
169
+    transition: all 0.1s ease-in-out;
170
+}
171
+#fp-nav ul li:hover a span,
172
+.fp-slidesNav ul li:hover a span{
173
+    width: 10px;
174
+    height: 10px;
175
+    margin: -5px 0px 0px -5px;
176
+}
177
+#fp-nav ul li .fp-tooltip {
178
+    position: absolute;
179
+    top: -2px;
180
+    color: #fff;
181
+    font-size: 14px;
182
+    font-family: arial, helvetica, sans-serif;
183
+    white-space: nowrap;
184
+    max-width: 220px;
185
+    overflow: hidden;
186
+    display: block;
187
+    opacity: 0;
188
+    width: 0;
189
+}
190
+#fp-nav ul li:hover .fp-tooltip,
191
+#fp-nav.fp-show-active a.active + .fp-tooltip {
192
+    -webkit-transition: opacity 0.2s ease-in;
193
+    transition: opacity 0.2s ease-in;
194
+    width: auto;
195
+    opacity: 1;
196
+}
197
+#fp-nav ul li .fp-tooltip.right {
198
+    right: 20px;
199
+}
200
+#fp-nav ul li .fp-tooltip.left {
201
+    left: 20px;
202
+}