Diese Anleitung beschreibt, wie du einen Fade-In-Effekt für Textblöcke und Buttons auf deiner Brizy-Website hinzufügen kannst. Mit diesem Effekt erscheinen die Elemente sanft und hochfahrend, wenn sie in den sichtbaren Bereich des Bildschirms kommen.
Für die Umsetzung des Effekts wird das Plugin Fluent Snippets, oder ein ähnliches Snippet Plugin benötigt.
Wichtig!
Um sicherzustellen, dass die Texte und Buttons bei der Bearbeitung der Seiten im Brizy-Editor sichtbar sind, musst du die Snippets während der Bearbeitung ausschalten.
1. Fluent Snippets installieren
- Gehe im WordPress Dashboard auf Pluggins > Neues Plugin hinzufügen
- Suche das Plugin "Fluent Snippets"
- Installiere und aktiviere das plugin
2. CSS hinzufügen
- Navigiere zu Fluent Snippets und wähle die Option, um ein neues Snippet hinzuzufügen.
- Wähle "Styles" als Typ des Snippets.
- Füge den folgenden CSS-Code in das Snippet ein:
(Bei Fluent Snippets benötigst du keine <style> Tags)
<style>
</style>
3. JavaScript hinzufügen
(2 Verionen)
- Erstelle ein weiteres Snippet in Fluent Snippets und wähle "Scripts" als Typ aus.
- Füge den folgenden JavaScript-Code in das Snippet ein:
(Bei Fluent Snippets benötigst du keine: <script> Tags)
Version 1
<script>
</script>
Javascript mit Rebounce Funktion
Mit dieser Anpassung werden die Scroll-Events ressourcenschonender ausgeführt, was besonders bei langen Scrollseiten oder vielen animierten Elementen zu besseren PageSpeed-Ergebnissen führen kann.
(Bei Fluent Snippets benötigst du keine: <script> Tags)
Version 2
<script>
</script>
3. Teste den Effekt
- Besuche deine Website und scrolle nach unten, um die animierten Elemente zu sehen.
- Stelle sicher, dass die Textblöcke und Buttons sanft hochfahren und einblenden, wenn sie in den Sichtbereich kommen.