Von Kay Eickhoff
Contao Tipps und Tricks: Container beim Scrollen ausblenden.
Wie man mit dem Contao CMS einen ID-Container / Elemente anhand der Scrollposition ausblendet.
Es kann von Vorteil sein, bestimmte Bereiche auf einer Website nicht sofort, sondern erst zu einem späteren Zeitpunkt anzuzeigen. Nehmen wir als Beispiel einen Call-to-Action (CTA) Bereich, welcher beim Seitenaufruf sichtbar ist und dann beim Scrollen nach unten ab einer bestimmten Pixelposition wieder ausgeblendet wird.
1) Artikel anlegen:
- Erstelle einen Artikel mit Namen „Content Slogan“ und füge den Elementtyp „Text“ hinzu. Gib einen Mustertext ein, z. B.: Dieser Bereich wird beim Scrollen der Website aus- und eingeblendet!
2) Modul erstellen:
- Erstelle ein Modul vom Typ „Eigenen-HTML-Code“ und gib als Titel „Content Slogan“ ein. Füge folgenden HTML-Code hinzu:
((insert_content::ID))
<!-- Ersetze die Klammern durch geschweifte Klammern und gib die ID des Inhaltselements Content Slogan ein -->3) Eigenen Layoutbereich anlegen:
- Füge in Seitenlayout / Eigene Layoutbereiche einen neuen Bereich mit folgenden Einstellungen hinzu: Titel: Content Slogan, ID: content-slogan, Position: Vor dem umschließenden Element. Dieser Bereich erscheint im Quelltext als ID (content-slogan).
- Klicke „Speichern“.
- Platziere das Modul „Content Slogan“ im Reiter Frontend Module im Layoutbereich: Content Slogan und speichere deine Anpassungen.
4) Div ab bestimmter Scrollposition ausblenden:
Damit die ID content-slogan während des Scrollen nach unten ausgeblendet wird, füge folgenden Code im Seitenlayout / „Eigener JavaScript-Code“ hinzu.
// Funktion damit die ID content-slogan beim Scrollen nach ab > 100 px ausgeblendet wird
window.addEventListener('scroll', function() {
var buttonSlogan = document.getElementById('content-slogan');
if (window.scrollY > 100) {
buttonSlogan.style.opacity = '0'; // Setze die Opazität auf 0, um den Button langsam auszublenden
} else {
buttonSlogan.style.opacity = '1'; // Setze die Opazität auf 1, um den Button langsam einzublenden
}
});5) CSS-Anweisung:
Passe den Content Slogan-Bereich mit CSS an. Beispiel:
/* CSS für Handys und Smartphones */
@media screen and (min-width: 100px) {
[id="content-slogan"] {
display: none;
}
}
/* CSS für Tablets und Desktops */
@media screen and (min-width: 768px) {
[id="content-slogan"] {
position: fixed;
right: 40px;
bottom: 40px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 240px;
height: 240px;
padding: 40px;
border-radius: 50rem;
background: #fdea40;
opacity: 1;
transition: opacity 0.15s ease;
z-index: 999;
}
[id="content-slogan"] p {
font-size: 22px;
line-height: 27px;
font-weight: 700;
margin: 0;
color: #000;
}
[id="content-slogan"] a:hover {
text-decoration: none;
}
[id="content-slogan"] .hidden {
opacity: 0;
}
}3) So siehts aus!
Beispiel: Container beim Scrollen ausblenden
Fazit: Konzentration auf den Inhalt, Reduzierung von Ablenkungen und Optimierung der Benutzererfahrun (UX)!
Das Ausblenden einer Call-to-Action (CTA) beim Scrollen nach unten auf einer Website bietet mehrere Vorteile. Es ermöglicht eine bessere Konzentration auf den Inhalt, reduziert Ablenkungen und verbessert die Benutzererfahrung, indem der CTA zum richtigen Zeitpunkt angezeigt wird. Durch diese Maßnahme wird die Effektivität der Aufforderung zur Handlung maximiert und die Nutzer haben mehr Kontrolle über ihre Interaktionen auf der Website.
Blog durchsuchen:
Das könnte dich auch interessieren:
