Ajax Loader
×
HTML 
<div id="slider_wrapper">
1
<div id="slider_wrapper">
2
  <div id="slider">
3
4
    <div id="slides_info">
5
      <div class="slide_info one">
6
        <h2>Title Three</h2>
7
        <p>This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor,
8
          nisi elit consequat ipsum, nec sagittis sem nibh
9
          id elit. Duis sed odio sit amet nibh vulputate
10
          cursus a sit amet mauris. Morbi accumsan ipsum
11
          velit.
12
        </p>
13
        <p>
14
          Duis sed odio sit amet nibh vulputate
15
          cursus a sit amet mauris. Morbi accumsan ipsum
16
          velit.
17
        </p>
18
        <a class="button" href="#">Call To Action Buttons</a>
19
        <a class="button" href="#">OH MY!</a>
20
      </div>
21
      <div class="slide_info two">
22
        <h2>Title Four</h2>
23
        <p>This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor,
24
          nisi elit consequat ipsum, nec sagittis sem nibh
25
          id elit. Duis sed odio sit amet nibh vulputate
26
          cursus a sit amet mauris. Morbi accumsan ipsum
27
          velit.
28
        </p>
29
        <p>
30
          Duis sed odio sit amet nibh vulputate
31
          cursus a sit amet mauris. Morbi accumsan ipsum
32
          velit.
33
        </p>
34
        <a class="button" href="#">Holy SHIT!</a>
35
        <a class="button" href="#">It's so COOL!</a>
36
      </div>
37
      <div class="slide_info three">
38
        <h2>Title One</h2>
39
        <p>This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor,
40
          nisi elit consequat ipsum, nec sagittis sem nibh
41
          id elit. Duis sed odio sit amet nibh vulputate
42
          cursus a sit amet mauris. Morbi accumsan ipsum
43
          velit.
44
        </p>
45
        <p>
46
          Duis sed odio sit amet nibh vulputate
47
          cursus a sit amet mauris. Morbi accumsan ipsum
48
          velit.
49
        </p>
50
        <a class="button" href="#">Isn't this AWESOME?</a>
51
        <a class="button" href="#">Yes it is!</a>
52
      </div>
53
      <div class="slide_info four">
54
        <h2>Title Two</h2>
55
        <p>This is Photoshop's version  of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor,
56
          nisi elit consequat ipsum, nec sagittis sem nibh
57
          id elit. Duis sed odio sit amet nibh vulputate
58
          cursus a sit amet mauris. Morbi accumsan ipsum
59
          velit.
60
        </p>
61
        <p>
62
          Duis sed odio sit amet nibh vulputate
63
          cursus a sit amet mauris. Morbi accumsan ipsum
64
          velit.
65
        </p>
66
        <a class="button" href="#">Well, then grab it NOW!</a>
67
        <a class="button" href="#">Okay!</a>
68
      </div>
69
    </div>
70
71
    <div id="slides_image">
72
      <div class="slide one">
73
        <img src="http://cssdeck.com/uploads/media/items/4/41tAxTu.png" />
74
      </div>
75
      <div class="slide two">
76
        <img src="http://cssdeck.com/uploads/media/items/1/1hjGftu.png" />
77
      </div>
78
      <div class="slide three">
79
        <img src="http://cssdeck.com/uploads/media/items/4/4OIJyak.png" />
80
      </div>
81
      <div class="slide four">
82
        <img src="http://cssdeck.com/uploads/media/items/6/68BYSto.png" />
83
      </div>
84
    </div>
85
  </div>
86
</div>
 
CSS 
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");
1
@import url("http://fonts.googleapis.com/css?family=Droid+Sans");
2
 
3
body {
4
    background: #ccc;
5
}
6
 
7
/* Positioning */
8
#slider #slides_image .slide.one {
9
    left: 400px;
10
    top: 0;
11
 
12
    -webkit-animation: fadeOne 16s infinite;
13
    -moz-animation: fadeOne 16s infinite;
14
    animation: fadeOne 16s infinite;
15
}
16
 
17
#slider #slides_image .slide.two {
18
    left: 900px;
19
    top: 500px;
20
 
21
    -webkit-transform: rotate(90deg);
22
    -moz-transform: rotate(90deg);
23
    transform: rotate(90deg);
24
 
25
    -webkit-animation: fadeTwo 16s infinite;
26
    -moz-animation: fadeTwo 16s infinite;
27
    animation: fadeTwo 16s infinite;
28
}
29
 
30
#slider #slides_image .slide.three {
31
    left: 400px;
32
    top: 1000px;
33
 
34
    -webkit-transform: rotate(180deg);
35
    -moz-transform: rotate(180deg);
36
    transform: rotate(180deg);
37
 
38
    -webkit-animation: fadeThree 16s infinite;
39
    -moz-animation: fadeThree 16s infinite;
40
    animation: fadeThree 16s infinite;
41
}
42
 
43
#slider #slides_image .slide.four {
44
    left: -100px;
45
    top: 500px;
46
 
47
    -webkit-transform: rotate(270deg);
48
    -moz-transform: rotate(270deg);
49
    transform: rotate(270deg);
50
 
51
    -webkit-animation: fadeFour 16s infinite;
52
    -moz-animation: fadeFour 16s infinite;
53
    animation: fadeFour 16s infinite;
54
}
55
 
56
#slider #slides_info .slide_info.one {
57
    left: 400px;
58
    top: 0;
59
 
60
    -webkit-transform: rotate(180deg);
61
    -moz-transform: rotate(180deg);
62
    transform: rotate(180deg);
63
 
64
    -webkit-animation: fadeThree 16s infinite;
65
    -moz-animation: fadeThree 16s infinite;
66
    animation: fadeThree 16s infinite;
67
}
68
 
69
#slider #slides_info .slide_info.two {
70
    left: 800px;
71
    top: 400px;
72
 
73
    -webkit-transform: rotate(270deg);
74
    -moz-transform: rotate(270deg);
75
    transform: rotate(270deg);
76
 
77
    -webkit-animation: fadeFour 16s infinite;
78
    -moz-animation: fadeFour 16s infinite;
79
    animation: fadeFour 16s infinite;
80
}
81
 
82
#slider #slides_info .slide_info.three {
83
    left: 400px;
84
    bottom: 0;
85
 
86
    -webkit-animation: fadeOne 16s infinite;
87
    -moz-animation: fadeOne 16s infinite;
88
    animation: fadeOne 16s infinite;
89
}
90
 
91
#slider #slides_info .slide_info.four {
92
    left: 0;
93
    top: 400px;
94
 
95
    -webkit-transform: rotate(90deg);
96
    -moz-transform: rotate(90deg);
97
    transform: rotate(90deg);
98
 
99
    -webkit-animation: fadeTwo 16s infinite;
100
    -moz-animation: fadeTwo 16s infinite;
101
    animation: fadeTwo 16s infinite;
102
}
103
 
104
/* Slider Styles */
105
#slider_wrapper {
106
    position: relative;
107
    margin: 100px auto;
108
    width: 1000px;
109
    height: 400px;
110
    overflow: hidden;
111
}
112
 
113
#slider {
114
    width: 900px;
115
    height: 300px;
116
    top: 50px;
117
    left: 50px;
118
    position: relative;
119
}
120
 
121
#slider #slides_image {
122
    position: absolute;
123
    top: 0;
124
    left: 0px;
125
    width: 1300px;
126
    height: 1300px;
127
 
128
    -webkit-animation: rotate 16s ease infinite;
129
    -moz-animation: rotate 16s ease infinite;
130
    animation: rotate 16s ease infinite;
131
}
132
 
133
#slider #slides_info {
134
    position: absolute;
135
    bottom: 0;
136
    left: -400px;
137
    width: 1100px;
138
    height: 1100px;
139
 
140
    -webkit-animation: rotate 16s ease infinite;
141
    -moz-animation: rotate 16s ease infinite;
142
    animation: rotate 16s ease infinite;
143
    z-index: 5;
144
}
145
 
146
#slider #slides_info .slide_info {
147
    width: 300px;
148
    height: 300px;
149
    position: absolute;
150
}
151
 
152
#slider #slides_image .slide {
153
    width: 500px;
154
    height: 300px;
155
    background: rgba(0,0,0,0.5);
156
    position: absolute;
157
    background: url(http://cdn1.iconfinder.com/data/icons/defaulticon/icons/png/256x256/media-pause.png) 50% 50% no-repeat;
158
}
159
 
160
/* Text Styles */
161
#slider #slides_info .slide_info h2 {
162
    color: #333;
163
    font-family: "Droid Sans", sans-serif;
164
    margin: 0;
165
    font-weight: normal;
166
    font-size: 24px;
167
    padding-bottom: 5px;
168
}
169
 
170
#slider #slides_info .slide_info p {
171
    color: #666;
172
    font: 13px/18px Arial, sans-serif;
173
    text-shadow: 1px 1px #eee;
174
}
175
 
176
/* Button */
177
#slider a.button {
178
    display: inline-block;
179
    height: 40px;
180
    background: #ededed;
181
    padding: 0 15px;
182
    bottom: 0;
183
    left: 0;
184
    font: 13px/40px Arial, sans-serif;
185
 
186
    -webkit-border-radius: 5px;
187
    -moz-border-radius: 5px;
188
    border-radius: 5px;
189
    border: 1px solid #aaa;
190
    color: #333;
191
    text-decoration: none;
192
    cursor: pointer;
193
    margin-top: 40px;
194
}
195
/*
196
#slider:hover #slides_image,#slider:hover #slides_info,#slider:hover #slides_image .slide,#slider:hover #slides_info .slide_info {
197
    -webkit-animation-play-state: paused;
198
    -moz-animation-play-state: paused;
199
    animation-play-state: paused;
200
}
201
 
202
#slider:hover .slide img {
203
    filter: alpha(opacity=50);
204
    opacity: .5;
205
}
206
*/
207
/* Animation Keyframes */
208
 
209
@-moz-keyframes rotate {
210
    0% {
211
        -moz-transform: rotate(0deg);
212
    }
213
    20% {
214
        -moz-transform: rotate(0deg);
215
    }
216
    25% {
217
        -moz-transform: rotate(-90deg);
218
    }
219
    45% {
220
        -moz-transform: rotate(-90deg);
221
    }
222
    50% {
223
        -moz-transform: rotate(-180deg);
224
    }
225
    70% {
226
        -moz-transform: rotate(-180deg);
227
    }
228
    75% {
229
        -moz-transform: rotate(-270deg);
230
    }
231
    95% {
232
        -moz-transform: rotate(-270deg);
233
    }
234
    100% {
235
        -moz-transform: rotate(-360deg);
236
    }
237
}
238
@-webkit-keyframes "rotate" {
239
    0% {
240
        -webkit-transform: rotate(0deg);
241
    }
242
    20% {
243
        -webkit-transform: rotate(0deg);
244
    }
245
    25% {
246
        -webkit-transform: rotate(-90deg);
247
    }
248
    45% {
249
        -webkit-transform: rotate(-90deg);
250
    }
251
    50% {
252
        -webkit-transform: rotate(-180deg);
253
    }
254
    70% {
255
        -webkit-transform: rotate(-180deg);
256
    }
257
    75% {
258
        -webkit-transform: rotate(-270deg);
259
    }
260
    95% {
261
        -webkit-transform: rotate(-270deg);
262
    }
263
    100% {
264
        -webkit-transform: rotate(-360deg);
265
    }
266
}
267
 
268
@keyframes "rotate" {
269
    0% { transform: rotate(0deg); }
270
    20% { transform: rotate(0deg); }
271
    25% { transform: rotate(-90deg); }
272
    45% { transform: rotate(-90deg); }
273
    50% { transform: rotate(-180deg); }
274
    70% { transform: rotate(-180deg); }
275
    75% { transform: rotate(-270deg); }
276
    95% { transform: rotate(-270deg); }
277
    100% { transform: rotate(-360deg); }
278
}
279
 
280
@-moz-keyframes fadeOne {
281
    0% {
282
        filter: alpha(opacity=100);
283
        opacity: 1;
284
    }
285
    20% {
286
        filter: alpha(opacity=100);
287
        opacity: 1;
288
    }
289
    22% {
290
        filter: alpha(opacity=0);
291
        opacity: 0;
292
    }
293
    30% {
294
        filter: alpha(opacity=0);
295
        opacity: 0;
296
    }
297
    100% {
298
        filter: alpha(opacity=100);
299
        opacity: 1;
300
    }
301
}
302
@-webkit-keyframes "fadeOne" {
303
    0% {
304
        filter: alpha(opacity=100);
305
        opacity: 1;
306
    }
307
    20% {
308
        filter: alpha(opacity=100);
309
        opacity: 1;
310
    }
311
    22% {
312
        filter: alpha(opacity=0);
313
        opacity: 0;
314
    }
315
    30% {
316
        filter: alpha(opacity=0);
317
        opacity: 0;
318
    }
319
    100% {
320
        filter: alpha(opacity=100);
321
        opacity: 1;
322
    }
323
}
324
@keyframes "fadeOne" {
325
    0% {
326
        filter: alpha(opacity=100);
327
        opacity: 1;
328
    }
329
    20% {
330
        filter: alpha(opacity=100);
331
        opacity: 1;
332
    }
333
    22% {
334
        filter: alpha(opacity=0);
335
        opacity: 0;
336
    }
337
    30% {
338
        filter: alpha(opacity=0);
339
        opacity: 0;
340
    }
341
    100% {
342
        filter: alpha(opacity=100);
343
        opacity: 1;
344
    }
345
}
346
 
347
@-moz-keyframes fadeTwo {
348
    0% {
349
        filter: alpha(opacity=100);
350
        opacity: 1;
351
    }
352
    45% {
353
        filter: alpha(opacity=100);
354
        opacity: 1;
355
    }
356
    47% {
357
        filter: alpha(opacity=0);
358
        opacity: 0;
359
    }
360
    55% {
361
        filter: alpha(opacity=0);
362
        opacity: 0;
363
    }
364
    100% {
365
        filter: alpha(opacity=100);
366
        opacity: 1;
367
    }
368
}
369
@-webkit-keyframes "fadeTwo" {
370
    0% {
371
        filter: alpha(opacity=100);
372
        opacity: 1;
373
    }
374
    45% {
375
        filter: alpha(opacity=100);
376
        opacity: 1;
377
    }
378
    47% {
379
        filter: alpha(opacity=0);
380
        opacity: 0;
381
    }
382
    55% {
383
        filter: alpha(opacity=0);
384
        opacity: 0;
385
    }
386
    100% {
387
        filter: alpha(opacity=100);
388
        opacity: 1;
389
    }
390
}
391
@keyframes "fadeTwo" {
392
    0% {
393
        filter: alpha(opacity=100);
394
        opacity: 1;
395
    }
396
    45% {
397
        filter: alpha(opacity=100);
398
        opacity: 1;
399
    }
400
    47% {
401
        filter: alpha(opacity=0);
402
        opacity: 0;
403
    }
404
    55% {
405
        filter: alpha(opacity=0);
406
        opacity: 0;
407
    }
408
    100% {
409
        filter: alpha(opacity=100);
410
        opacity: 1;
411
    }
412
}
413
 
414
@-moz-keyframes fadeThree {
415
    0% {
416
        filter: alpha(opacity=100);
417
        opacity: 1;
418
    }
419
    70% {
420
        filter: alpha(opacity=100);
421
        opacity: 1;
422
    }
423
    72% {
424
        filter: alpha(opacity=0);
425
        opacity: 0;
426
    }
427
    80% {
428
        filter: alpha(opacity=0);
429
        opacity: 0;
430
    }
431
    100% {
432
        filter: alpha(opacity=100);
433
        opacity: 1;
434
    }
435
}
436
@-webkit-keyframes "fadeThree" {
437
    0% {
438
        filter: alpha(opacity=100);
439
        opacity: 1;
440
    }
441
    70% {
442
        filter: alpha(opacity=100);
443
        opacity: 1;
444
    }
445
    72% {
446
        filter: alpha(opacity=0);
447
        opacity: 0;
448
    }
449
    80% {
450
        filter: alpha(opacity=0);
451
        opacity: 0;
452
    }
453
    100% {
454
        filter: alpha(opacity=100);
455
        opacity: 1;
456
    }
457
}
458
@keyframes "fadeThree" {
459
    0% {
460
        filter: alpha(opacity=100);
461
        opacity: 1;
462
    }
463
    70% {
464
        filter: alpha(opacity=100);
465
        opacity: 1;
466
    }
467
    72% {
468
        filter: alpha(opacity=0);
469
        opacity: 0;
470
    }
471
    80% {
472
        filter: alpha(opacity=0);
473
        opacity: 0;
474
    }
475
    100% {
476
        filter: alpha(opacity=100);
477
        opacity: 1;
478
    }
479
}
480
 
481
@-moz-keyframes fadeFour {
482
    0% {
483
        filter: alpha(opacity=0);
484
        opacity: 0;
485
    }
486
    5% {
487
        filter: alpha(opacity=0);
488
        opacity: 0;
489
    }
490
    95% {
491
        filter: alpha(opacity=100);
492
        opacity: 1;
493
    }
494
    97% {
495
        filter: alpha(opacity=0);
496
        opacity: 0;
497
    }
498
    100% {
499
        filter: alpha(opacity=0);
500
        opacity: 0;
501
    }
502
}
503
@-webkit-keyframes "fadeFour" {
504
    0% {
505
        filter: alpha(opacity=0);
506
        opacity: 0;
507
    }
508
    5% {
509
        filter: alpha(opacity=0);
510
        opacity: 0;
511
    }
512
    95% {
513
        filter: alpha(opacity=100);
514
        opacity: 1;
515
    }
516
    97% {
517
        filter: alpha(opacity=0);
518
        opacity: 0;
519
    }
520
    100% {
521
        filter: alpha(opacity=0);
522
        opacity: 0;
523
    }
524
}
525
@keyframes "fadeFour" {
526
    0% {
527
        filter: alpha(opacity=0);
528
        opacity: 0;
529
    }
530
    5% {
531
        filter: alpha(opacity=0);
532
        opacity: 0;
533
    }
534
    95% {
535
        filter: alpha(opacity=100);
536
        opacity: 1;
537
    }
538
    97% {
539
        filter: alpha(opacity=0);
540
        opacity: 0;
541
    }
542
    100% {
543
        filter: alpha(opacity=0);
544
        opacity: 0;
545
    }
546
}
 

Untitled

CSSDeck G+