Partnerrulle med CSS
Hej,Jeg forsøger at lave en partnerrulle, og har fundet en kode jeg kunne bruge.
Og den virker også lidt.
Men ikke helt som jeg ønsker det, og man kan kun tilføje og antallet af logoer som kan være i partnerrullen skal være deleligt med 5.
Jeg vil gerne have 2 partnerruller som bevæger sig i hver sin retning, som den på denne side: http://www.leonsoftware.com/ i kan se den hvis i scroller lidt ned.
Den jeg har lavet kan ses her: http://www.ifs.aero/partners/
Er der en måde jeg kan få det som den første? Der er i alt 43 logoer.
Den kode jeg har brugt er denne:
.ds-carousel-section {
overflow: hidden;
}
.ds-carousel-logo {
width: 20%;
float: left;
}
.ds-image-carousel {
float: left;
position: absolute;
padding: 0;
opacity: 0;
z-index: 0;
}
.ds-image-carousel-first {
position: relative;
z-index: 1;
-webkit-animation: first 15s 1 linear forwards;
animation: first 15s 1 linear forwards;
}
@keyframes first {
0% {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
z-index: 1;
}
99.99% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 1;
z-index: 1;
}
100% {
opacity: 0;
z-index: 0;
}
}
.ds-carousel-section:hover .ds-image-carousel {
-webkit-animation-play-state: paused;
animation-play-state: paused;
}
.ds-image-carousel-second,
.ds-image-carousel-third,
.ds-image-carousel-fourth,
.ds-image-carousel-fifth,
.ds-image-carousel-sixth {
-webkit-animation: rest 75s infinite linear;
animation: rest 75s infinite linear;
}
.ds-image-carousel-third {
-webkit-animation-delay: 15s;
animation-delay: 15;
}
/*Animation delay for the fourth row*/
.ds-image-carousel-fourth {
-webkit-animation-delay: 30s;
animation-delay: 30;
}
/*Animation delay for the fifth row*/
.ds-image-carousel-fifth {
-webkit-animation-delay: 45s;
animation-delay: 45;
}
/*Animation delay for the sixth row*/
.ds-image-carousel-sixth {
-webkit-animation-delay: 60s;
animation-delay: 60;
}
@keyframes rest {
0.01% {
opacity: 0;
z-index: 0;
}
0.011% {
-webkit-transform: translateX(100%);
transform: translateX(100%);
opacity: 1;
z-index: 1;
}
40% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 1;
}
100% {
-webkit-transform: translateX(-100%);
transform: translateX(-100%);
opacity: 1;
}
}
Jeg håber der nogle som kan hjælpe.
Mange tak