So ändern Sie die Slider-Revolution-Ebenen bei Hover

Dieser Artikel ist Teil unserer fortlaufenden Reihe von Slider Revolution-Tutorials. Alle Artikel dieser Serie finden Sie in unserem umfassenden Slider Revolution Guide.

Hover-Effekte sind einer der Grundpfeiler einer guten UX. Wenn sich ein Element beim Schweben ändert, dient dies als klarer Hinweis darauf, dass eine Aktion erforderlich, ausgeführt oder abgeschlossen ist. In Schiebereglern ändern wir normalerweise Ebenen beim Bewegen, wenn sie mit einer impliziten oder erforderlichen Aktion einhergehen. Ein gutes Beispiel sind Schaltflächen, bei denen die Änderung beim Hover anzeigt, dass die Aktion (Klicken auf die Schaltfläche, die einen Link aktiviert) ausgeführt wird. Zusätzlich zu den Schaltflächen können Sie mit Slider Revolution auch andere Ebenen, wie Text, beim Schweben ändern. Tatsächlich zeigen wir Ihnen heute, wie Sie Slider Revolution-Hover-Effekte zu Text hinzufügen.

So fügen Sie Hover-Effekte in Slider Revolution hinzu

Das erste, was Sie tun müssen, ist, den Layer-Hover zu aktivieren. Wählen Sie die Ebene aus, der Sie den Effekt hinzufügen möchten, und unter Ebenenoptionen, klicke auf Schweben. Klicken Sie auf Ermöglicht Schalter, um es einzuschalten.

Darunter finden Sie alle Optionen, die Sie zum Einstellen Ihres Ebenenverhaltens beim Schweben benötigen. Wenn Sie alles unverändert lassen, zeigt die Ebene keine Änderungen an.

Hover-Einstellungen

Das erste, was Sie hier einstellen können, ist das Mauszeiger. Das Dropdown-Menü enthält ein paar verschiedene Optionen dafür. Auto und Standard sind die gleichen, und ihre Auswahl wird sich in keiner Weise auf Ihren Cursor auswirken.

Der Fadenkreuz und Zeiger betreffen die Form Ihres Mauszeigers auf dem Bildschirm. Diese sind beide ziemlich konventionell.

Hier finden Sie einige weitere Cursor-Stile, von denen einige etwas ungewöhnlich sind, aber jeder zeigt die Art der Aktion an, die Ihre Ebene beim Auslösen hat. Wenn Ihr Layer beispielsweise mit einer Hilfe- oder Supportressource verknüpft ist, können Sie mit dem Hilfe Mauszeiger.

Zeigerereignis ist eingestellt auf Auto standardmäßig. Die Option Keiner wird verwendet, wenn sich hinter der Ebene keine verknüpften Inhalte befinden.

Hover-Transformation

Um zu anderen Einstellungen für das Ebenenverhalten beim Schweben überzugehen, haben wir die Hover-Transformation, die Sie nach Ihren Wünschen einstellen können. Allerdings gibt es hier einiges zu beachten. Wenn sich beispielsweise die Ebene beim Schweben ändert, der Übergang sollte nicht plötzlich passieren. Es ist immer viel besser, wenn der Übergang mit etwas Verzögerung erfolgt. Die Verzögerung ist standardmäßig auf eingestellt 300ms, also können Sie es so belassen, wenn es für Sie funktioniert, oder ihm einen anderen Wert zuweisen.

Sie können auch die Lockerung für den Übergang aus mehreren voreingestellten Optionen auswählen.

Wenn Sie nicht möchten, dass Ihre Textebene dieselbe Größe und denselben Stil hat wie das ursprüngliche Aussehen, Sie können alles ändern, von der Perspektive über die Drehung bis hin zur Größe.

Hover-Schrift, Rahmen und Filter

Schriftart-Hover-Stil ermöglicht es uns, die Farbe des Textes beim Schweben zu ändern oder eine Unterstreichung, Überstreichung oder Durchstreichung hinzuzufügen.

Sie können auch hinzufügen Hintergrundfarbe zu Ihrem Schwebeflug.

Es besteht auch die Möglichkeit, Hinzufügen eines Rahmens um den Text und Spezifizieren der Farbe, Auswählen des Stils und Eingeben des in Pixeln ausgedrückten Randdickenwerts.

Die Randwinkel können einen Radius . haben, auch in Pixeln angegeben.

Eine weitere Sache, die Ihrem Ebenen-Hover hinzugefügt werden kann, ist Filter. Dies bedeutet im Grunde, die Ebene bis zu einem bestimmten, festgelegten Ausmaß zu verwischen. Auch dies wird in Pixeln ausgedrückt: Je höher der Wert, desto „dicker“ die Unschärfe.

Abschließend

Das ist so ziemlich alles, um Slider Revolution-Hover-Effekte zu erstellen. Wie im Grunde alles andere an diesem Plugin ist auch dieser Prozess sehr einfach und unkompliziert. Mit dem Plugin können Sie Ihren Folien diesen dynamischen Effekt hinzufügen und die Wiedergabe anpassen, um sicherzustellen, dass der resultierende Effekt perfekt mit dem Rest Ihrer Seite zusammenpasst.