Ladeanimation / Pageloader nur einmal pro Tag und Nutzer abspielen in Webflow

Ladenanimationen lassen Deine Website dynamischer wirken, vor allem wenn die Animation lebendig und interaktiv ist. Trotzdem kann es für Nutzer nervig sein, den Pageloader bei jedem Besuch wieder und wieder angezeigt zu bekommen. In diesem Tutorial zeige ich Dir, wie Du mit der Hilfe eines Cookies den Pageloader nur einmal alle 24 Stunden ausspielen kannst.

Aufbau

Für die optimale Funktionsweise solltest Du in Webflow einen bestimmten Aufbau haben.

Alle Inhalte, die nicht in der Ladeanimation sind - also Deine normalen Website-Elemente, sollten in einem Div-Block mit der Klasse ‘page-wrapper’ sein. Die Inhalte der Ladeanimation sollten in einem weiteren Div-Block namens ‘loading-wrapper’ sein. Verwende für den Lade-Wrapper Position 'fixed' oder 'absolute', so dass dieser keinen Einfluss auf die Position der Elemente der restlichen Seite hat.

Erstelle Deine Ladeanimation mit den Webflow Interactions nach Deinen Vorstellungen und merke Dir dabei die Dauer der Animation z. B. 1,5 Sekunden.

Funktionsweise + Custom Code

Ein neuer Nutzer kommt auf unsere Website. Dieser soll dann auch unsere Ladeanimation angezeigt bekommen, deshalb setzen wir im Javascript-Code den richtigen Display-Wert. Erst nach unserer Ladeanimation wollen wir die Inhalte im ‘page-wrapper’ ausspielen. Kommt ein Nutzer auf unsere Seite, der uns bereits in den letzten 24 Stunden besucht hat, spielen wir nur die Inhalte aus dem ‘page-wrapper’ aus.

Falls Du den Aufbau wie oben beschrieben vorgenommen hast, musst Du nur eine Anpassung vornehmen:

1. Die Zeit im Timeout auf die Dauer Deiner eigenen Animation in Millisekunden anpassen, initial im Code sind 3000 Millisekunden.

Kopiere folgenden Code in den Head-Bereich Deiner Website:

<style>
/* Der Seiten-Wrapper ist anfangs ausgeblendet */
.page-wrapper {
  display:none;
}
</style>

<script src="https://cdnjs.cloudflare.com/ajax/libs/js-cookie/2.2.0/js.cookie.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) { 
  // Seiten-Wrapper in Variable speichern
  const pageWrapper = document.querySelector(".page-wrapper");
  // Ladeanimation in Variable speichern
  const loadingWrapper = document.querySelector('.loading-wrapper');

  // Das 'seenAnimation' Cookie checken und in einer Variable seenAnimation speichern
  const seenAnimation = Cookies.get('seenAnimation');
  // Wenn das 'seenAnimation' Cookie undefiniert ist / keinen Wert hat
  if(!seenAnimation){
    // Den Ladeanimation anzeigen
    loadingWrapper.style.display = "flex";
    // Den Seiten-Wrapper anzeigen
    // nach einer festgelegten Dauer von 3000 Millisekunden -> !!!Bei Bedarf ändern!!!!
    // (die Zeit, die die Animation braucht, um abzuspielen)
    setTimeout(()=>{
      pageWrapper.style.display = "block";
    }, 3000);
    // Das 'seenAnimation' Cookie setzen
    Cookies.set('seenAnimation', 1, { expires: 1 });
  }
  else{
    // Wenn das 'seenAnimation' Cookie existiert
    // hat der Nutzer die Animation bereits gesehen
    // und daher
    // verstecken wir die Ladeanimation
    loadingWrapper.style.visibility = "hidden";
    // Den Seiten-Wrapper anzeigen
    pageWrapper.style.display = "block";
  }
});
</script>

‍

Hier gehts direkt zum Clonable: Pageloader-1-mal-am-Tag-ausspielen*

Falls Du Probleme mit der Implementierung haben solltest, stehe ich Dir bei Fragen als Webflow Experte und Webflow Entwickler gerne zur Verfügung.

‍

Jetzt mit Webflow starten*

Mit Sternchen * markierte Links sind Affiliate-Links.

‍