CSS und JS gezielt nutzen: Individuelle Felder; Code per ID/Slug

Illustration geralt

Der Classic-Editor: Vertraut und zuverlässig –
Ihr bewährter Begleiter.

Erleben Sie den Classic Editor neu!
(Bilder von pixelcreatures)

Viele Nutzer schätzen die vertraute Umgebung des Classic-Editors, die eine einfache und schnelle Bearbeitung ermöglicht.

Mit dem Advanced Editor Tools auf das nächste Level –
Mehr Funktionen, mehr Möglichkeiten.

Classic Editor + Advanced Editor Tools
= Ihr Erfolgsrezept

Der Advanced Editor erweitert den Funktionsumfang des Classic-Editors und ermöglicht es, Inhalte noch effektiver zu bearbeiten.

Einfach und intuitiv –
Der Classic-Editor für alle.

Classic Editor & Advanced Editor Tools
Erleben Sie es.

Der Classic-Editor zeichnet sich durch Stabilität und Zuverlässigkeit aus, was für professionellen Anwender von Bedeutung ist.

Mehr schaffen in weniger Zeit –
Der Advanced Editor für kreative Köpfe.

Optimieren Sie Ihre Bearbeitung:
Advanced Editor Tools

Mit dem Advanced Editor können Designer und
Content Creatoren kreative Ideen umsetzten.

Bei der Entwicklung individueller Beiträge oder Seiten kann es sinnvoll sein, spezifische CSS- und JavaScript-Codeabschnitte nur bei Bedarf zu laden, um die Leistung der Website zu optimieren. In diesem Beitrag zeigen wir, wie man mit "Individuellen Feldern" für einzelne Beiträge und Seiten gezielt CSS- und JavaScript-Code einfügen kann. Außerdem erläutern wir, wie das Laden von CSS- und JavaScript-Code per ID oder Slug funktioniert. Diese Methoden bieten Flexibilität und eine effiziente Möglichkeit, spezifische Anpassungen vorzunehmen, ohne die gesamte Website zu beeinflussen.

Das ist ein Beitrag im Zusammenhang:

WP: Individuelle Felder,
Grundlagen und CSS-Styles

In diesem WordPress-Beitrag dreht sich alles um den Begriff 'Individuelle Felder'. Wir werden erklären, was sie sind und wie man sie nutzt. Dazu werden hier ... weiterlesen

WP Wegerl.at Link copie

Inhaltsverzeichnis

A) Durch 'Individuelle Felder' CSS und JS gezielt anwenden

Um individuelles CSS und JavaScript für einzelne Seiten oder Beiträge zu verwenden, können wir den WordPress-Editor nutzen. Die 'Individuellen Felder' bieten sich dazu an, um benutzerdefinierten CSS- und JS-Code direkt in diese Felder einzugeben.

Code in der functions.php einfügen und
'Individuelles-Feld' erstellen und hinzufügen.

1. Code in der functions.php einfügen

Diese Methode verwendet benutzerdefinierte Felder (Custom Fields) und fügt den Code direkt in den Beitrag oder die Seite ein.

/* === CSS und JS gezielt einsetzen – Individuelle Felder === */

function enqueue_custom_css_js() {
    if (is_single() || is_page()) {
        global $post;
        $custom_css = get_post_meta($post->ID, 'custom_css', true);
        $custom_js = get_post_meta($post->ID, 'custom_js', true);

        if (!empty($custom_css)) {
            echo '<style>' . wp_strip_all_tags($custom_css) . '</style>'; // Verwende wp_strip_all_tags, um den CSS-Code zu bereinigen
        }

        if (!empty($custom_js)) {
            $handle = 'custom-js-' . $post->ID;
            wp_register_script($handle, '');
            wp_enqueue_script($handle);
            wp_add_inline_script($handle, $custom_js);
        }
    }
}
add_action('wp_head', 'enqueue_custom_css_js', 100);

/* = Ende CSS und JS gezielt einsetzen – Individuelle Felder = */

Funktionsdefinition enqueue_custom_css_js():
- Diese Funktion wird verwendet, um benutzerdefiniertes CSS und JavaScript gezielt auf bestimmten Seiten oder Beiträgen einzubinden.
- Es wird geprüft, ob die aktuelle Seite ein Beitrag (is_single()) oder eine Seite (is_page()) ist. Nur dann wird der Code ausgeführt.
Globale Variable $post:
- Die Funktion greift auf die globale $post-Variable zu, um die aktuelle Beitrags- oder Seiten-ID abzurufen. Diese ID wird verwendet, um die benutzerdefinierten Meta-Felder für CSS und JS zu laden.
Abfrage der benutzerdefinierten Meta-Felder:
- Über get_post_meta() werden zwei Meta-Felder aus der Datenbank geladen:
  - custom_css: Enthält benutzerdefiniertes CSS.
  - custom_js: Enthält benutzerdefiniertes JavaScript.
Einfügen von benutzerdefiniertem CSS:
- Wenn das Meta-Feld custom_css nicht leer ist, wird der CSS-Code in den <style>-Tags direkt in den <head>-Bereich der Seite eingebettet.
- Sicherheitsaspekt:
  - Der CSS-Code wird mit wp_strip_all_tags() bereinigt, um potenziell schädlichen HTML-Code zu entfernen. Dadurch wird die Ausführung von gefährlichem HTML-Code im CSS-Block verhindert.
Einfügen von benutzerdefiniertem JavaScript:
- Wenn das Meta-Feld custom_js nicht leer ist:
  - Es wird ein individueller Script-Handle basierend auf der Post-ID erstellt.
  - Ein leeres Script wird mit wp_register_script() registriert, um den Handle zu erstellen.
  - Anschließend wird mit wp_enqueue_script() das Script in die Seite eingefügt.
  - Das benutzerdefinierte JavaScript wird über wp_add_inline_script() eingebettet.
- Sicherheitsaspekt:
  - Es fehlt eine explizite Bereinigung des JavaScript-Codes, wie beispielsweise mit sanitize_text_field() oder einer spezialisierteren Methode. Ohne diese Maßnahme besteht die Gefahr von XSS-Angriffen, bei denen schädliches JavaScript eingeschleust werden könnte.
    - Mihin sanitize_text_field() oder esc_js() funktionierte hier das JS nicht. Es ist somit wichtig, sicherzustellen, dass der eingegebene JavaScript-Code keine Sicherheitsrisiken birgt.
Hook in den wp_head-Bereich:
- Die Funktion wird über den WordPress-Hook wp_head eingebunden, sodass der Code im Kopfbereich der Seite ausgeführt wird. Das ist essentiell zum Rendern des CSS, um die Styles korrekt darzustellen, daselbe gilt der Form für das JS.
- Die Priorität 100 sorgt dafür, dass die benutzerdefinierten Styles und Scripts relativ spät eingebunden werden, nach den meisten anderen CSS- und JavaScript-Dateien.

Sicherheitshinweis: Achte darauf, dass der Code sicher ist und keine potenziellen Sicherheitslücken enthält. Unsichere Eingaben können dein WordPress-Setup anfällig für Angriffe machen.

Für weitere Informationen und Anleitungen zur Verwendung von JavaScript in externen Dateien, siehe den eingangs genannten Beitrag.

2. 'Individuelles-Feld' erstellen und hinzufügen

Als Nächstes können wir die individuellen Felder im WordPress-Editor hinzufügen:

Einen Beitrag oder eine Seite im WordPress-Editor öffnen.
Nach unten zum Abschnitt 'Individuelle Felder' scrollen.
Zwei neue Felder hinzufügen:
- custom_css für benutzerdefiniertes CSS
- custom_js für benutzerdefiniertes JavaScript
Im Feld "Wert" ist der erwünschte Code einzugeben.

Falls die 'Individuelle Felder' nicht sichtbar sind, können diese im Editor rechts oben unter "Ansicht anpassen" Bildschirm-Elemente angehakt werden. Beispiel: Der Name (1) custom_css geht aus dem PHP-Code hervor, der Wert (2) ist das erwünschte CSS und mit Klick auf "Individuelles Feld hinzufügen" (3) wird das 'Individuelle Feld' erstellt. Nach der Erstellung kann das 'Individuelle Feld' nach Bedarf aktualisiert oder gelöscht werden.

Mit 'Individuelle Felder' können nun gezielt CSS und JavaScript für einzelne Beiträge und Seiten eingebunden werden. Dies gibt Flexibilität für spezifische Anpassungen, ohne globale Änderungen vornehmen zu müssen.

Mit individuellem Code –
kreative Freiheit auf jeder Seite,
dabei stets die Sicherheitsaspekte im Blick.

Danke an ChatGPT, das war’s auch schon! – Na ja, es hat ein wenig gedauert, bis alles funktionierte, aber wir haben es gern getan.

B) Code per ID oder Slug

JS und CSS im WordPress-Editor & gezielte Alternativen.

Im folgenden Abschnitt geht es um die Möglichkeiten und Sicherheitsaspekte beim Einfügen von JavaScript und CSS direkt im WordPress-Editor. Es wird erläutert, warum das direkte Einfügen von JavaScript im Editor problematisch ist und welche Maßnahmen WordPress ergreift, um die Sicherheit der Website zu gewährleisten. Darüber hinaus werden alternative Methoden vorgestellt, um spezifische Anforderungen zu erfüllen und gezielten Code-Einsatz zu ermöglichen, indem IDs und Klassen verwendet werden, die WordPress für einzelne Seiten und Beiträge generiert. Diese Ansätze helfen, den Code präzise und sicher anzuwenden.

Was ist eine ID? – Eine ID (Identifikationsnummer) ist eine eindeutige Zahl, die von WordPress automatisch jeder Seite und jedem Beitrag zugewiesen wird. Diese Zahl dient dazu, Inhalte intern eindeutig zu identifizieren und auf sie zuzugreifen. Die ID ist in der URL der Bearbeitungsseite oder im Beitrags- und Seitenübersichtsbildschirm. Zum Beispiel in der URL www.deineseite.de/wp-admin/post.php?post=123&action=edit ist die ID 123.

Weiteres zu IDs im Beitrag IDs und Classen in WordPress.

Was ist ein Slug? – Ein Slug ist der Teil der URL, der eine bestimmte Seite oder einen bestimmten Beitrag eindeutig identifiziert. Er wird automatisch von WordPress generiert, kann aber auch manuell angepasst werden, um die Lesbarkeit und SEO-Freundlichkeit zu verbessern. Beispielsweise ist in der URL www.deineseite.de/beispiel-beitrag der Slug beispiel-beitrag.

JS im Editor-Text?

/ Käse ist ein Genuss, aber nicht immer.

Es ist eine Überlegung, aber JavaScript sollte nicht direkt im Editor-Text eingefügt werden.

Details

Das Einfügen von JavaScript (JS) direkt im WordPress-Editor kann problematisch sein, da WordPress aus Sicherheitsgründen JavaScript aus Beiträgen und Seiten herausfiltert. Diese Maßnahme soll Cross-Site Scripting (XSS) Angriffe verhindern und die Integrität der Website schützen.

Sicherheit: WordPress filtert JavaScript aus Beiträgen und Seiten, um Cross-Site Scripting (XSS) Angriffe zu verhindern. Dies ist eine Sicherheitsmaßnahme, um die Integrität der Website zu schützen.

Andere Methoden können hilfreich sein, um spezifische Anforderungen zu erfüllen und ermöglichen auch den gezielten Einsatz von IDs, um Code präzise einzufügen und anzuwenden.

JavaScript per ID oder Slug

Um JavaScript nur für eine oder mehrere bestimmte Seiten oder Beiträge anzuwenden, können spezifische Klassen oder IDs verwendet werden, die WordPress für diese Seiten generiert.

JS-Code über die functions.php einfügen

Das JavaScript kann direkt mittels functions.php eingefügt werden:

function mein_custom_script() {
    // Array mit den IDs oder Slugs der Seiten und Beiträge, auf denen das Skript eingefügt werden soll
    $pages_and_posts = array('123', '456', '789', 'slug-von-seite', 'slug-von-beitrag'); // IDs und Slugs der Seiten und Beiträge

    // Überprüfen, ob die aktuelle Seite oder der aktuelle Beitrag in dem Array enthalten ist
    if (is_page($pages_and_posts) || is_single($pages_and_posts)) {
        ?>
        <script>
            // Dein JavaScript-Code hier
            console.log("JavaScript funktioniert!");
        </script>
        <?php
    }
}
add_action('wp_footer', 'mein_custom_script');

Array mit IDs und Slugs: Das Array $pages_and_posts enthält die IDs und Slugs der Seiten und Beiträge, auf denen das Skript eingefügt werden soll.
is_page() und is_single(): Diese Funktionen überprüfen, ob die aktuelle Seite (is_page()) oder der aktuelle Beitrag (is_single()) in dem Array enthalten ist.
Einfügen des Skripts: Wenn eine Übereinstimmung gefunden wird, wird der JavaScript-Code im Footer der Seite eingefügt.

IDs und Slugs: Es können sowohl IDs als auch Slugs verwendet werden. Im Array pages_and_posts sind sie als Strings angegeben.
is_page($pages_and_posts) || is_single($pages_and_posts): Diese Bedingung stellt sicher, dass die Überprüfung sowohl für Seiten als auch für Beiträge durchgeführt wird.

JS-Code im Child-Theme in der .js-Datei

Im Child-Theme, z.B. scripts.js, kann der JavaScript-Code gezielt eingefügt werden:

document.addEventListener('DOMContentLoaded', function() {
    // Array mit den Klassen der Seiten und Beiträge
    var pagesAndPosts = [
        'page-id-123', 
        'page-id-456', 
        'page-id-789', 
        'postid-123', 
        'postid-456', 
        'postid-789', 
        'slug-von-seite', 
        'slug-von-beitrag'
    ];

    // Überprüfen, ob der Body eine der Klassen enthält
    pagesAndPosts.forEach(function(className) {
        if (document.body.classList.contains(className)) {
            // Dein JavaScript-Code hier
            console.log("JavaScript funktioniert nur auf der spezifischen Seite oder Beitrag: " + className);
            // Weitere JavaScript-Aktionen hier
        }
    });
});

DOMContentLoaded Event: Der Code wird ausgeführt, sobald das DOM vollständig geladen ist.
Array pagesAndPosts: Enthält die Klassen, die den spezifischen Seiten und Beiträgen zugewiesen sind.
- Klassen wie page-id-123 sind für Seiten mit der ID 123.
- Klassen wie postid-123 sind für Beiträge mit der ID 123.
- Klassen wie slug-von-seite-1 sind für Seiten oder Beiträge mit entsprechenden Slugs.
forEach Schleife: Durchläuft das Array pagesAndPosts und überprüft, ob der Body-Tag eine der angegebenen Klassen enthält.
document.body.classList.contains(className): Überprüft, ob der Body-Tag die Klasse className enthält.
JavaScript-Code: Wenn die Bedingung erfüllt ist, wird der gewünschte JavaScript-Code ausgeführt.

Beispiel-Anwendung: Dieser Code kann als Schablone verwendet werden und der spezifische JavaScript-Code ist innerhalb des if-Blocks einzufügen. Zum Beispiel:

if (document.body.classList.contains(className)) {
    // Dein spezifischer JavaScript-Code hier
    console.log("JavaScript funktioniert nur auf der spezifischen Seite oder Beitrag: ");
    // Beispiel: Ändere den Hintergrund der Seite
    document.body.style.backgroundColor = 'lightblue';
}

Performance-Aspekte

Die Verwendung eines Arrays und die Überprüfung mehrerer Klassen im body-Tag haben im Allgemeinen keine signifikanten Performance-Nachteile, besonders wenn die Anzahl der zu überprüfenden Seiten und Beiträge moderat ist. Browser sind sehr effizient im Umgang mit DOM-Manipulationen und Klassenüberprüfungen. Trotzdem gibt es einige Aspekte, die man beachten sollte, um sicherzustellen, dass der Code so effizient wie möglich bleibt. 🙂

DOMContentLoaded Event:
- Das DOMContentLoaded-Event wird ausgelöst, sobald das DOM vollständig geladen ist, aber bevor alle Bilder und Stylesheets geladen sind. Dies stellt sicher, dass dein Skript so früh wie möglich ausgeführt wird.
Array-Größe:
- Wenn das Array pagesAndPosts sehr groß ist, kann dies die Performance leicht beeinträchtigen, da jeder Eintrag im Array überprüft werden muss. Bei einer normalen Anzahl von Seiten und Beiträgen (z.B. weniger als 100) ist dies jedoch vernachlässigbar.
Klassenüberprüfung:
- Die Methode document.body.classList.contains(className) ist sehr effizient, da sie auf die interne Klassenliste des Body-Elements zugreift.

Optimierung für eine einzelne Seite oder einen Beitrag?

Falls der Code nur für eine bestimmte Seite oder einen bestimmten Beitrag ausführt werden sollte, kann der Code weiter optimiert werden, indem direkt die spezifische Klasse überprüft wird. Hier ein Beispiel für eine einzelne Seite oder einen Beitrag:

document.addEventListener('DOMContentLoaded', function() {
    // Spezifische Klasse für eine Seite oder einen Beitrag
    var specificClass = 'page-id-123'; // Ersetze dies durch die tatsächliche Klasse

    // Überprüfen, ob der Body die spezifische Klasse enthält
    if (document.body.classList.contains(specificClass)) {
        // Dein JavaScript-Code hier
        console.log("JavaScript funktioniert nur auf der spezifischen Seite oder Beitrag!");
        // Beispiel: Ändere den Hintergrund der Seite
        document.body.style.backgroundColor = 'lightblue';
    }
});

Vergleich der beiden Ansätze

Mehrere Seiten und Beiträge (Flexibilität):

Vorteile: Flexibel und erweiterbar, so können einfach neue Seiten und Beiträge hinzufügt werden, indem das Array aktualisiert wird.
Nachteile: Minimaler Overhead durch die Schleife und Array-Überprüfung, aber in der Praxis meist unbedeutend.

Einzelne Seite oder Beitrag (Effizienz):

Vorteile: Maximale Effizienz, da nur eine einzige Überprüfung durchgeführt wird.
Nachteile: Weniger flexibel, erfordert Codeänderungen, wenn weitere Seiten oder Beiträge hinzufügt werden sollten.

Schlussfolgerung: Für die meisten Anwendungsfälle ist der Unterschied in der Performance zwischen den beiden Ansätzen vernachlässigbar, besonders bei einer moderaten Anzahl von Seiten und Beiträgen. Der flexible Ansatz mit dem Array ist meistens vorzuziehen, da er einfacher zu warten und zu erweitern ist. Wenn jedoch sicher ist, dass der Code nur für eine einzelne Seite oder einen Beitrag ist und maximale Effizienz wünschst ist, ist der direkte Ansatz mit einer einzelnen Klassenüberprüfung eine gute Wahl.

CSS im Editor-Text?

/ Käse ist ein Genuss, aber nicht immer.

Ähnlich wie bei JavaScript könnte die Theorie aufkommen, CSS direkt im Text-Editor einzufügen.

Details

Das Einfügen von CSS-Code im 'Text'-Editor von WordPress kann funktionieren und ist eine einfache Methode, um Stile nur für eine bestimmte Seite zu verwenden. Beachte jedoch, dass dies nicht den Best Practices von WordPress entspricht und nur als temporäre Lösung angesehen werden sollte. Ideal ist es, CSS über das Customizer-Tool oder in einer .css-Datei im Child-Theme zu integrieren.

<style>
.ausnahme-beispiel {
    font-size: 20px; 
    color: #333;
    background-color: #f9f9f9;
    padding: 5px;
    margin: 20px 0;
    border: 2px solid #0073aa;
    border-radius: 10px; 
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
    line-height: 2; 
    transition: all 0.3s ease;
}
</style>

Nach dem Umschalten auf visuell folgt die Form von oben:

<style>
.ausnahme-beispiel {<br />
    font-size: 20px;<br />
    color: #333;<br />
    background-color: #f9f9f9;<br />
    padding: 5px;<br />
    margin: 20px 0;<br />
    border: 2px solid #0073aa;<br />
    border-radius: 10px;<br />
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);<br />
    font-family: 'Arial', sans-serif;<br />
    line-height: 2;<br />
    transition: all 0.3s ease;<br />
}<br />
</style>

Das macht das CSS unbrauchbar. Folglich sollte die Eingabe dieser Form (komprimiert) erfolgen:

<style>.ausnahme-beispiel {font-size: 24px;color: #333;background-color: #f9f9f9;padding: 5px;margin: 20px 0;border: 2px solid #0073aa;border-radius: 10px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);font-family: 'Arial', sans-serif;line-height: 2;}</style>

Nur als Beispiel, statt zu stylen, könnte man dies auch im HTML auszeichnen.

Das Einfügen von CSS-Code wie in deinem Beispiel direkt im Editor stellt im Allgemeinen kein Sicherheitsrisiko dar, solange nur autorisierte Benutzer dies tun können und keine schädlichen Kombinationen mit JavaScript oder HTML verwendet werden.

Beispiel Styling:

Allerdings ist zu beachten, dass man vor dem Umschalten in den visuellen Modus den Cursor außerhalb des Style-Tags setzt. Andernfalls kann es zu einer Umformatierung kommen, die das CSS unbrauchbar macht:

<style>.ausnahme-beispiel {font-size<span data-mce-type="bookmark" style="display: inline-block; width: 0px; overflow: hidden; line-height: 0;" class="mce_SELRES_start"></span>: 24px;</style>

Siehe Sonderbares Verhalten des Codes.

CSS per ID

Ebenso wie beim JavaScript kann CSS für bestimmte Seiten oder Beiträge anwendet werden.

Um das CSS nur für eine bestimmte Seite oder einen bestimmten Beitrag anzuwenden, sind ebensolche Classen oder IDs zu verwenden, die WordPress für diese Seiten generiert. Hier ist ein Beispiel, wie das CSS angepasst werden kann:

.postid-123 .ausnahme-beispiel {
    font-size: 24px;
    color: #333;
    background-color: #f9f9f9;
    padding: 5px;
    margin: 20px 0;
    border: 2px solid #0073aa;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: "Arial", sans-serif;
    line-height: 2;
}

Fazit

Mit individuellen Feldern in WordPress kannst du jede Seite und jeden Beitrag gezielt und effizient anpassen. Anstatt globale Änderungen vorzunehmen oder auf externe Plug-ins angewiesen zu sein, kannst du spezifische CSS- und JavaScript-Codes direkt einfügen. Zudem ermöglicht das Laden von CSS- und JavaScript-Code per ID oder Slug eine noch präzisere Steuerung. Diese Methoden bieten maximale Flexibilität und verbessern die Leistung der Website, ohne die gesamte Seite zu beeinträchtigen. Cleverer geht es nicht!

Für den gezielten Einsatz von Code empfiehlt sich auch das Plug-in Header Footer Code Manager. Header Footer Code Manager.

Ein Beispiel über individuelle Felder: das CSS und JS gezielt anwenden

Durch Methode A) mittels custom_css und custom_js der individuellen Felder läuft die Animation, nur auf der einen Seite und des Beispiels nur in diesem Abschnitt:

Scroll-basierte Animationen

1. HTML-Struktur

<div class="content-section">
  <div class="scroll-animation">
    <h2>Erster Abschnitt</h2>
    <p>Dieser Text wird animiert, wenn er ins Blickfeld scrollt.</p>
  </div>
  <div class="scroll-animation">
    <h2>Zweiter Abschnitt</h2>
    <p>Auch dieser Text wird animiert, wenn er ins Blickfeld scrollt.</p>
  </div>
  <div class="scroll-animation">
    <h2>Dritter Abschnitt</h2>
    <p>Schließlich wird auch dieser Text animiert.</p>
  </div>
</div>

HTML: Die HTML-Struktur enthält mehrere Abschnitte, die jeweils eine Klasse scroll-animation haben.

2. custom_css:

.content-section {
  padding: 50px;
  background: #f9f9f9;
}

.scroll-animation {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  margin-bottom: 30px;
}

.scroll-animation.in-view {
  opacity: 1;
  transform: translateY(0);
}

CSS: Anfangs sind die Elemente nicht sichtbar (opacity: 0) und leicht nach unten verschoben (translateY(20px)). Wenn sie ins Sichtfeld scrollen, wird die Klasse in-view hinzugefügt, was die Elemente sichtbar macht und ihre Position ändert.

3. custom_js:

document.addEventListener("DOMContentLoaded", function() {
  const scrollElements = document.querySelectorAll(".scroll-animation");

  const elementInView = (el, dividend = 1) => {
    const elementTop = el.getBoundingClientRect().top;
    return (
      elementTop <= (window.innerHeight || document.documentElement.clientHeight) / dividend
    );
  };

  const displayScrollElement = (element) => {
    element.classList.add("in-view");
  };

  const handleScrollAnimation = () => {
    scrollElements.forEach((el) => {
      if (elementInView(el, 1.25)) {
        displayScrollElement(el);
      }
    });
  };

  window.addEventListener("scroll", () => {
    handleScrollAnimation();
  });
});

JavaScript: Das Skript prüft, ob die Elemente ins Sichtfeld scrollen und fügt die Klasse in-view hinzu, um die Animation zu triggern.

Wir können nun CSS und JS verwenden, ohne die gesamte Website zu belasten.