FMod: FP slider added

Door F.West98 op zondag 11 november 2012 00:40 - Reacties (6)
Categorie: -, Views: 1.496

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:
FP slider
Een ander ding open:
FP slider slidend
En animerend:
FP slider 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
/* FP items inklappen */
#fpaItems { overflowvisiblefloatright; -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 { overflowhidden; }
#fpaItems:hover + .mainColumn, #fpaItems:hover + .mainColumn + .secondColumn { margin-top0; -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-right1px solid whitewidth15px; -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 { width245px;  }
#fpaItems .fpaItem:hover:not(:first-child) { width245px; -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) { width15px; -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% { width245px; }
    23% { width245px; }
    25% { width15px; }
    98% { width15px; }
    100% { width245px; }
}
@keyframes FPslider2 {
    0% { width15px; }
    23% { width15px; }
    25% { width245px; }
    45% { width245px; }
    47% { width15px; }
    100% { width15px; }
}
@keyframes FPslider3 {
    0% { width15px; }
    45% { width15px; }
    47% { width245px; }
    67% { width245px; }
    69% { width15px; }
    100% { width15px; }
}
@keyframes FPslider4 {
    0% { width15px; }
    67% { width15px; }
    69% { width245px; }
    98% { width245px; }
    100% { width15px; }
}
@-webkit-keyframes FPslider1 {
    0% { width245px; }
    23% { width245px; }
    25% { width15px; }
    98% { width15px; }
    100% { width245px; }
}
@-webkit-keyframes FPslider2 {
    0% { width15px; }
    23% { width15px; }
    25% { width245px; }
    45% { width245px; }
    47% { width15px; }
    100% { width15px; }
}
@-webkit-keyframes FPslider3 {
    0% { width15px; }
    45% { width15px; }
    47% { width245px; }
    67% { width245px; }
    69% { width15px; }
    100% { width15px; }
}
@-webkit-keyframes FPslider4 {
    0% { width15px; }
    67% { width15px; }
    69% { width245px; }
    98% { width245px; }
    100% { width15px; }
}


Veel plezier :)

Volgende: FMod: Bedankt voor de stemmen! 11-'12 FMod: Bedankt voor de stemmen!
Volgende: Best CSS strijd op GoT: help FMod winnen! 11-'12 Best CSS strijd op GoT: help FMod winnen!

Reacties


Door Tweakers user EvilWhiteDragon, zondag 11 november 2012 01:25

Beetje jammer dat je alleen webkit-explicit code gebruikt? Dan kan je net zo goed opera, en mozilla ook toevoegen.

Door Tweakers user 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 Tweakers user Phyxion, zondag 11 november 2012 10:51

Werkt niet voor een meter in Firefox 16, tript alle kanten op.

Door Tweakers user 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

Door Tweakers user Hakker, zondag 11 november 2012 15:34

je slider sloopt de over tweakers gedeelte aangezien die daar ook op werkt.

Door Tweakers user F.West98, zondag 11 november 2012 15:36

I know, ga ik aan werken.

Reageren is niet meer mogelijk