Avatar billede kischi Novice
26. december 2017 - 21:29

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
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester