Kompatibilität:

WebSite X5 Evo und Pro

Wenn Sie komplett statische Webseiten für langweilig halten, dann werden Sie sich freuen, mehr Interaktivität auf Ihrer Website einrichten zu können. Animieren Sie einige Elemente, indem sie beim Mouseover kippen und sich vergrößern. Natürlich brauchen Sie dafür keinen benutzerdefinierten Code, sondern nur das Zusatzobjekt Tilt Box.


Diese Animation können Sie für einfache farbige Boxen einrichten, aber derselbe Effekt ist auch für Bilder mit eigenen Titeln, Beschreibungen und Links verfügbar. Einige Beispiele dafür finden Sie auf der Vorschauseite.


Geben Sie die Textelemente ein

  • Doppelklicken Sie auf das Objekt Tilt Box, das Sie auf Ihre Seiten gerade eingefügt haben, um auf das Einstellungen-Fenster zuzugreifen. 
  • Bleiben Sie im Bereich Inhalt und definieren Sie die textuellen Inhalte.
  • Sie können einen Titel, eine Beschreibung und eine Beschreibung beim Mousover einfügen. Wenn Sie für ein oder mehrere dieser Felder nichts schreiben, wird den entsprechenden Textinhalt einfach nicht angezeigt. 
  • Formatieren Sie jeden Text mit der gewünschten Schriftart, Größe und Farbe: Wie Sie sehen können, hat jeder Text seine eigenen Einstellungen. 
  • Wenn Sie möchten, können Sie für das ganze Objekt einen Link einstellen: Klicken Sie auf die Schaltfläche  und wählen Sie die gewünschte Aktion aus dem entsprechenden Fenster aus.

 Definieren Sie die Animationseffekte

  • Öffnen Sie den Bereich Einstellungen, um den Effekt beim Mouseover zu definieren.
  • Den Kippeffekt können Sie so definieren:
    • Wählen Sie die Art von Bewegung: Die Box kann auf der X-Achse, auf der Y-Achse oder auf beiden kippen.
    • Definieren Sie den anfänglichen Kippfaktor auf den betrachteten Achsen: Sollten Sie 0 einstellen, erscheint die Box zunächst nicht gekippt.
    • Definieren Sie die Maximale Drehung, d. h., wie weit die Box auf der X- und/oder Y-Achse beim Mouseover kippt. Hier können Sie einen positiven sowie auch einen negativen Wert einstellen: Bei einem positiven Wert kippt die Box in Richtung der Maus; mit einem negativen Wert kippt die Box in die entgegengesetzte Richtung.
  • Neben dem Kippeffekt können Sie für die Box auch einen Zoomeffekt beim Mouseover einstellen. Stellen Sie einen Wert über 100, um die Box zu vergrößern oder weniger als 100, um sie zu verkleinern.
  • Wenn Sie möchten, dass die Box nach der Ausführung des Effekts wieder ihre ursprüngliche Position übernimmt, können Sie die Option Position wiederherstellen aktivieren. 
  • Wenn der Effekt nicht nur beim Mouseover ausgeführt werden muss, können Sie die Option Bewegung der Maus über die gesamte Seite abfangen aktivieren. 


Definieren Sie den Stil

  • Im Bereich Stil können Sie einige grafische Einstellungen definieren.
  • Definieren Sie die allgemeine Größe der Box und der Ränder, d. h. der Abstand zwischen dem Titel und der Beschreibung.
  • Sie können einen Schatten aktivieren, um der Box einen Tiefeffekt zuzuweisen. 
  • Sie können sogar einen Glüheffekt aktivieren, um es noch deutlicher zu machen, dass etwas beim Mouseover geschieht. 
  • Sie können schließlich für das Objekt einen Hintergrund definieren, indem Sie zwischen einer Farbe, einem linearen oder radialen Farbverlauf oder einem Bild wählen. Je nach dem ausgewählten Element finden Sie die entsprechenden Optionen für seine Konfiguration.


#Tipp - Wie Sie sicher schon verstanden haben, können Sie mit der Verwendung einer Farbe oder einem Farbverlauf und einer Beschreibung einfache aber wirksame animierte Karten einrichten. Wenn Sie dagegen ein Hintergrundbild verwenden, können Sie Ihre Bilder animieren.



Sind Sie schon neugierig, wie diese Objekt auf Ihrer Website aussieht? Installieren Sie sofort Tilt Box


Fehlen Ihnen noch Credits für den Kauf dieses Objekts? Alle Kreditpakete ansehen