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