Kompatibilitàt:

WebSite X5 Evo und Pro

Wenn Sie eine Seite ansprechender und interaktiver machen möchten, sind die Details wichtig. Mit dem Zusatobjekt Animated Box 2 verfügen Sie über ein erweitertes Werkzeuf zur Einrichtung animierter Boxen, mit denen Sie wichtige Informationen hervorheben können, die Ihrem Design eine kreative und moderne Note verleihen. 


Mit dem Objekt Animated Box 2 können Sie nicht nur Masken und vordefinierte Effekte verwenden, die mit einigen intuitiven Parametern einfach anzupassen sind, sondern auch mit anpassbaren SVG-Masken arbeiten und mehr kreative Flexibilität genießen. Psäsentieren Sie Ihr Portfolio, die bewertungen Ihrer Kunden oder die Vorteile Ihres Produktes: Mit diesem Objekt kombinieren Sie ein dynamisches Design mit erweiterten Funktionen für professionelle und elegante Ergebnisse. Finden Sie einige Beispiele auf unserer Vorschauseite.



Woraus bestehen die animierten Boxen

Die animierten Boxen, die Sie mit dem Objekt Animated Box 2 einrichten können, bestehen aus den folgenden Elementen:

  • Hintergrund: Es geht um den Rahmen, der die Gestalt der Box definiert und wo alle Inhalte zu finden sind. Er kann mit Farben, Größe und eventuellen grafischen Effekten angepasst werden, damit die Box sich mit dem Design Ihrer Website perfekt integriert. 
  • Maske: Es geht um das grafische SVG-Element, das mit einem Morphing-Effekt animiert wird. Das Objekt bietet sowohl vordefinierte als auch personalisierte Masken, die Sie mit den Parametern einer SVG-Datei definieren können, die spezifisch für Ihr Projekt erstellt wird. 
  • Inhalt: Es geht um den zentralen Bereich der Box, wo der Titel, der Text und die Schaltfläche zu finden sind. Auch den Inhalt wird mit Übergangeffekten animiert und dynamisch an die Marke angepasst, sodass eine perfekte visuelle Integration und ein harmonischer Gesamteindruck verschafft werden. 


Wichtig zu erwähnen ist, dass die Box mit einer Aktion assoziiert werden kann, z. B. den Link zu einer Seite, den Download einer Datei oder das Öffnen eines Pop-up-Fensters, und dass die Animationen immer beim Mouseover stattfinden.


So stellen Sie die animierten Boxen ein

Jetzt, dass Sie wissen, aus welchen Elementen die animierten Boxen bestehen, können Sie einige allgemeinen Einstellungen festlegen: 

  • Doppelklicken Sie auf das Objekt Animated Box 2, das Sie auf der Seite hinzugefügt haben, um das Einstellgen-Fenster zu öffnen.
  • Bleiben Sie im Bereich Allgemein und stellen Sie die Größe der Box in Pixeln ein. Dann definieren Sie die Rahmen der Box mit den verfügbaren Optionen: Sie können Farben, Dicke, abgerundete Ecken und Schatten definieren. 
  • Wenn nötig können Sie einen Link einstellen: Klicken Sie auf    und wählen Sie die gewünschte Aktion aus. Der Link wird auf der ganzen Box aktiv sein, nicht nur auf der Schaltfläche. 


So definieren Sie die Animation der Box

Nachdem Sie die Box definiert haben, können Sie mit der Animation vorgehen. Wie gesagt besteht die allgemeine Animation aus einer Effektenkombination, darunter auch einem Übergangseffekt der Inhalte und einem Morphing-Effekt der Maske. Angepasst werden sie mit den Optionen im Bereich Effekt:

  • Der Übergangseffekt der Inhalte bewirkt eine vertikale Bewegung von unten nach oben. Wenn Sie den Wert des Parameters Verschiebung erhöhen, erscheinen die Texte weiter unten und führen eine größere Bewegung aus, bis sie sich im oberen Bereich der Box positionieren.
  • Die Dauer definiert die gesamte Zeit der Animation: So kann der Effekt schneller oder langsamer sein. 
  • Mit der Animationsart wählen Sie die Maske für die Box definieren: Wenn Sie "Keine" auswählen, wird keine Maske angezeigt, ansonsten können Sie eine vordefinierte Maske auswählen, oder eine eigene SVG-Maske verwenden, indem sie auf "Personalisiert" klicken.
  • Neben dem Maskentyp können Sie auch die Interpolationsmethode auswählen: Diese definiert, wie das Morphing abläuft, bei dem die Maske von einem Anfangszustand in einen Endzustand übergeht.


So definieren Sie den Stil der einzelnen Elemente

 Wie gesagt bestehen die animierten Boxen aus verschiedenen Elementen. Sie können jedes sichtbar oder nicht sichtbar machen und den Stil anpassen. 

  • Wählen Sie das gewünschte Element aus dem Drop-down-Menü des Bereichs Elemente.
  • Was den Hintergrund betrifft, können Sie eine Farbe oder ein Bild auswählen. Im zweiten Fall können Sie das Bild aus den Online-Bibliotheken oder aus Ihrem PC importieren. Wenn das importierte Bild sich automatisch an die Größe der Box anpassen muss, sollen Sie einfach die Option Größe anpassen aktivieren. Schließlich sollen Sie die Deckkraft des Bildes beim normalen und Mouseover-Status definieren.
#Tipp - Indem Sie die Deckkraft des Bildes verringern, wird es nach und nach ‚transparenter‘, sodass die darunterliegende Hintergrundfarbe sichtbar wird. Um einen Fade-Effekt zur Gesamtanimation der Box hinzuzufügen, müssen Sie also nur unterschiedliche Deckkraftwerte für den normalen und den Mouseover-Status des Hintergrundbildes einstellen.


  • Für die Maske, definieren Sie die Farbe beim normalen und Mouseover-Status, und, wenn Sie etwa Dreidimensionalität erzielen möchten, können Sie sogar einen Schatten aktivieren. 
  • Der Titel und die Beschreibung haben die gleichen Anpassungseinstellungen. Sie können den Inhalt verfassen, die klassische Formatierungen definieren, die Farbe für den normalen und den Mouseover-Status festlegen und die Ausrichtung und Rahmen einstellen.
#Tipp - Geben Sie einfach keinen Inhalt ein, wenn Sie keinen Titel und keine Beschreibung haben möchten. Um diese Elemente während der Animation erscheinen oder verschwinden zu lassen, reicht es aus, die Texte unsichtbar zu machen, indem Sie die Farbe in einem der beiden Zustände auf ‚Transparent‘ setzten.


  • Für die Schaltfläche finden Sie dann dieselben Einstellungen wie beim Titel und bei der Beschreibung. Der einzige Unterschied ist, dass Sie hier eine einzige Farbe für die Etikette und für den Hintergund einstellen können. Die Schaltfläche wird tatsächlich nur beim Mouseover angezeigt. 

 

So richten Sie eine personalisierte Maske ein

Für diejenigen, die es nicht wissen: SVG (Scalable Vector Graphic) ist ein Vektorformat, das in Webseiten gelesen werden kann. Dieses Format wird besonders häufig für Illustrationen, Icons und Logos verwendet (nicht für fotografische Bilder), da es:

  • weniger Speicherplatz benötigt, da die Dateien nicht aus Pixelrasterdarstellungen bestehen, sondern aus einer Sammlung von Tags/Codes;
  • mit CSS bearbeitet werden kann, um beispielsweise Farbeffekte bei Mouseover (Hover) zu erstellen;
  • ohne Qualitätsverlust skaliert werden kann;
  • die Anwendung von Animationen auf Formen unterstützt, wodurch beispielsweise Effekte wie das sogenannte ‚SVG-Morphing‘ entstehen.

 

Mit diesen Grundlagen, wie können Sie eine eigene SVG-Maske für die animierte Box erstellen und nutzen, die Sie mit dem Objekt Animated Box 2 einrichten? Schauen wir uns die Schritte gemeinsam an:

  • Zunächst müssen Sie ein Vektorgrafikprogramm öffnen, z. B. Softonic Inkscape, Adobe Illustrator, Affinity Designer oder die Klassiker wie Adobe XD, Figma, Sketch usw. Kurz gesagt, jede Plattform, die das Erstellen von Pfaden ermöglicht, kann verwendet werden, um eine SVG-Datei zu exportieren.
  • Sobald Sie das Programm ausgewählt haben, müssen Sie zwei Formen zeichnen: die erste dient als Maske im Ausgangszustand, die zweite als Maske bei Mouseover.
  • Für beide Masken müssen Sie vom gezeichneten Polygon ausgehend einen Pfad erstellen. Wenn Sie beispielsweise Inkscape verwenden, können Sie dies tun, indem Sie das Objekt auswählen und den Befehl Pfad > Object to Path ausführen. Den SVG-Code können Sie direkt im Fenster anzeigen, das Sie über den Befehl Edit > XML-Editor aufrufen.
  • Falls deine Grafiksoftware diese Anzeigeoption nicht bietet, können Sie einfach die beiden SVG-Dateien speichern und sie anschließend mit einem Texteditor wie Notepad öffnen, um die Daten anzuzeigen und zu kopieren.
  • Hier finden Sie ein Beispiel für einen SVG-Code:
<svg xmlns="http://www.w3.org/2000/svg" width="180" height="320" viewBox="0 0 180 320">
  <path id="Pfad_1" data-name="Pfad 1" d="M 180,160 0,218 0,0 180,0 z"/>
</svg>

Wie Sie sehen, dieser Code ist einem HTML-Code sehr ähnlich, mit unterschiedlichen Tags natürlich. Die Elemente des Codes, die von Interesse sind, sind die Werte, die in ‚viewBox‘ und ‚d‘ (Pfad-Daten) angegeben sind: Im Beispiel sind die hervorgehobenen Werte in Gelb.

  • Nun können Sie wieder mit WebSite X5 arbeiten. Öffnen Sie das Objekt Animated Box 2. Wählen Sie als Animationstyp ‚Personalisert‘ und wählen Sie die bevorzugte methode Interpolationmethode aus.
  • Übertragen Sie die Werte der viewBox in das entsprechende Feld.
  • Kopieren Sie (STRG+C) aus dem SVG-Code der Anfangsmaske den Wert des ‚d‘-Elements und fügen Sie ihn (STRG+V) in das Feld Anfangsmaske ein.
  • Genauso kopieren Sie (STRG+C) aus dem SVG-Code der Endmaske den Wert des ‚d‘-Elements und fügst ihn (STRG+V) in das Feld Maske beim Mouseover ein.
#Tipp - Sowohl für die ‚viewBox‘ als auch für die Masken müssen Sie nur die Werte der Elemente ‚viewBox‘ und ‚d‘ angeben, also alles, was zwischen den Anführungszeichen steht (ohne die Anführungszeichen selbst). Um Übertragungsfehler zu vermeiden, ist es am besten, sie zu kopieren (STRG+C) und einzufügen (STRG+V). 


Wie Sie gesehen haben, können Sie Elemente ein- und ausschalten und mit Farben und Effekten arbeiten, um viele alternative Ergebnisse erzielen. Durch Experimentieren werden Sie eine originelle und perfekte Lösung für die Seiten Ihrer Website finden.


#Tipp - Möchten Sie eine Alternative? Entdecken Sie auf das Objekt Animated Box.  



Sind sie schon neugierig, wie dies Objekt auf Ihrer Website aussieht? Installieren sofort das Objekt Animated Box 2


Fehlen Ihnen noch Credits für das Objekt? Alle Kreditpalete ansehen