Oxygen CSS (Logo) Endlos-Slider

 

  1. DIV als Haupt-DIV mit 100% Breite und gleichnamige Class vergeben: logo-slider
  2. in den Logo-Slider kommt ein 100% breiter DIV mit der Class: logo-slide
    Der DIV-Inhalt sollte vertikal ausgerichtet sein.
  3. Im Logo-Slide-DIV die logo-DIV´s erstellen. Die Breite in % angeben. Bei 5 Logos = 20%. Ebenfalls wieder Class anlegen: logo-div
  4. In den Container logo-slider wird ein CodeBlock gelegt, der das unten stehende CSS enthält. Die PHP-Sektion wird nicht gebraucht und kann mit <!– –> auskommentiert werden.
  5. Letztendlich muss der fertige DIV (aus Punkt 2.) logo-slide kopiert und mit der Class delay versehen werden. 

 

CSS-Code

https://gist.github.com/Spellhammer/e5b61896869ba448f2bec9b9b44730e3

 

body {
background: #FF5F6D; /* fallback for old browsers */
background: -webkit-linear-gradient(to right, #FFC371, #FF5F6D); /* Chrome 10-25, Safari 5.1-6 */
background: linear-gradient(to right, #FFC371, #FF5F6D); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
}

body:not(.ng-scope) :is(.logo-slider, #incspec) {
flex-direction: row;
align-items: center;
overflow: hidden;
position: relative;
height: 100px;

--animationspeed: 30s;
--animationdelay: calc( var(--animationspeed) / 2 );
}

body:not(.ng-scope) .logo-slide {
flex-shrink: 0;
position: absolute;
animation-name: slidelogo;
animation-duration: var(--animationspeed);
animation-timing-function: linear;
animation-iteration-count: infinite;
}

body:not(.ng-scope) .logo-slide.delay {
transform: translateX(100%);
animation-name: slidelogo;
animation-delay: var(--animationdelay);
}

.logo-div {}

@keyframes slidelogo {
from {
transform: translateX(100%);
}
to {
transform: translateX(-100%);
}
}