parallaxslider-rails 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -0,0 +1,694 @@
1
+ .da-slider{
2
+ width: 100%;
3
+ min-width: 520px;
4
+ height: 400px;
5
+ position: relative;
6
+ margin: 30px auto;
7
+ overflow: hidden;
8
+ background: transparent url(../images/waves.gif) repeat 0% 0%;
9
+ border-top: 8px solid #efc34a;
10
+ border-bottom: 8px solid #efc34a;
11
+ box-shadow: 0px 1px 1px rgba(0,0,0,0.2), 0px -2px 1px #fff;
12
+ -webkit-transition: background-position 1s ease-out 0.3s;
13
+ -moz-transition: background-position 1s ease-out 0.3s;
14
+ -o-transition: background-position 1s ease-out 0.3s;
15
+ -ms-transition: background-position 1s ease-out 0.3s;
16
+ transition: background-position 1s ease-out 0.3s;
17
+ }
18
+ .da-slide{
19
+ position: absolute;
20
+ width: 100%;
21
+ height: 100%;
22
+ top: 0px;
23
+ left: 0px;
24
+ font-family: 'BebasNeueRegular', 'Arial Narrow', Arial, sans-serif;
25
+ text-align: left;
26
+ }
27
+ .da-slide-current{
28
+ z-index: 1000;
29
+ }
30
+ .da-slider-fb .da-slide{
31
+ left: 100%;
32
+ }
33
+ .da-slider-fb .da-slide.da-slide-current{
34
+ left: 0px;
35
+ }
36
+ .da-slide h2,
37
+ .da-slide p,
38
+ .da-slide .da-link,
39
+ .da-slide .da-img{
40
+ position: absolute;
41
+ opacity: 0;
42
+ left: 110%;
43
+ }
44
+ .da-slider-fb .da-slide h2,
45
+ .da-slider-fb .da-slide p,
46
+ .da-slider-fb .da-slide .da-link{
47
+ left: 10%;
48
+ opacity: 1;
49
+ }
50
+ .da-slider-fb .da-slide .da-img{
51
+ left: 60%;
52
+ opacity: 1;
53
+ }
54
+ .da-slide h2{
55
+ color: #fff;
56
+ font-size: 66px;
57
+ width: 50%;
58
+ top: 60px;
59
+ white-space: nowrap;
60
+ z-index: 10;
61
+ text-shadow: 1px 1px 1px rgba(0,0,0,0.1);
62
+ font-family: 'Economica', Arial, sans-serif;
63
+ font-weight: 700;
64
+ }
65
+ .da-slide p{
66
+ width: 45%;
67
+ top: 155px;
68
+ color: #916c05;
69
+ font-size: 18px;
70
+ line-height: 26px;
71
+ height: 80px;
72
+ overflow: hidden;
73
+ font-style: italic;
74
+ font-family: 'Economica', Arial, sans-serif;
75
+ font-weight: 400;
76
+ font-style: italic;
77
+ }
78
+ .da-slide .da-img{
79
+ text-align: center;
80
+ width: 30%;
81
+ top: 70px;
82
+ height: 256px;
83
+ line-height: 320px;
84
+ left: 110%; /*60%*/
85
+ }
86
+ .da-slide .da-link{
87
+ top: 270px; /*depends on p height*/
88
+ border-radius: 30px;
89
+ box-shadow: 0px 1px 1px rgba(0,0,0,0.1);
90
+ color: #fff;
91
+ text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
92
+ border: 8px solid rgba(255,255,255,0.8);
93
+ padding: 2px 20px 0px;
94
+ font-size: 18px;
95
+ line-height: 30px;
96
+ width: 80px;
97
+ text-align: center;
98
+ background: rgba(255,255,255,0.2);
99
+ }
100
+ .da-slide .da-link:hover{
101
+ background: rgba(255,255,255,0.3);
102
+ }
103
+ .da-dots{
104
+ width: 100%;
105
+ position: absolute;
106
+ text-align: center;
107
+ left: 0px;
108
+ bottom: 20px;
109
+ z-index: 2000;
110
+ -moz-user-select: none;
111
+ -webkit-user-select: none;
112
+ }
113
+ .da-dots span{
114
+ display: inline-block;
115
+ position: relative;
116
+ width: 12px;
117
+ height: 12px;
118
+ border-radius: 50%;
119
+ background: #e4b42d;
120
+ margin: 3px;
121
+ cursor: pointer;
122
+ box-shadow:
123
+ 1px 1px 1px rgba(0,0,0,0.1) inset,
124
+ 1px 1px 1px rgba(255,255,255,0.1);
125
+ }
126
+ .da-dots span.da-dots-current:after{
127
+ content: '';
128
+ width: 8px;
129
+ height: 8px;
130
+ position: absolute;
131
+ top: 2px;
132
+ left: 2px;
133
+ border-radius: 50%;
134
+ background: rgb(255,255,255);
135
+ background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(246,246,246,1) 47%, rgba(237,237,237,1) 100%);
136
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,255,255,1)), color-stop(47%,rgba(246,246,246,1)), color-stop(100%,rgba(237,237,237,1)));
137
+ background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
138
+ background: -o-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
139
+ background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
140
+ background: linear-gradient(top, rgba(255,255,255,1) 0%,rgba(246,246,246,1) 47%,rgba(237,237,237,1) 100%);
141
+ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
142
+ }
143
+ .da-arrows{
144
+ -moz-user-select: none;
145
+ -webkit-user-select: none;
146
+ }
147
+ .da-arrows span{
148
+ position: absolute;
149
+ top: 50%;
150
+ height: 30px;
151
+ width: 30px;
152
+ border-radius: 50%;
153
+ background: #e4b42d;
154
+ cursor: pointer;
155
+ z-index: 2000;
156
+ opacity: 0;
157
+ box-shadow:
158
+ 1px 1px 1px rgba(0,0,0,0.1) inset,
159
+ 1px 1px 1px rgba(255,255,255,0.1);
160
+ -webkit-transition: opacity 0.4s ease-in-out-out 0.2s;
161
+ -moz-transition: opacity 0.4s ease-in-out-out 0.2s;
162
+ -o-transition: opacity 0.4s ease-in-out-out 0.2s;
163
+ -ms-transition: opacity 0.4s ease-in-out-out 0.2s;
164
+ transition: opacity 0.4s ease-in-out-out 0.2s;
165
+ }
166
+ .da-slider:hover .da-arrows span{
167
+ opacity: 1;
168
+ }
169
+ .da-arrows span:after{
170
+ content: '';
171
+ position: absolute;
172
+ width: 20px;
173
+ height: 20px;
174
+ top: 5px;
175
+ left: 5px;
176
+ background: transparent url(../images/arrows.png) no-repeat top left;
177
+ border-radius: 50%;
178
+ box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
179
+ }
180
+ .da-arrows span:hover:after{
181
+ box-shadow: 1px 1px 4px rgba(0,0,0,0.3);
182
+ }
183
+ .da-arrows span:active:after{
184
+ box-shadow: 1px 1px 1px rgba(255,255,255,0.1);
185
+ }
186
+ .da-arrows span.da-arrows-next:after{
187
+ background-position: top right;
188
+ }
189
+ .da-arrows span.da-arrows-prev{
190
+ left: 15px;
191
+ }
192
+ .da-arrows span.da-arrows-next{
193
+ right: 15px;
194
+ }
195
+
196
+ .da-slide-current h2,
197
+ .da-slide-current p,
198
+ .da-slide-current .da-link{
199
+ left: 10%;
200
+ opacity: 1;
201
+ }
202
+ .da-slide-current .da-img{
203
+ left: 60%;
204
+ opacity: 1;
205
+ }
206
+ /* Animation classes and animations */
207
+
208
+ /* Slide in from the right*/
209
+ .da-slide-fromright h2{
210
+ -webkit-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
211
+ -moz-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
212
+ -o-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
213
+ -ms-animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
214
+ animation: fromRightAnim1 0.6s ease-in-out 0.8s both;
215
+ }
216
+ .da-slide-fromright p{
217
+ -webkit-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
218
+ -moz-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
219
+ -o-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
220
+ -ms-animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
221
+ animation: fromRightAnim2 0.6s ease-in-out 0.8s both;
222
+ }
223
+ .da-slide-fromright .da-link{
224
+ -webkit-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
225
+ -moz-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
226
+ -o-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
227
+ -ms-animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
228
+ animation: fromRightAnim3 0.4s ease-in-out 1.2s both;
229
+ }
230
+ .da-slide-fromright .da-img{
231
+ -webkit-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
232
+ -moz-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
233
+ -o-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
234
+ -ms-animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
235
+ animation: fromRightAnim4 0.6s ease-in-out 0.8s both;
236
+ }
237
+ @-webkit-keyframes fromRightAnim1{
238
+ 0%{ left: 110%; opacity: 0; }
239
+ 100%{ left: 10%; opacity: 1; }
240
+ }
241
+ @-webkit-keyframes fromRightAnim2{
242
+ 0%{ left: 110%; opacity: 0; }
243
+ 100%{ left: 10%; opacity: 1; }
244
+ }
245
+ @-webkit-keyframes fromRightAnim3{
246
+ 0%{ left: 110%; opacity: 0; }
247
+ 1%{ left: 10%; opacity: 0; }
248
+ 100%{ left: 10%; opacity: 1; }
249
+ }
250
+ @-webkit-keyframes fromRightAnim4{
251
+ 0%{ left: 110%; opacity: 0; }
252
+ 100%{ left: 60%; opacity: 1; }
253
+ }
254
+
255
+ @-moz-keyframes fromRightAnim1{
256
+ 0%{ left: 110%; opacity: 0; }
257
+ 100%{ left: 10%; opacity: 1; }
258
+ }
259
+ @-moz-keyframes fromRightAnim2{
260
+ 0%{ left: 110%; opacity: 0; }
261
+ 100%{ left: 10%; opacity: 1; }
262
+ }
263
+ @-moz-keyframes fromRightAnim3{
264
+ 0%{ left: 110%; opacity: 0; }
265
+ 1%{ left: 10%; opacity: 0; }
266
+ 100%{ left: 10%; opacity: 1; }
267
+ }
268
+ @-moz-keyframes fromRightAnim4{
269
+ 0%{ left: 110%; opacity: 0; }
270
+ 100%{ left: 60%; opacity: 1; }
271
+ }
272
+
273
+ @-o-keyframes fromRightAnim1{
274
+ 0%{ left: 110%; opacity: 0; }
275
+ 100%{ left: 10%; opacity: 1; }
276
+ }
277
+ @-o-keyframes fromRightAnim2{
278
+ 0%{ left: 110%; opacity: 0; }
279
+ 100%{ left: 10%; opacity: 1; }
280
+ }
281
+ @-o-keyframes fromRightAnim3{
282
+ 0%{ left: 110%; opacity: 0; }
283
+ 1%{ left: 10%; opacity: 0; }
284
+ 100%{ left: 10%; opacity: 1; }
285
+ }
286
+ @-o-keyframes fromRightAnim4{
287
+ 0%{ left: 110%; opacity: 0; }
288
+ 100%{ left: 60%; opacity: 1; }
289
+ }
290
+
291
+ @-ms-keyframes fromRightAnim1{
292
+ 0%{ left: 110%; opacity: 0; }
293
+ 100%{ left: 10%; opacity: 1; }
294
+ }
295
+ @-ms-keyframes fromRightAnim2{
296
+ 0%{ left: 110%; opacity: 0; }
297
+ 100%{ left: 10%; opacity: 1; }
298
+ }
299
+ @-ms-keyframes fromRightAnim3{
300
+ 0%{ left: 110%; opacity: 0; }
301
+ 1%{ left: 10%; opacity: 0; }
302
+ 100%{ left: 10%; opacity: 1; }
303
+ }
304
+ @-ms-keyframes fromRightAnim4{
305
+ 0%{ left: 110%; opacity: 0; }
306
+ 100%{ left: 60%; opacity: 1; }
307
+ }
308
+
309
+ @keyframes fromRightAnim1{
310
+ 0%{ left: 110%; opacity: 0; }
311
+ 100%{ left: 10%; opacity: 1; }
312
+ }
313
+ @keyframes fromRightAnim2{
314
+ 0%{ left: 110%; opacity: 0; }
315
+ 100%{ left: 10%; opacity: 1; }
316
+ }
317
+ @keyframes fromRightAnim3{
318
+ 0%{ left: 110%; opacity: 0; }
319
+ 1%{ left: 10%; opacity: 0; }
320
+ 100%{ left: 10%; opacity: 1; }
321
+ }
322
+ @keyframes fromRightAnim4{
323
+ 0%{ left: 110%; opacity: 0; }
324
+ 100%{ left: 60%; opacity: 1; }
325
+ }
326
+ /* Slide in from the left*/
327
+ .da-slide-fromleft h2{
328
+ -webkit-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
329
+ -moz-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
330
+ -o-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
331
+ -ms-animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
332
+ animation: fromLeftAnim1 0.6s ease-in-out 0.6s both;
333
+ }
334
+ .da-slide-fromleft p{
335
+ -webkit-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
336
+ -moz-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
337
+ -o-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
338
+ -ms-animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
339
+ animation: fromLeftAnim2 0.6s ease-in-out 0.6s both;
340
+ }
341
+ .da-slide-fromleft .da-link{
342
+ -webkit-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
343
+ -moz-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
344
+ -o-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
345
+ -ms-animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
346
+ animation: fromLeftAnim3 0.4s ease-in-out 1.2s both;
347
+ }
348
+ .da-slide-fromleft .da-img{
349
+ -webkit-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
350
+ -moz-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
351
+ -o-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
352
+ -ms-animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
353
+ animation: fromLeftAnim4 0.6s ease-in-out 0.6s both;
354
+ }
355
+ @-webkit-keyframes fromLeftAnim1{
356
+ 0%{ left: -110%; opacity: 0; }
357
+ 100%{ left: 10%; opacity: 1; }
358
+ }
359
+ @-webkit-keyframes fromLeftAnim2{
360
+ 0%{ left: -110%; opacity: 0; }
361
+ 100%{ left: 10%; opacity: 1; }
362
+ }
363
+ @-webkit-keyframes fromLeftAnim3{
364
+ 0%{ left: -110%; opacity: 0; }
365
+ 1%{ left: 10%; opacity: 0; }
366
+ 100%{ left: 10%; opacity: 1; }
367
+ }
368
+ @-webkit-keyframes fromLeftAnim4{
369
+ 0%{ left: -110%; opacity: 0; }
370
+ 100%{ left: 60%; opacity: 1; }
371
+ }
372
+
373
+ @-moz-keyframes fromLeftAnim1{
374
+ 0%{ left: -110%; opacity: 0; }
375
+ 100%{ left: 10%; opacity: 1; }
376
+ }
377
+ @-moz-keyframes fromLeftAnim2{
378
+ 0%{ left: -110%; opacity: 0; }
379
+ 100%{ left: 10%; opacity: 1; }
380
+ }
381
+ @-moz-keyframes fromLeftAnim3{
382
+ 0%{ left: -110%; opacity: 0; }
383
+ 1%{ left: 10%; opacity: 0; }
384
+ 100%{ left: 10%; opacity: 1; }
385
+ }
386
+ @-moz-keyframes fromLeftAnim4{
387
+ 0%{ left: -110%; opacity: 0; }
388
+ 100%{ left: 60%; opacity: 1; }
389
+ }
390
+
391
+ @-o-keyframes fromLeftAnim1{
392
+ 0%{ left: -110%; opacity: 0; }
393
+ 100%{ left: 10%; opacity: 1; }
394
+ }
395
+ @-o-keyframes fromLeftAnim2{
396
+ 0%{ left: -110%; opacity: 0; }
397
+ 100%{ left: 10%; opacity: 1; }
398
+ }
399
+ @-o-keyframes fromLeftAnim3{
400
+ 0%{ left: -110%; opacity: 0; }
401
+ 1%{ left: 10%; opacity: 0; }
402
+ 100%{ left: 10%; opacity: 1; }
403
+ }
404
+ @-o-keyframes fromLeftAnim4{
405
+ 0%{ left: -110%; opacity: 0; }
406
+ 100%{ left: 60%; opacity: 1; }
407
+ }
408
+
409
+ @-ms-keyframes fromLeftAnim1{
410
+ 0%{ left: -110%; opacity: 0; }
411
+ 100%{ left: 10%; opacity: 1; }
412
+ }
413
+ @-ms-keyframes fromLeftAnim2{
414
+ 0%{ left: -110%; opacity: 0; }
415
+ 100%{ left: 10%; opacity: 1; }
416
+ }
417
+ @-ms-keyframes fromLeftAnim3{
418
+ 0%{ left: -110%; opacity: 0; }
419
+ 1%{ left: 10%; opacity: 0; }
420
+ 100%{ left: 10%; opacity: 1; }
421
+ }
422
+ @-ms-keyframes fromLeftAnim4{
423
+ 0%{ left: -110%; opacity: 0; }
424
+ 100%{ left: 60%; opacity: 1; }
425
+ }
426
+
427
+ @keyframes fromLeftAnim1{
428
+ 0%{ left: -110%; opacity: 0; }
429
+ 100%{ left: 10%; opacity: 1; }
430
+ }
431
+ @keyframes fromLeftAnim2{
432
+ 0%{ left: -110%; opacity: 0; }
433
+ 100%{ left: 10%; opacity: 1; }
434
+ }
435
+ @keyframes fromLeftAnim3{
436
+ 0%{ left: -110%; opacity: 0; }
437
+ 1%{ left: 10%; opacity: 0; }
438
+ 100%{ left: 10%; opacity: 1; }
439
+ }
440
+ @keyframes fromLeftAnim4{
441
+ 0%{ left: -110%; opacity: 0; }
442
+ 100%{ left: 60%; opacity: 1; }
443
+ }
444
+ /* Slide out to the right */
445
+ .da-slide-toright h2{
446
+ -webkit-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
447
+ -moz-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
448
+ -o-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
449
+ -ms-animation: toRightAnim1 0.6s ease-in-out 0.6s both;
450
+ animation: toRightAnim1 0.6s ease-in-out 0.6s both;
451
+ }
452
+ .da-slide-toright p{
453
+ -webkit-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
454
+ -moz-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
455
+ -o-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
456
+ -ms-animation: toRightAnim2 0.6s ease-in-out 0.3s both;
457
+ animation: toRightAnim2 0.6s ease-in-out 0.3s both;
458
+ }
459
+ .da-slide-toright .da-link{
460
+ -webkit-animation: toRightAnim3 0.4s ease-in-out both;
461
+ -moz-animation: toRightAnim3 0.4s ease-in-out both;
462
+ -o-animation: toRightAnim3 0.4s ease-in-out both;
463
+ -ms-animation: toRightAnim3 0.4s ease-in-out both;
464
+ animation: toRightAnim3 0.4s ease-in-out both;
465
+ }
466
+ .da-slide-toright .da-img{
467
+ -webkit-animation: toRightAnim4 0.6s ease-in-out both;
468
+ -moz-animation: toRightAnim4 0.6s ease-in-out both;
469
+ -o-animation: toRightAnim4 0.6s ease-in-out both;
470
+ -ms-animation: toRightAnim4 0.6s ease-in-out both;
471
+ animation: toRightAnim4 0.6s ease-in-out both;
472
+ }
473
+ @-webkit-keyframes toRightAnim1{
474
+ 0%{ left: 10%; opacity: 1; }
475
+ 100%{ left: 100%; opacity: 0; }
476
+ }
477
+ @-webkit-keyframes toRightAnim2{
478
+ 0%{ left: 10%; opacity: 1; }
479
+ 100%{ left: 100%; opacity: 0; }
480
+ }
481
+ @-webkit-keyframes toRightAnim3{
482
+ 0%{ left: 10%; opacity: 1; }
483
+ 99%{ left: 10%; opacity: 0; }
484
+ 100%{ left: 100%; opacity: 0; }
485
+ }
486
+ @-webkit-keyframes toRightAnim4{
487
+ 0%{ left: 60%; opacity: 1; }
488
+ 30%{ left: 55%; opacity: 1; }
489
+ 100%{ left: 100%; opacity: 0; }
490
+ }
491
+
492
+ @-moz-keyframes toRightAnim1{
493
+ 0%{ left: 10%; opacity: 1; }
494
+ 100%{ left: 100%; opacity: 0; }
495
+ }
496
+ @-moz-keyframes toRightAnim2{
497
+ 0%{ left: 10%; opacity: 1; }
498
+ 100%{ left: 100%; opacity: 0; }
499
+ }
500
+ @-moz-keyframes toRightAnim3{
501
+ 0%{ left: 10%; opacity: 1; }
502
+ 99%{ left: 10%; opacity: 0; }
503
+ 100%{ left: 100%; opacity: 0; }
504
+ }
505
+ @-moz-keyframes toRightAnim4{
506
+ 0%{ left: 60%; opacity: 1; }
507
+ 30%{ left: 55%; opacity: 1; }
508
+ 100%{ left: 100%; opacity: 0; }
509
+ }
510
+
511
+ @-o-keyframes toRightAnim1{
512
+ 0%{ left: 10%; opacity: 1; }
513
+ 100%{ left: 100%; opacity: 0; }
514
+ }
515
+ @-o-keyframes toRightAnim2{
516
+ 0%{ left: 10%; opacity: 1; }
517
+ 100%{ left: 100%; opacity: 0; }
518
+ }
519
+ @-o-keyframes toRightAnim3{
520
+ 0%{ left: 10%; opacity: 1; }
521
+ 99%{ left: 10%; opacity: 0; }
522
+ 100%{ left: 100%; opacity: 0; }
523
+ }
524
+ @-o-keyframes toRightAnim4{
525
+ 0%{ left: 60%; opacity: 1; }
526
+ 30%{ left: 55%; opacity: 1; }
527
+ 100%{ left: 100%; opacity: 0; }
528
+ }
529
+
530
+ @-ms-keyframes toRightAnim1{
531
+ 0%{ left: 10%; opacity: 1; }
532
+ 100%{ left: 100%; opacity: 0; }
533
+ }
534
+ @-ms-keyframes toRightAnim2{
535
+ 0%{ left: 10%; opacity: 1; }
536
+ 100%{ left: 100%; opacity: 0; }
537
+ }
538
+ @-ms-keyframes toRightAnim3{
539
+ 0%{ left: 10%; opacity: 1; }
540
+ 99%{ left: 10%; opacity: 0; }
541
+ 100%{ left: 100%; opacity: 0; }
542
+ }
543
+ @-ms-keyframes toRightAnim4{
544
+ 0%{ left: 60%; opacity: 1; }
545
+ 30%{ left: 55%; opacity: 1; }
546
+ 100%{ left: 100%; opacity: 0; }
547
+ }
548
+
549
+ @keyframes toRightAnim1{
550
+ 0%{ left: 10%; opacity: 1; }
551
+ 100%{ left: 100%; opacity: 0; }
552
+ }
553
+ @keyframes toRightAnim2{
554
+ 0%{ left: 10%; opacity: 1; }
555
+ 100%{ left: 100%; opacity: 0; }
556
+ }
557
+ @keyframes toRightAnim3{
558
+ 0%{ left: 10%; opacity: 1; }
559
+ 99%{ left: 10%; opacity: 0; }
560
+ 100%{ left: 100%; opacity: 0; }
561
+ }
562
+ @keyframes toRightAnim4{
563
+ 0%{ left: 60%; opacity: 1; }
564
+ 30%{ left: 55%; opacity: 1; }
565
+ 100%{ left: 100%; opacity: 0; }
566
+ }
567
+ /* Slide out to the left*/
568
+ .da-slide-toleft h2{
569
+ -webkit-animation: toLeftAnim1 0.6s ease-in-out both;
570
+ -moz-animation: toLeftAnim1 0.6s ease-in-out both;
571
+ -o-animation: toLeftAnim1 0.6s ease-in-out both;
572
+ -ms-animation: toLeftAnim1 0.6s ease-in-out both;
573
+ animation: toLeftAnim1 0.6s ease-in-out both;
574
+ }
575
+ .da-slide-toleft p{
576
+ -webkit-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
577
+ -moz-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
578
+ -o-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
579
+ -ms-animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
580
+ animation: toLeftAnim2 0.6s ease-in-out 0.3s both;
581
+ }
582
+ .da-slide-toleft .da-link{
583
+ -webkit-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
584
+ -moz-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
585
+ -o-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
586
+ -ms-animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
587
+ animation: toLeftAnim3 0.6s ease-in-out 0.6s both;
588
+ }
589
+ .da-slide-toleft .da-img{
590
+ -webkit-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
591
+ -moz-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
592
+ -o-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
593
+ -ms-animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
594
+ animation: toLeftAnim4 0.6s ease-in-out 0.5s both;
595
+ }
596
+ @-webkit-keyframes toLeftAnim1{
597
+ 0%{ left: 10%; opacity: 1; }
598
+ 30%{ left: 15%; opacity: 1; }
599
+ 100%{ left: -50%; opacity: 0; }
600
+ }
601
+ @-webkit-keyframes toLeftAnim2{
602
+ 0%{ left: 10%; opacity: 1; }
603
+ 30%{ left: 15%; opacity: 1; }
604
+ 100%{ left: -50%; opacity: 0; }
605
+ }
606
+ @-webkit-keyframes toLeftAnim3{
607
+ 0%{ left: 10%; opacity: 1; }
608
+ 100%{ left: -50%; opacity: 0; }
609
+ }
610
+ @-webkit-keyframes toLeftAnim4{
611
+ 0%{ left: 60%; opacity: 1; }
612
+ 70%{ left: 30%; opacity: 0; }
613
+ 100%{ left: -50%; opacity: 0; }
614
+ }
615
+
616
+ @-moz-keyframes toLeftAnim1{
617
+ 0%{ left: 10%; opacity: 1; }
618
+ 30%{ left: 15%; opacity: 1; }
619
+ 100%{ left: -50%; opacity: 0; }
620
+ }
621
+ @-moz-keyframes toLeftAnim2{
622
+ 0%{ left: 10%; opacity: 1; }
623
+ 30%{ left: 15%; opacity: 1; }
624
+ 100%{ left: -50%; opacity: 0; }
625
+ }
626
+ @-moz-keyframes toLeftAnim3{
627
+ 0%{ left: 10%; opacity: 1; }
628
+ 100%{ left: -50%; opacity: 0; }
629
+ }
630
+ @-moz-keyframes toLeftAnim4{
631
+ 0%{ left: 60%; opacity: 1; }
632
+ 70%{ left: 30%; opacity: 0; }
633
+ 100%{ left: -50%; opacity: 0; }
634
+ }
635
+
636
+ @-o-keyframes toLeftAnim1{
637
+ 0%{ left: 10%; opacity: 1; }
638
+ 30%{ left: 15%; opacity: 1; }
639
+ 100%{ left: -50%; opacity: 0; }
640
+ }
641
+ @-o-keyframes toLeftAnim2{
642
+ 0%{ left: 10%; opacity: 1; }
643
+ 30%{ left: 15%; opacity: 1; }
644
+ 100%{ left: -50%; opacity: 0; }
645
+ }
646
+ @-o-keyframes toLeftAnim3{
647
+ 0%{ left: 10%; opacity: 1; }
648
+ 100%{ left: -50%; opacity: 0; }
649
+ }
650
+ @-o-keyframes toLeftAnim4{
651
+ 0%{ left: 60%; opacity: 1; }
652
+ 70%{ left: 30%; opacity: 0; }
653
+ 100%{ left: -50%; opacity: 0; }
654
+ }
655
+
656
+ @-ms-keyframes toLeftAnim1{
657
+ 0%{ left: 10%; opacity: 1; }
658
+ 30%{ left: 15%; opacity: 1; }
659
+ 100%{ left: -50%; opacity: 0; }
660
+ }
661
+ @-ms-keyframes toLeftAnim2{
662
+ 0%{ left: 10%; opacity: 1; }
663
+ 30%{ left: 15%; opacity: 1; }
664
+ 100%{ left: -50%; opacity: 0; }
665
+ }
666
+ @-ms-keyframes toLeftAnim3{
667
+ 0%{ left: 10%; opacity: 1; }
668
+ 100%{ left: -50%; opacity: 0; }
669
+ }
670
+ @-ms-keyframes toLeftAnim4{
671
+ 0%{ left: 60%; opacity: 1; }
672
+ 70%{ left: 30%; opacity: 0; }
673
+ 100%{ left: -50%; opacity: 0; }
674
+ }
675
+
676
+ @keyframes toLeftAnim1{
677
+ 0%{ left: 10%; opacity: 1; }
678
+ 30%{ left: 15%; opacity: 1; }
679
+ 100%{ left: -50%; opacity: 0; }
680
+ }
681
+ @keyframes toLeftAnim2{
682
+ 0%{ left: 10%; opacity: 1; }
683
+ 30%{ left: 15%; opacity: 1; }
684
+ 100%{ left: -50%; opacity: 0; }
685
+ }
686
+ @keyframes toLeftAnim3{
687
+ 0%{ left: 10%; opacity: 1; }
688
+ 100%{ left: -50%; opacity: 0; }
689
+ }
690
+ @keyframes toLeftAnim4{
691
+ 0%{ left: 60%; opacity: 1; }
692
+ 70%{ left: 30%; opacity: 0; }
693
+ 100%{ left: -50%; opacity: 0; }
694
+ }
@@ -0,0 +1,5 @@
1
+ module Parallaxslider
2
+ module Rails
3
+ VERSION = "1.0.0"
4
+ end
5
+ end
@@ -0,0 +1,8 @@
1
+ require "parallaxslider-rails/version"
2
+
3
+ module Parallaxslider
4
+ module Rails
5
+ class Engine < ::Rails::Engine
6
+ end
7
+ end
8
+ end