INHALTSVERZEICHNIS

• Beispiel Fetch Block Scrolling CSS:
• Verstehen dieser benutzerdefinierten CSS-Regeln:
  • Regel 1:
  • Regel 2:
  • Regel 3:
• Optionale Einstellungen:
  • Bildlauf stoppen, wenn sich der Mauszeiger über dem Inhalt befindet:
  • Wechseln zu einem horizontalen Bildlauf- oder Tickereffekt:

Für DAKboard-Blöcke, die keine eingebaute Bildlauffunktion bieten, können Kunden eine solche Funktion anfordern. Während wir auf die Akzeptanz und die Entwicklung einer ausgefeilten eingebauten Methode warten, gibt es immer noch eine Möglichkeit, einem Block mit Hilfe unserer Custom CSS-Funktion ein Scrolling hinzuzufügen! Bei der Verwendung dieses Ansatzes sind einige Dinge zu beachten:

• Für die Optimierung derin diesem Artikel gezeigten Beispiele sind unter Umständen mittlere bis fortgeschrittene technische Kenntnisse erforderlich.
• Bei komplexeren Blöcken funktioniert dieser Ansatz möglicherweise nicht so gut.
• Dynamische Inhalte (z. B. von Fetch-Blöcken), die in ihrer Größe stark variieren, können eine Herausforderung für die Feinabstimmung darstellen.

Um eine Bildlauffunktion für einen bestimmten Block zu beantragen, sehen Sie sich bitte die offenen Diskussionen zu diesem Thema an und fügen Sie Ihren Anwendungsfall hinzu, oder eröffnen Sie eine eigene Diskussion, wenn Sie keine bereits laufende finden.

Um sich mit der Funktion Custom CSS vertraut zu machen, lesen Sie bitte den Artikel Applying Custom Styles to Screens.

Um einem Basisblock einen Bildlauf hinzuzufügen, loggen Sie sich in DAKboard ein, bearbeiten Sie einen Bildschirm und identifizieren Sie den Block, dem Sie einen Bildlauf hinzufügen möchten, indem Sie die Methoden aus dem Artikel Benutzerdefinierte Stile auf Bildschirme anwenden anwenden.

Beispiel Fetch Block Scrolling CSS:

Um den Code zu vereinfachen und die Spezifität zu gewährleisten, wurde der Beispielblock hier My Scrolling FetchBlock genannt. Er wurde mit einer URL eingerichtet, die einen Text zum Scrollen in den zweiten der abgerufenen Werte zieht. Hier sehen Sie ein Beispiel dafür, wie der Block vor und nach dem Hinzufügen des Bildlaufeffekts aussehen wird:

Vor

(Bewegungsunschärfe zur Darstellung des Bildlaufbereichs)

Nach

Als Referenz sind die Blockeinstellungen wie folgt:

Das benutzerdefinierte CSS, das dieser Block verwendet, lautet wie folgt:

.block--MyScrollingFetchBlock .json-data:nth-child(2) { overflow: hidden; height: 15em; } @keyframes scroll-vert-marquee-1 { 0% {transform: translateY(0%);} 10% {transform: translateY(0%);} 40% {transform: translateY(-100%);} 60% {transform: translateY(-100%);} 90% {transform: translateY(0%);} 100% {transform: translateY(0%);} .block--MyScrollingFetchBlock .json-data:nth-child(2) .json-data-value { animation-name: scroll-vert-marquee-1; animation-duration: 8.5s; animation-timing-function: linear; animation-iteration-count: infinite; }

Um diesen Code zu einem Bildschirm hinzuzufügen, finden Sie die Option Benutzerdefinierte CSS-Regeln hinzufügen für vordefinierte Bildschirme auf der Registerkarte Einstellungen & Standardwerte. Bei benutzerdefinierten Bildschirmen klicken Sie oben links auf die Schaltfläche " Stile", um die Dropdown-Liste zu öffnen.

Die zu ändernden Werte für die Feinabstimmung des Bildlaufs:

• Einstellen der Geschwindigkeit:
  • Ändern Sie die Anzahl der Sekunden (8,5) in der Zeile für die Animationsdauer: 8,5s;

• Anpassen des rollbaren Bereichs:
  • Ändern Sie die 15em in der Zeile in Höhe: 15em
  • Entfernen Sie die Zeile für height: 15em ganz, um den gesamten dem Block zugewiesenen Platz zu nutzen.

Verstehen dieser benutzerdefinierten CSS-Regeln:

Regel 1:

• Der CSS-Selektor .block--MyScrollingFetchBlock .json-data:nth-child(2) zielt auf den Inhalt eines Blocks mit dem Namen My Scrolling Fetch Block ab, und innerhalb dieses Blocks zielt er auf den zweiten Container mit der Klasse json-data

• Da wir nur den anzeigbaren Teil des json-data-Elements sehen wollen, blenden wir Inhalte, die außerhalb dieses Bereichs liegen, mit der Overflow-Deklaration aus.

• (Optional) wird durch die Angabe einer Höhe der Inhalt auf diese Größe beschränkt, andernfalls werden lange Inhalte zu weit gestreckt, und kürzere Inhalte nehmen nicht den gleichen Platz ein.

Regel 2:

• Der Bildlaufeffekt wird in diesem Fall durch einen Animationseffekt erzeugt. Eine gängige Technik für Animationen besteht darin, die Schritte zu markieren, in denen (oder wann in der Animationszeitleiste) wichtige Dinge passieren, und dann die Berechnungen den Übergang zwischen den Schritten bestimmen zu lassen. Dies wird als Keyframing bezeichnet.

• Diese Regel definiert die Keyframe-Punkte in der Animation. Die Animation beginnt damit, dass alles so ist, wie es ist, wenn der Block zum ersten Mal gerendert wird. Sie verbleibt für eine kurze Zeit in diesem Zustand und beginnt dann, sich zu bewegen, bis sie vertikal über die volle Höhe des Inhalts hinaus gescrollt ist, um dann für eine kurze Zeit anzuhalten. Schließlich wird auf die gleiche Weise zum ursprünglichen Zustand zurückgescrollt, und der ganze Vorgang wiederholt sich.

Regel 3:

• Diese Regel zielt auf den json-data-Wert unter dem json-data-Container ab und verknüpft die beiden früheren Regeln miteinander, indem sie die Keyframes und andere Animationsmerkmale auf den Inhalt anwendet.

• Sie weist den Bildschirm im Wesentlichen an, den früheren Satz von Keyframes (scroll-vert-marquee-1) zu verwenden, um eine Animation in einer Endlosschleife ablaufen zu lassen, so dass sie in 8,5 Sekunden linear (gleichmäßig und sanft) durch einen einzigen Kurs läuft.

Optionale Einstellungen:

Bildlauf stoppen, wenn sich der Mauszeiger über dem Inhalt befindet:

Für diejenigen, die ihre Bildschirme interaktiver nutzen, können wir das folgende benutzerdefinierte CSS hinzufügen, um den Scroll-Effekt zu erzielen, wenn der Mauszeiger in den gescrollten Bereich bewegt wird:

.block--MyScrollingFetchBlock .json-data:nth-child(2) .json-data-value:hover { animation-play-state: paused; }

@keyframes scroll-horiz-marquee-1 { 0% {transform: translateX(-105%);} 100% {transform: translateX(105%);}