Bild Scrollen bei Maus over

31. Aug., 2018CSS, Divi Tutorials

BILD-SCROLLEN

In diesem Beispiel habe ich einen vollständigen Seiten-Screenshot von einer meiner Webseiten erstellt.

Bewege Deine Maus über das Bild und beobachten wie sich die Seite mühelos gleiten lässt, bzw. scrollt.

So kannst Du diesen Effekt erstellen.

Als erstes fügen wir 3 Zeilen ein
In die Zeilen “Text-Module” einfügen und mit einem Hintergrundbild (Screenshot Ihrer Seite) füllen, z.B. 230 – 300px Breite, länge egal.
Im Textmodul auf Erweitert gehen und als CSS-Klasse “slipper” eintragen

CLASS-ID: slipper

Folgenden CSS-Code in die Erweiterung des Text-Modules einfügen
Benutzerdefinierter CSS-Code im Text-Modul:

margin-left: auto !important;
margin-right: auto !important;
transition: background-position 1.5s ease-out 0.5s;
background-position: top center;
background-size: 100% auto !important;
height: 100%;
background-repeat: no-repeat;

CSS-CODE in DIVI Theme-Option (Benutzerdefinierte CSS) oder nur auf der Seite wo es funktionieren soll einfügen.

Wenn Du das Scrollen langsamer oder schneller haben möchtest, dann kannst Du die Zeit von 5s ändern.

.slipper:hover { 
background-position: bottom center!important; transition: background-position 8s linear 0s; }

Damit das Bild größer angezeigt wird, musst Du noch im Text-Modul —> Design —> Benutzerdefinierter Abstand, auf ca. 400px gestellt werden, oder so wie man die Größe haben möchte

ACHTUNG!
Verwende nicht zu große Bilder, damit Deine Seite nicht zu langsam wird.

In diesem Beispiel habe ich noch ein Icon oben hinzugefügt, dafür musst Du folgenden Code in ein Textmodul einfügen!

display: block;
margin-left: auto;
margin-right: auto;” src=”HIER DER LINK ZU DEINEM ICON” alt=”alt text” width=”50″ height=”35″ />