Animierte Bereiche beim Scrollen einmalig mit unterschiedlichen Animationen laden
Bitte stellt sicher, dass die Option "Animation on Scroll" in den globalen Style-Einstellungen am Pinsel 🖌️ von Mobirise deaktiviert ist.
Hier zeige ich als Beispiel ein JavaScript, das ich mit Hilfe der KI "ChatGPT" erstellt habe. Dieses Script ist so gestaltet wie auch die Option "Animation on Scroll" von Mobirise, allerdings mit eigenen Optionen und der neuesten Datei animate.css, die hier hier downloaden könnt: https://animate.style/
Das Script ist so konzipiert, das die unterschiedliche Animationen beim Scrollen einmalig stattfinden. Wollt ihr das nochmals testen müsst ihr diese Seite neu laden.
Zunächst benötigt ihr die CSS-Datei, die ihr entweder im Bereich "Inside <head> code" der Seiteneinstellungen verlinkt:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css" />
<link rel="stylesheet" href="animate-css/animate.css">
Ihr habt die Möglichkeit, aus nahezu 100 verschiedenen Animationen auszuwählen. Die verschiedenen CSS-Klassen findet ihr auf der Webseite von animate.style. Um die jeweilige Klasse zu kopieren, bewegt einfach die Maus über das kleine quadratische Symbol
Nun fügt ihr das JavaScript im Seitenbereich "End of <body> code" ein, in dem hier das Attribut data-animation verwendet wird, das in der HTML mit der Angabe seiner Class der spezifischen Animation eingetragen wird, die hier über diese Variable gegründet wird: animationClass.
<!-- JavaScript by Tommy, generated with the help of AI ChatGPT, uses attributes instead of CSS classes -->
<script>
document.addEventListener('DOMContentLoaded', function() {
// Select all elements to be animated
let animatedElements = document.querySelectorAll('.animate-on-scroll');
function checkScrollPosition() {
animatedElements.forEach(function(element) {
let elementPosition = element.getBoundingClientRect().top;
let windowHeight = window.innerHeight;
// When the element comes into the visible area and the animation has not yet been executed
if (elementPosition < windowHeight - 100 && !element.classList.contains('visible')) {
// Read the specific animation from the data attribute
let animationClass = element.getAttribute('data-animation');
// Add the general Animate.css classes and the specific animation
element.classList.add('animate__animated', animationClass);
element.classList.add('visible'); // Ensure that it is only animated once
}
});
}
// Monitor scroll event
window.addEventListener('scroll', checkScrollPosition);
// Initial call when loading the page
checkScrollPosition();
});
</script>
Nun müsst ihr jedem Element, das eine Animation tragen soll, diese Klasse hinzufügen: class="animate-on-scroll" sowie das Attribut data-animation="animate__fadeInUp" in diesem Beispiel mit der gewünschten Class "animate__fadeInUp".
Das kann natürlich an unterschiedlichen Stellen sein, also auch z.B. in einem äußeren <div> eines Containers:
<div class="animate-on-scroll row justify-content-center" data-animation="animate__fadeInUp">
Ihr könnt also durch die Verwendung von data-animation beliebig viele verschiedene Animationsklassen auf der gleichen Seite zuweisen, ohne das JavaScript manuell für jede Animation ändern zu müssen.
Bitte guckt euch auch meine Seite "Animierte Elemente" an, dort wird nur die CSS, ohne JavaScript, verwendet. Man kann also auch hier noch zusätzlich zur class="animate-on-scroll" aus dem JavaScript, weitere CSS Klassen wie z.B. eine Verzögerung als Class in der HTML hinzufügen.
Viel Erfolg.
Nutzen Sie die Mobirise-Software, um mehrere Websites für kommerzielle und gemeinnützige Projekte zu erstellen. Klicken Sie auf das Bild in diesem Block, um es zu ersetzen. Sie können eine Beschreibung unter Ihrem Bild oder an der Seite hinzufügen. Wenn Sie einige der Textfelder ausblenden möchten, öffnen Sie die Blockparameter und deaktivieren Sie die entsprechenden Optionen.
Sie können Inhaltsblöcke verwenden, um Ihre Artikel, umfangreiche Texte und Anleitungen zu strukturieren. Kombinieren Sie diese Blöcke mit Medienblöcken, um Illustrationen und Video-Tutorials hinzuzufügen. Mit verschiedenen Inhaltsblöcken können Sie Ihren Text flexibel gestalten.
Fügen Sie Zitate, Listen und Schaltflächen hinzu. Markieren Sie Ihren Text, um dessen Formatierung zu ändern oder Links einzufügen. Mobirise ist ein einfacher Website-Builder, der Ihnen hilft, beeindruckende Webseiten zu erstellen, ohne dass Sie Programmierkenntnisse benötigen.