Scrollgetriebene klebrige Überschrift

Scrollgetriebene Animationen sind großartig! Sie sind ein leistungsstarkes Tool, mit dem Entwickler die Bewegung und Transformation von Elementen direkt an die Bildlaufposition des Benutzers binden können. Diese Technik eröffnet neue Wege, um interaktive Erlebnisse zu erstellen, Bilder zu erstellen, Text über die Bühne zu gleiten und Hintergründe, um sich subtil zu verschieben. Mit sorgfältiger sorgfältiger Schriftrollenanimationen (SDA) können Ihre Website dynamischer, ansprechender und reaktionsschneller anfühlen.

Vor ein paar Wochen spielte ich mit scrollgesteuerten Animationen herum und suchte nur nach allen möglichen zufälligen Dingen, die Sie damit machen konnten. Dann kam ich auf die Idee, den Text der Hauptüberschrift (H1) zu animieren und mit SDA die Überschrift selbst basierend auf der Bildlaufposition des Benutzers auf der Seite zu ändern. In diesem Artikel werden wir diese Idee aufschlüsseln und Schritt für Schritt wieder aufbauen. Dies ist die allgemeine Richtung, in die wir uns befassen werden, die im Vollbildmodus besser aussieht und in einem Chrombrowser betrachtet wird:

Es ist wichtig zu beachten, dass der Effekt in diesem Beispiel nur in Browsern funktioniert, die scrollgesteuerte Animationen unterstützen. Wo SDA nicht unterstützt wird, gibt es einen ordnungsgemäßen Fallback für statische Überschriften. Aus Sicht der Barrierefreiheit, wenn der Browser die Bewegung aktiviert hat oder wenn die Seite mit assistierender Technologie zugegriffen wird, ist der Effekt deaktiviert und der Benutzer erhält alle Inhalte vollständig semantisch und zugänglich.

Nur ein kurzer Hinweis: Dieser Ansatz beruht auf ein paar „magischen Zahlen“ für die Keyframes, über die wir später sprechen werden. Obwohl sie überraschend reagieren, eignet sich diese Methode am besten für statische Inhalte und ist nicht ideal für hochdynamische Websites.

Genauer an die Animation

Bevor wir uns in scrollgetriebene Animationen eintauchen, nehmen wir uns eine Minute Zeit, um die Textanimation selbst zu betrachten und wie sie tatsächlich funktioniert. Dies basiert auf einer Idee, die ich vor ein paar Jahren hatte, als ich einen Schreibmaschineneffekt erstellen wollte. Zu dieser Zeit mussten die meisten Methoden, die ich fand, die Breite des Elements animierten, die unter Verwendung einer Monospace -Schriftart oder eines festen Farbhintergrunds erforderlich waren. Keiner davon hat wirklich für mich funktioniert. Also suchte ich nach einer Möglichkeit, den Inhalt selbst zu animieren, und die Lösung war, wie es oft ist, in Pseudoelementen.

Pseudo-Elemente haben eine Inhaltseigenschaft, und Sie können diesen Text (irgendwie) animieren. Es ist nicht genau Animation, aber Sie können den Inhalt dynamisch ändern. Der coole Teil ist, dass das einzige, was sich ändert, der Text selbst ist, keine anderen Tricks erforderlich.

Beginnen Sie mit einem soliden Fundament

Jetzt, da Sie den Trick hinter der Textanimation kennen, lassen Sie uns sehen, wie Sie ihn mit einer scrollengetriebenen Animation kombinieren und sicherstellen, dass wir auch einen soliden, zugänglichen Fallback haben.

Wir beginnen mit einem grundlegenden semantischen Markup. Ich werde alles in ein Hauptelement mit einzelnen Abschnitten einwickeln. Jeder Abschnitt erhält seine eigene Überschrift und seinen eigenen Inhalt, wie Text und Bilder. In diesem Beispiel habe ich vier Abschnitte mit jeweils ein bisschen Text und einige Bilder eingerichtet, alles über Primärfarben.

<main>
  <section>
    <h1>Grundfarben</h1>
    <p>Die drei Primärfarben (rot, blau und gelb) bilden die Grundlage aller anderen Farben am Farbrad. Das Mischen in verschiedenen Kombinationen erzeugt eine Vielzahl von Farbtönen.</p>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175228405842915.jpg" class="lazy" alt="Scrollgetriebene klebrige Überschrift">
  </section>
  
  <section>
    <h2>Rote Kraft</h2>
    <p>Rot ist eine mutige und lebendige Farbe, die Energie, Leidenschaft und Wärme symbolisiert. Es zieht leicht Aufmerksamkeit auf sich und ist oft mit starken Emotionen verbunden.</p>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175228406079019.jpg" class="lazy" alt="Scrollgetriebene klebrige Überschrift">
  </section>
  
  <section>
    <h2>Blaue Ruhe</h2>
    <p>Blau ist eine ruhige und kühle Farbe, die Ruhe, Stabilität und Vertrauen darstellt. Es erinnert Bilder von Himmel und Meer und schafft eine friedliche Stimmung.</p>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175228406146761.jpg" class="lazy" alt="Scrollgetriebene klebrige Überschrift">
  </section>
  
  <section>
    <h2>Gelbe Freude</h2>
    <p>Gelb ist eine helle und fröhliche Farbe, die für Licht, Optimismus und Kreativität steht. Es ist gut sichtbar und bringt ein Gefühl von Glück und Hoffnung.</p>
    <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175228406273727.jpg" class="lazy" alt="Scrollgetriebene klebrige Überschrift">
  </section>
</main>

Was das Styling angeht, mache ich in dieser Phase, nur die Grundlagen, nichts Besonderes. Ich habe die Schriftart geändert und den Text und die Überschriftengrößen angepasst, die Anzeige für die Haupt- und die Abschnitte eingerichtet und die Bildgrößen mit Objektfit befestigt.

Zu diesem Zeitpunkt haben wir also eine einfache Website mit statischen, semantischen und zugänglichen Inhalten, was großartig ist. Jetzt ist es das Ziel, sicherzustellen, dass es so bleibt, wenn wir unseren Effekt hinzufügen.

Die zweite erste Überschrift

Wir werden zunächst ein weiteres H1 -Element oben auf der Hauptdarsteller hinzufügen. Dieses neue Element dient als Platzhalter für unseren animierten Text und aktualisiert gemäß der Bildlaufposition des Benutzers. Und ja, ich weiß, dass es im ersten Abschnitt bereits einen H1 gibt. Das ist in Ordnung und wir werden es gleich ansprechen, so dass jeweils nur einer zugänglich ist.

<h1 aria-hidden="true"> Grundfarben</h1>

Beachten Sie, dass ich dieser Überschrift Aria-Hidden = "True" hinzugefügt habe, sodass sie nicht von den Bildschirmlesern aufgegriffen wird. Jetzt kann ich alle anderen Überschriften eine Klasse speziell für Bildschirmleser hinzufügen. Auf diese Weise wird jeder, der den Inhalt „normalerweise“ betrachtet, nur die animierte Überschrift, während die Benutzer der assistiven Technologie die regulären, statischen semantischen Überschriften erhalten.

HINWEIS: Der Stil für die .Sronly -Klasse basiert auf „inklusiven verborgenen“ von Scott O'Hara.

Unterstützung der Handhabung

So sehr die Zugänglichkeit wichtig ist, es gibt eine weitere Sorge, die wir beachten müssen: Unterstützung. CSS-scrollgetriebene Animationen sind fantastisch, aber sie werden überall nicht vollständig unterstützt. Deshalb ist es wichtig, die statische Version für Browser bereitzustellen, die SDA nicht unterstützen.

Der erste Schritt besteht darin, die animierte Überschriften zu verbergen, die wir gerade mit Display: None hinzugefügt haben. Dann fügen wir einen neuen @Supports -Block hinzu, um den SDA -Support zu überprüfen. In diesem Block, in dem SDA unterstützt wird, können wir das Display für die Überschrift zurückschalten.

Die .Sronly -Klasse sollte sich auch in den @Supports -Block bewegen, da wir nur möchten, dass sie angewendet wird, wenn der Effekt aktiv ist, nicht wenn sie nicht unterstützt wird. Auf diese Weise erhält jeder, der die Seite in einem Browser ohne SDA -Unterstützung besucht, wie bei der Assistenztechnologie immer noch den statischen Inhalt.

 .Scrolldrivenheading {
  Anzeige: Keine;
}

@Supports (Animationszweile: scroll ()) {
  .Scrolldrivenheading {
    Anzeige: Block;
  }
  
  / * Nur Bildschirmleser *////
  .Sronly {
    Clip: Rect (0 0 0 0); 
    Clip-Pfad: Einschub (50%);
    Höhe: 1PX;
    Überlauf: versteckt;
    Position: absolut;
    weißer Raum: Nowrap; 
    Breite: 1PX;
  }
}

Sich klebrig machen

Das nächste, was wir tun müssen, ist, die Klebrigkeit der Überschrift zu bewältigen. Um sicherzustellen, dass die Überschrift immer auf dem Bildschirm bleibt, stellen wir die Position auf klebrig: 0: Daher klebt sie an der Oberseite des Ansichtsfensters.

Während wir dabei sind, fügen wir ein grundlegendes Styling hinzu, einschließlich eines Hintergrunds, damit der Text nicht mit dem, was sich hinter der Überschrift befindet, ein bisschen Polster für den Abstand und einen weißen Raum: Nowrap, um die Überschrift auf einer einzelnen Linie zu halten.

 / * im Block @Supports *// *
.Scrolldrivenheading {
  Anzeige: Block;
  Position: klebrig;
  Top: 0;
  Hintergrundbild: linear Gradient (0de, transparent, schwarz 1em);
  Polsterung: 0,5EM 0,25EM;
  weißer Raum: Nowrap;
}

Jetzt ist alles eingerichtet: Unter normalen Bedingungen werden wir oben auf der Seite einen einzigen klebrigen Übergang sehen. Und wenn jemand Assistenztechnologie oder einen Browser verwendet, der SDA nicht unterstützt, erhalten er immer noch den regulären statischen Inhalt.

Jetzt sind wir bereit, den Text zu animieren. Fast…

Die magischen Zahlen

Um die Textanimation zu erstellen, müssen wir genau wissen, wo sich der Text ändern soll. Bei SDA wird das Scrollen im Grunde zu unserer Zeitleiste, und wir müssen die genauen Punkte dieser Zeitleiste ermitteln, um die Animation auszulösen.

Um dies zu erleichtern und um diese Positionen zu bestimmen, habe ich das folgende Skript vorbereitet:

 @property--Scroll-Position {
  Syntax: "<number> ";
  Erben: Falsch;
  Anfangswert: 0;
}

Body :: After {
  Gegenauflistung: SP var (-Bildlaufposition);
  Inhalt: Zähler (sp) "%";
  Position: fest;
  Top: 0;
  links: 0;
  Polsterung: 1em;
  Hintergrundfarbe: Kastanienbranchen;
  Animation: ScrollPosition -Schritte (100);
  Animationszeit: scroll ();
}

@keyframes Scrollposition {
  0% {-SCROLL-Position: 0; }
  100% {-SCROLL-Position: 100; }
}</number>

Ich möchte nicht zu tief in diesen Code einsteigen, aber die Idee ist, dieselbe Scroll-Zeitleiste zu nehmen, die wir neben dem Text verwenden und sie verwenden, um eine benutzerdefinierte Eigenschaft (-SCROLL-Position) von 0 auf 100 zu animieren, basierend auf dem Scroll-Fortschritt, und diesen Wert im Inhalt anzeigen.

Wenn wir dies zu Beginn unseres Codes hinzufügen, werden wir in der oberen linken Ecke des Bildschirms ein kleines rotes Quadrat sehen, das die aktuelle Bildlaufposition als Prozentsatz zeigt (um den Schlüsselframes zu entsprechen). Auf diese Weise können Sie zu einem beliebigen Abschnitt scrollen und den Prozentsatz, in dem jede Überschrift beginnen sollte, leicht markieren.

Mit dieser Methode und ein wenig Versuch und Irrtum stellte ich fest, dass ich möchte, dass sich die Überschriften bei 30%, 60%und 90%ändern. Wie machen wir das eigentlich? Fangen wir an, animieren.

Animierender Text

Zunächst werden wir den Inhalt im Element von .scrolDrivenheading ausräumen, damit er leer und für dynamische Inhalte bereit ist. Im CSS füge ich der Überschrift einen Pseudoelement hinzu, mit dem wir den Text animieren werden. Wir geben ihm einen leeren Inhalt, richten den Animationsnamen ein und weisen natürlich die Animationszeiteilung dem Scroll () zu.

Und da ich die Inhaltseigenschaft animiere, die ein diskreter Typ ist, wechselt es nicht reibungslos zwischen Werten. Es springt einfach von einem zum nächsten. Durch das Einstellen der Eigenschaft mit Animations-Timing-Funktion in Schrittende stelle ich sicher, dass jede Änderung genau am von mir definierten Schlüsselframe stattfindet. Der Text schaltet also genau dort, wo ich sie möchte, anstatt irgendwo dazwischen.

 .Scrolldrivenheading {
  /* Stil */

  &::nach {
    Inhalt: '';
    Animationsname: HeadingContent;
    Animations-Timing-Funktion: Stiefende;
    Animationszeit: scroll ();
  }
}

In den Keyframes ist dieser Teil (vorerst) ziemlich einfach. Wir werden den ersten Frame (0%) auf die erste Überschrift setzen und die anderen Überschriften den zuvor gefundenen Prozentsätzen zuweisen.

 @keyframes HeadingContent {
  0% {Inhalt: 'Primärfarben'}
  30% {Inhalt: 'Red Power'}
  60% {Inhalt: 'Blue Calm'}
  90%, 100% {Inhalt: 'Yellow Joy'}
}

Jetzt haben wir eine Seite mit einer klebrigen Überschrift, die sich beim Scrollen aktualisieren.

Aber warte, im Moment wechselt es einfach sofort. Wo ist die Animation?! Hier wird es interessant. Da wir keine JavaScript oder eine String -Manipulation verwenden, müssen wir die Schlüsselrahmen selbst schreiben. Der beste Ansatz ist es, von der Zielüberschrift zu beginnen, die Sie erreichen möchten, und rückwärts bauen. Wenn Sie also zwischen der ersten und zweiten Überschrift animieren möchten, würde dies so aussehen:

 @keyframes HeadingContent {
  0% {Inhalt: 'Primärfarben'}
  
  9% {Inhalt: 'Primärfarbe'}
  10% {Inhalt: 'Primär Colo'}
  11% {Inhalt: 'Primary Col'}
  12% {Inhalt: 'Primärer Co'}
  13% {Inhalt: 'Primär C'}
  14% {Inhalt: 'primär'}
  15% {Inhalt: 'Primär'}
  16% {Inhalt: 'Primar'}
  17% {Inhalt: 'Prima'}
  18% {Inhalt: 'Prim'}
  19% {Inhalt: 'Pri'}
  20% {Inhalt: 'PR'}
  21% {Inhalt: 'P'}
  
  22% {Inhalt: 'R'}
  23% {Inhalt: 'Re'}
  24% {Inhalt: 'Red'}
  25% {Inhalt: 'Red'}
  26% {Inhalt: 'Red P'}
  27% {Inhalt: 'Red Po'}
  28%{Inhalt: 'Red Pow'}
  29% {Inhalt: 'Red Powe'}
  
  30% {Inhalt: 'Red Power'}
  60% {Inhalt: 'Blue Calm'}
  90%, 100% {Inhalt: 'Yellow Joy'}
}

Ich bin jedes Mal um 1% zurückgegangen und habe nach Bedarf einen Buchstaben entfernt oder hinzugefügt. Beachten Sie, dass Sie in anderen Fällen möglicherweise eine andere Schrittgröße und nicht immer 1%verwenden möchten. Zum Beispiel möchten Sie bei längeren Überschriften mit mehr Wörtern wahrscheinlich kleinere Schritte.

Wenn wir diesen Vorgang für alle anderen Überschriften wiederholen, werden wir am Ende eine vollständig animierte Überschrift erhalten.

Benutzereinstellungen

Wir haben bereits über Barrierefreiheit gesprochen und sichergestellt, dass der Inhalt gut mit der assistiven Technologie funktioniert, aber es gibt noch eine Sache, die Sie beachten sollten: Vorlieben reduzierte Motion. Obwohl dies keine strenge WCAG -Anforderung für diese Art von Animation ist, kann dies für Menschen mit vestibulären Empfindlichkeiten einen großen Unterschied machen. Es ist also eine gute Idee, die Inhalte ohne Animationen zu zeigen.

Wenn Sie eine nicht animierte Alternative anbieten möchten, müssen Sie nur Ihren @Supports-Block mit einer Abfrage zur Beschäftigungsbewegung einwickeln:

 @media Screen und (bevorzugt es, reduzierte Motion: No-Preference) {
  @Supports (Animationszweile: scroll ()) {
    /* Stil */
  }
}

Aufstieg

Lassen Sie uns über Variationen sprechen. Im vorherigen Beispiel haben wir den gesamten Überschriftentext animiert, das müssen wir jedoch nicht tun. Sie können genau das gewünschte Teil animieren und zusätzliche Animationen verwenden, um den Effekt zu verbessern und die Dinge interessanter zu machen. Zum Beispiel habe ich hier den Text „Primärfarbe“ repariert und eine Spannweite danach hinzugefügt, die den animierten Text umgeht.

<h1 aria-hidden="true">
  Grundfarbe<span></span>
</h1>

Und da ich jetzt eine separate Spanne habe, kann ich seine Farbe auch so animieren, dass sie jedem Wert entspricht.

Im nächsten Beispiel habe ich die Textanimation in der Spannweite aufbewahrt, aber anstatt die Textfarbe zu ändern, fügte ich eine weitere scrollgesteuerte Animation auf der Überschrift selbst hinzu, um seine Hintergrundfarbe zu ändern. Auf diese Weise können Sie so viele Animationen hinzufügen, wie Sie möchten, und ändern, was Sie möchten.

Du bist an der Reihe!

CSS-scrollgetriebene Animationen sind mehr als nur ein cooler Trick. Sie sind ein Game-Changer, der die Tür für eine ganz neue Welt des Webdesigns öffnet. Mit nur ein wenig Kreativität können Sie selbst die gewöhnlichsten Seiten in etwas Interaktives, Einprägsames und wirklich ansprechendes umwandeln. Die Möglichkeiten sind wirklich endlos, von subtilen Effekten, die die Benutzererfahrung verbessern, über wilde, animierte Übergänge, die Ihre Website hervorheben.

Also, was würden Sie mit scrollengetriebenen Animationen erstellen? Was würden Sie mit dieser neuen Supermacht erstellen? Probieren Sie es aus, experimentieren Sie, und wenn Sie etwas Cooles finden, einige Ideen, wilde Experimente oder sogar seltsame Fehler haben, würde ich gerne davon hören. Ich bin immer gespannt, was andere sich einfallen lassen. Teilen Sie also Ihre Arbeit, Fragen oder Ihre Feedback unten.

Besonderer Dank geht an Cristian Díaz für die Überprüfung der Beispiele, für die Überprüfung, dass alles zugänglich ist und wertvolle Ratschläge und Verbesserungen beiträgt.

Das obige ist der detaillierte Inhalt vonScrollgetriebene klebrige Überschrift. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!