Deine Logos.
Deine Regeln.

Kopieren. Einfügen. Anpassen.

1. Erstelle im Editor einen Slider oder eine Logowand. Die Bilder werden geteilt, jedes Layout behält sein eigenes Design.
2. Exportiere All-in-one für HTML mit enthaltenem CSS und JS. Füge den vollständigen Code inklusive Template und Skript ein.
3. Lade die exportierten Bilder hoch. Verwende relative Pfade auf deiner Website und öffentliche Bild-URLs für CodePen.
4. Ergänze am äußeren logo-flow-Element eine eigene Klasse. Mit den Parts unten kannst du gezielt gestalten.

<logo-flow class="my-logos" data-settings='{"mode":"slider","color":"hover","tiles":true,"radius":18,"size":48,"gap":24,"speed":40,"controlOnHover":true}'>
  <a href="https://example.com" target="_blank" rel="noopener noreferrer">
    <img src="logos/brand.png" alt="Brand">
  </a>
</logo-flow>

Dieses Markup benötigt die Runtime. Behalte CSS-Template und Skript des Editor-Exports oder lade die beiden Dateien der gemeinsamen Runtime.

Probiere die Details aus.

Dieses Beispiel verwendet dieselbe Runtime wie dein Export. Die Symbole sind lokale Demografiken.

Eckenrundung

18 px

Layout SliderLogowand

data-settings

Ein JSON-Objekt steuert die Komponente. Schlüssel und Auswahlwerte bleiben in beiden Sprachen Englisch. Verwende echte boolesche Werte und Zahlen statt entsprechender Zeichenfolgen.

Einstellungen nach dem Laden ändern

const el = document.querySelector('.my-logos');
const settings = JSON.parse(el.dataset.settings || '{}');
settings.radius = 24;
settings.speed = 50;
el.dataset.settings = JSON.stringify(settings);

Die Runtime beobachtet data-settings und die Bildliste im Light DOM. Wenn du el.config direkt setzt, wird diese Eigenschaft zur Datenquelle. Weitere Änderungen erfolgen dann ebenfalls über el.config.

Innen Klassen. Außen Parts.

LogoFlow rendert in einem Shadow DOM. Seiten-CSS wie .my-logos .item erreicht diese inneren Elemente nicht. Verwende ::part(...) im CSS deiner Seite oder bearbeite das CSS-Template des All-in-one-Exports.

Zustands- und Designklassen

• .tiles: Kachelhintergründe aktiviert.
• .grayscale, .hover, .original: Farbdarstellung der Logos.
• .controls-hover: Pause erscheint bei Hover oder Tastaturfokus.
• .is-paused: manuell pausiert.
• .still: Darstellung bei reduzierter Bewegung.
• .duplicate: Schleifenkopien, für Screenreader und Tab-Navigation ausgeblendet, weiterhin anklickbar.

Diese Klassen entstehen aus dem Zustand. Verwende die passenden data-settings-Werte, statt interne Klassen am äußeren Element zu ergänzen.

Praktische CSS-Beispiele.

.my-logos::part(tile) {
  border: 1px solid #d8dfcf;
  box-shadow: 0 4px 16px #00000008;
}
.my-logos::part(control) {
  border-radius: 12px;
  background: #20211e;
  color: #ffffff;
}
.my-logos::part(logo) {
  opacity: .9;
}

Nutze die Editor-Einstellungen für Rundung, Abstände, Farben und Spalten. Die Runtime setzt diese Variablen direkt auf der Fläche. Für eine bewusste Überschreibung von außen verwende den surface-Part mit !important.

.my-logos::part(surface) {
  --lf-background: #f7f8f4 !important;
  --lf-card: #ffffff !important;
}

Wichtige Variablen: --lf-background, --lf-card, --lf-ink, --lf-radius, --lf-size, --lf-gap und --lf-width. Bei schmalem Container werden Bildgröße und Abstände begrenzt. Mobile Wall-Spalten beziehen sich auf den Container, nicht auf das gesamte Browserfenster.

Dateien, Links und Schriften.

Bilder bleiben separate Dateien, keine Base64-Bilder im erzeugten Bild-Markup. Das ZIP erhält den gewählten Zuschnitt und die Originaldateinamen. Doppelte Namen bekommen eine Nummer. Ein Link umfasst die gesamte Kachel inklusive Innenabstand.

Keine eigene Schrift im Export. Das Slider-CSS definiert keine Schriftfamilie, lädt keine Schriftdatei und enthält kein Font Awesome. Texte erben die Schrift der Zielseite. Schriftgrößen und -gewichte für kleine Bedienelemente bleiben möglich. Font Awesome gehört ausschließlich zu Landingpages und Editor.

Nach Änderungen an logo-slider.js oder logo-slider.css erzeugt node build-embed.mjs die All-in-one-Quellen neu. Nach Übersetzungsänderungen node build-pages.mjs ausführen. Vor dem Veröffentlichen mit node configure.mjs die echte öffentliche Basis-URL setzen.

Wenn etwas nicht passt.