Hinweis: Während unsere beliebtesten Anleitungen ins Deutsche übersetzt wurden, sind einige Anleitungen nur auf Englisch verfügbar.

Animationen und Bildeffekte

Du kannst Animationen zu einem kleinen Bereich deiner Website hinzufügen, z. B. einem Abschnittshintergrund oder einem Bild-Block, oder du kannst Animationen für die gesamte Website aktivieren, die angezeigt werden, wenn Besucher durch deine Website scrollen.

In dieser Anleitung wird beschrieben, wie du verschiedene Animationseffekte in verschiedenen Bereichen deiner Website aktivieren kannst.

Tipp: Um Mouseover-Effekte wie Bildtitel und Beschriftungen zu deiner Website hinzuzufügen, besuche Mouseover-Effekte für deine Bilder erstellen.

Bevor Sie anfangen

  • Animationen in einzelnen Bild-Blöcken, Zitat-Blöcken und anderen Bereichen überschreiben Animationen für die gesamte Website.
  • Einige Sammlungs-Seiten, wie z. B. Blog-Seiten und Portfolio-Seiten, haben immer subtile Animationen, wenn die Seite geladen wird, selbst wenn Animationen für die gesamte Website deaktiviert sind.
  • Wenn du Block- und Seitenanimationen deaktivierst, folgen diese Bereiche den Stilen für die gesamte Website.

Seitenweite Animationen

Animationen für die gesamte Website sind nur mit Version 7.1 verfügbar.

Animationen für die gesamte Website gelten für die meisten Bereiche deiner Website, wobei Effekte in einigen Bereichen stärker ausgeprägt sind als in anderen. Diese Animationen wirken sich hauptsächlich auf die Art und Weise aus, wie Bilder, Text und andere Blöcke beim Scrollen durch eine Seite angezeigt werden. Einige Animationen werden auch angezeigt, wenn ein Besucher mit der Maus über Links und Buttons fährt.

Wir empfehlen, einen Animationsstil zu aktivieren und dann zu sehen, wie er auf verschiedenen Seiten deiner Website aussieht. Probiere jeden Stil aus, bis du den findest, der für deine Inhalte am besten geeignet ist.

So animierst du Website-Inhalte:

  1. Während du eine Seite bearbeitest, öffne Website-Stile und klicke dann auf Animationen.
  2. Klicke auf einen Animationsstil.
  3. Wähle eine langsame, mittlere oder schnelle Animationsgeschwindigkeit aus.
  4. Fahre mit dem Mauszeiger über Fertig und klicke auf Speichern.

Animation: Stile

Wählen Sie aus den folgenden Animationsstilen:

  • Keine – Deaktiviert Animationen für die gesamte Website.
  • Fade - Inhalt wird eingeblendet, wenn er auf der Seite angezeigt wird.
  • Skalierung – Der Inhalt wird von einer kleineren Größe bis zur endgültigen Größe animiert, wodurch ein Zoomeffekt entsteht.
  • Folie - Der Inhalt wird nach oben verschoben, wodurch der Effekt des Bildlaufs auf der Seite betont wird.
  • Clip – Inhalt wird von links Zeile für Zeile angezeigt.
  • Flex – Fügt einzigartige Animationen zu Überschriften, verlinkten Texten, Buttons und Portfolio-Seiten hinzu.

Animationen für die gesamte Website entfernen

So deaktivierst du Animationen für die gesamte Website:

  1. Klicke beim Bearbeiten einer Seite auf das Pinselsymbol und dann auf Animationen.
  2. Wähle Keine aus.
  3. Fahre mit dem Mauszeiger über Fertig und klicke auf Speichern.

Video ansehen

Hintergrundanimationen

Du kannst den Hintergrund deiner Website je nach Website-Version mit Bildeffekten oder einem Video in Endlosschleife animieren.

Bildeffekte

Hintergrundbildeffekte sind nur in Version 7.1 verfügbar.

Wenn dein Seitenabschnitt ein Hintergrundbild verwendet, kannst du Bildeffekte hinzufügen, um dem Hintergrund ein stilisierteres Aussehen zu verleihen. Einige Effekte fügen eine Animation hinzu, sodass sich das Bild immer bewegt, während andere nur angezeigt werden, wenn der Besucher durch diesen Abschnitt deiner Website scrollt.

So fügst du einen Bildeffekt hinzu:

  1. Klicke nach dem Hinzufügen eines Abschnittshintergrunds im Abschnittseditor auf Hintergrund.
  2. Scrolle nach unten zu Bildeffekt und wähle einen Effekt aus dem Dropdown-Menü aus. Der Effekt wird in der Seitenvorschau angezeigt.
  3. Fahre mit dem Mauszeiger über Fertig und klicke auf Speichern.

Denken Sie daran:

  • Bildeffekte werden nur auf Browsern und Geräten angezeigt, die das Tool WebGL unterstützen, das den Grafikprozessor deines Geräts nutzt. Auf get.webgl.org kannst du testen, ob dein Browser dies unterstützt. Wenn ein Browser WebGL nicht unterstützt, bleibt der Abschnittshintergrund statisch.
  • Bildeffekte werden nicht über Hintergrundvideos angezeigt.

Hintergrundvideos

Je nach Version deiner Website kannst du Hintergrundvideos zu Seitenabschnitten, Bannern und anderen Bereichen hinzufügen.

  • Hintergrundvideos werden in einer Schleife ohne Ton abgespielt.
  • Um ein Hintergrundvideo hinzuzufügen, brauchst du eine YouTube- oder Vimeo-URL. Es ist nicht möglich, ein Video direkt auf Squarespace hochzuladen.

Um mehr zu erfahren, besuche Hintergrundvideos hinzufügen.

Animationen in Blöcken

Du kannst Animationen zu Bild-Blöcken und Zitat-Blöcken hinzufügen, die Besucher sehen, wenn sie die Seite laden oder aktualisieren.

Bild-Blöcke

So animierst du einen Bild-Block:

  1. Klicke im Bild-Block-Editor auf Design und dann auf Animationen.
  2. Wähle einen Effekt aus der Liste aus, der auf das Bild und den Text angewendet werden soll. Wenn du eine Option auswählst, siehst du auf der Seite eine Vorschau davon.
  3. Um das Bild und den Text separat zu animieren, wähle Benutzerdefiniert und dann die Optionen für Bild und Text aus.

Wählen Sie aus diesen Animationsoptionen für Ihr Bild, Ihren Text oder beide:

  • Einblenden – Block, Bild oder Text wird eingeblendet
  • Hochgleiten – Block, Bild oder Text gleitet nach oben
  • Herabgleiten – Bild oder Text gleitet nach unten
  • Horizontal geschnitten – Block oder Bild wird in horizontalen Schichten geladen
  • Vertikal geschnitten – Block oder Bild wird in vertikalen Schichten geladen
  • Nach oben kippen – Block oder Bild wird mit einer Aufwärtsneigung herangezoomt
  • Nach unten kippen – Block oder Bild wird mit einer Abwärtsneigung herangezoomt
  • Fokussieren – Der Block, das Bild oder der Text erscheint zunächst verschwommen und wird dann scharf angezeigt.
  • Kollidieren – Bild und Text gleiten von den Seiten nach innen
  • Enthüllen – Das Bild und der Text gleiten von der Mitte nach außen.
  • Von links gleiten – Bild oder Text gleitet von links auf den Bildschirm
  • Von rechts gleiten – Bild oder Text gleitet von rechts auf den Bildschirm

Zitat-Blöcke

So animierst du einen Zitat-Block:

  1. Klicke im Block-Editor auf den Tab Design.
  2. Wähle einen Effekt aus dem Drop-down-Menü aus. Während du die Optionen erkundest, siehst du eine Vorschau davon, wie sie geladen werden.

Folgende Optionen stehen zur Auswahl:

  • Einblenden – Text wird eingeblendet
  • Hochgleiten – Text gleitet von unten nach oben
  • Fokussieren – Text erscheint zunächst verschwommen und rückt dann in den Fokus
  • Enthüllen – Text gleiten von der Mitte nach außen

Fehlerbehebung

Wenn auf deiner Website keine Animationen angezeigt werden, beachte bitte Folgendes:

  • Animationen für die gesamte Website und Abschnittshintergründe sind nur in Version 7.1 verfügbar.
  • Einige Inhalte unterstützen nur den seitenübergreifenden Animationsstil Verblassen. Wenn du einen anderen Stil wählst, werden Inhalte, die diesen Stil nicht unterstützen, stattdessen mit der Option „Verblassen“ animiert.
  • Wenn keiner deiner Inhalte animiert wird, stelle sicher, dass du einen unterstützten Browser verwendest.
War dieser Beitrag hilfreich?
27 von 58 fanden dies hilfreich
Animationen und Bildeffekte