Ik ben vandaag bezig geweest en heb nu op de FP een mooie slider gemaakt.
Op de FP kost die lelijke balk bovenin veeel ruimte. Deze heb ik nu samengevoegd als slider die automatisch slide, maar ook onhover. Deze is rechts van het nieuws gepositioneerd.
Screenshots:
De slider:
Een ander ding open:
En animerend:
De code:
Als je mijn FMod gebruikt met de 1 regel code heb je hem automatisch. Als je dat niet doet of hem gewoon los wil hebben, de volgende code:
Cascading Stylesheet:
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
|
#fpaItems { overflow: visible; float: right; -moz-transition: all 0.15s linear 0.15s; -webkit-transition: all 0.15s linear 0.15s; -o-transition: all 0.15s linear 0.15s; -ms-transition: all 0.15s linear 0.15s; transition: all 0.15s linear 0.15s; }
#fpaItems:hover { overflow: hidden; }
#fpaItems:hover + .mainColumn, #fpaItems:hover + .mainColumn + .secondColumn { margin-top: 0; -moz-transition: all 0.15s linear 0.15s; -webkit-transition: all 0.15s linear 0.15s; -o-transition: all 0.15s linear 0.15s; -ms-transition: all 0.15s linear 0.15s; transition: all 0.15s linear 0.15s; }
#fpaItems .fpaItem { border-right: 1px solid white; width: 15px; -moz-transition: all 0.15s linear 0.15s; -webkit-transition: all 0.15s linear 0.15s; -o-transition: all 0.15s linear 0.15s; -ms-transition: all 0.15s linear 0.15s; transition: all 0.15s linear 0.15s; }
#fpaItems .fpaItem:first-child { width: 245px; }
#fpaItems .fpaItem:hover:not(:first-child) { width: 245px; -moz-transition: all 0.15s linear 0.15s; -webkit-transition: all 0.15s linear 0.15s; -o-transition: all 0.15s linear 0.15s; -ms-transition: all 0.15s linear 0.15s; transition: all 0.15s linear 0.15s; }
#fpaItems:hover .fpaItem:first-child:not(:hover) { width: 15px; -moz-transition: all 0.15s linear 0.15s; -webkit-transition: all 0.15s linear 0.15s; -o-transition: all 0.15s linear 0.15s; -ms-transition: all 0.15s linear 0.15s; transition: all 0.15s linear 0.15s; }
#fpaItems + .mainColumn { -moz-transition: all 0.15s linear 0.15s; -webkit-transition: all 0.15s linear 0.15s; -o-transition: all 0.15s linear 0.15s; -ms-transition: all 0.15s linear 0.15s; transition: all 0.15s linear 0.15s; }
#fpaItems .fpaItem:nth-child(1) { animation: FPslider1 20s linear infinite; -webkit-animation: FPslider1 20s linear infinite; }
#fpaItems .fpaItem:nth-child(2) { animation: FPslider2 20s linear infinite; -webkit-animation: FPslider2 20s linear infinite; }
#fpaItems .fpaItem:nth-child(3) { animation: FPslider3 20s linear infinite; -webkit-animation: FPslider3 20s linear infinite; }
#fpaItems .fpaItem:nth-child(4) { animation: FPslider4 20s linear infinite; -webkit-animation: FPslider4 20s linear infinite; }
#fpaItems:hover .fpaItem { animation: none; -webkit-animation: none; }
@keyframes FPslider1 {
0% { width: 245px; }
23% { width: 245px; }
25% { width: 15px; }
98% { width: 15px; }
100% { width: 245px; }
}
@keyframes FPslider2 {
0% { width: 15px; }
23% { width: 15px; }
25% { width: 245px; }
45% { width: 245px; }
47% { width: 15px; }
100% { width: 15px; }
}
@keyframes FPslider3 {
0% { width: 15px; }
45% { width: 15px; }
47% { width: 245px; }
67% { width: 245px; }
69% { width: 15px; }
100% { width: 15px; }
}
@keyframes FPslider4 {
0% { width: 15px; }
67% { width: 15px; }
69% { width: 245px; }
98% { width: 245px; }
100% { width: 15px; }
}
@-webkit-keyframes FPslider1 {
0% { width: 245px; }
23% { width: 245px; }
25% { width: 15px; }
98% { width: 15px; }
100% { width: 245px; }
}
@-webkit-keyframes FPslider2 {
0% { width: 15px; }
23% { width: 15px; }
25% { width: 245px; }
45% { width: 245px; }
47% { width: 15px; }
100% { width: 15px; }
}
@-webkit-keyframes FPslider3 {
0% { width: 15px; }
45% { width: 15px; }
47% { width: 245px; }
67% { width: 245px; }
69% { width: 15px; }
100% { width: 15px; }
}
@-webkit-keyframes FPslider4 {
0% { width: 15px; }
67% { width: 15px; }
69% { width: 245px; }
98% { width: 245px; }
100% { width: 15px; }
}
|
Veel plezier
Reacties
Door
F.West98,
zondag 11 november 2012 01:39
Mozilla heeft de -moz niet meer nodig bij deze dingen, die werkt. Ik gebruik zelf Safari (op iPad) en firefox, daar werkt het helemaal goed. Opera kon ik de automatisch slide niet werkend krijgen, de hover wel en IE heeft enkel hover zonder animatie
Door
F.West98,
zondag 11 november 2012 12:50
Je moet niet heel snel overal over heen hoveren, dan tript ie hem. Maar als je rustig hovert moet het goed gaan, tenminste bij mij op FF16 wel
![[RSS]](http://tweakimg.net/g/if/v2/icons/rss_small.png){kind=icon}
![[Quicklink]](http://tweakimg.net/g/if/icons/world_link_cropped.png){kind=icon}
12-11 FMod: Bedankt voor de stemmen!
06-11 Best CSS strijd op GoT: help FMod winnen!