Trick # 420 | Dieser Beitrag beinhaltet 945 Wörter. – Geschätzte Lesezeit: ca. 5 Minuten.
Sehr grosse und hohe Bilder können im Divi-Theme ganz einfach scrollbar eingebunden werden. Das ist total simpel und kann auch mal hilfreich sein. Der Trick, der zeigt wie’s geht, folgt hier.
Beginnen wir mit dem automatischen Bildscrollen.
Automatisches Bildscrollen beim Hovern
Zunächst fügen Sie auf Ihrer Website an gewünschter Stelle ein Text-Modul ein – richtig gelesen: ein Text- und kein Bildmodul. Nun folgen zwei nötige Einstellungen:
- Wechseln Sie auf den «Erweitert»-Tab und dort auf «CSS-ID und Klassen». Im nun erscheinenden Textfenster «CSS-Klasse» geben Sie «scroll-image» ein.
- Wechseln Sie nun auf den Tab «Inhalt» und fügen Sie unter «Hintergrund» die gewünschte Bilddatei ein, welche Sie päter scrollen lassen wollen.
Okay. Jetzt wird’s Zeit für etwas CSS-Code. Den folgenden Block fügen Sie im Backend unter Design/Customizer/Zusätzliches CSS ein:
.scroll-image:hover {
-webkit-transition: background-position 4s linear 0s;
-moz-transition: background-position 4s linear 0s;
transition: background-position 4s linear 0s;
background-position: center bottom;
}
.scroll-image {
min-height: 400px;
display: block;
background-position: center top;
background-repeat: no-repeat;
background-size: 100% auto;
position: relative;
-webkit-transition: background-position 1.5s ease-out 0.5s;
-moz-transition: background-position 1.5s ease-out 0.5s;
transition: background-position 1.5s ease-out 0.5s;
}Voilà: das Bild (in unserem Fall der Screenshot eines Beitrags) beginnt zu scrollen, sobald Sie den Mauszeiger darüber bewegen. So wie nebenan:
Noch ein paar Worte zum CSS-Code:
- Die gesamte Scrollzeit in diesem Beispiel ist 4 Sekunden. Diesen Wert können Sie in den Zeile 2, 3 und 4 anpassen.
- Wenn Sie den Mauszeiger weg bewegen, bleibt das Bild noch 0.5 Sekunden stehen und scrollt dann binnen 1.5 Sekunden ganz an den Anfang. Diese beiden Werte lassen sich in den Zeilen 14, 15 und 16 anpassen.
- Und auf Zeile 8 legen Sie fest, wie hoch der Ausschnitt sein soll, in welchem das Bild scrollt.
Bild manuell scrollen
Dieser Trick ist noch einfacher: Fügen Sie an der gewünschten Stelle Ihrer Divi-Website ein Bild-Modul ein. Fügen Sie diesem das gewünschte Bild hinzu.
Nun wechseln Sie auf den «Erweitert»-Tab des Bildmoduls, klicken auf «Benutzerdefiniertes CSS» und fügen Sie im Textfeld «Hauptelement» folgenden CSS-Code ein:
width: auto;
height: 400px;
overflow-x: hidden;Das sieht dann so aus wie nebenan: Das Bild wird mit einer Scrollbar dargestellt, mit welcher Sie das Scrollen händisch starten können:
Den Bildausschnitt legen Sie übrigens in Zeile 2 des Codes fest – hier sind es 400px.
Werbung
Werbung
