Geschrieben von Oscar Jite-Orimiono✏️
Das Internet ist voller Farben, Animationen und grafischer Effekte, die Websites sowohl fesselnd als auch überreizend machen können. Als Frontend-Enthusiasten und -Profis müssen wir lebendige visuelle Elemente mit zugänglichen, benutzerzentrierten Optionen für diejenigen in Einklang bringen, die ein dezenteres Erlebnis bevorzugen.
In diesem Artikel werden wir mit weniger mehr erreichen, indem wir einen Blick auf die folgenden Punkte werfen:
Für viele Benutzer können Animationen das Erlebnis auf einer Website verbessern, für andere können sie jedoch hinderlich sein. Zu viel Bewegung kann Unbehagen verursachen oder ablenken und außerdem zu Leistungseinbußen führen.
Die Medienabfrage „Preferences-Reduced-Motion“ prüft, ob ein Benutzer auf seinem Computer Einstellungen aktiviert hat, um Website-Animationen einzuschränken. Für Benutzer, die reduzierte Bewegungen bevorzugen, können Sie Animationen ändern oder ganz deaktivieren.
Um zu beginnen, erstellen wir eine Webseite mit einigen Animationen. Wie wäre es mit einem animierten gestreiften Hintergrund?
Hier ist der HTML-Code für die Seite:
<div>
<p>And here’s the CSS:<br>
</p>
<pre class="brush:php;toolbar:false">.container {
position: relative;
width: 100%;
height: 100%;
&::before {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: calc(100% + 110px);
background: repeating-linear-gradient(
45deg,
#553c9a 0%,
#553c9a 25%,
#301934 25%,
#301934 50%
);
background-size: 110px 110px;
animation: animateStripes 2s linear infinite;
}
}
@keyframes animateStripes {
to {
transform: translateX(-110px);
}
}
So sieht es mit den animierten Streifen aus:
Die No-Preference-Syntax ist für Benutzer ohne Präferenzeinstellungen gedacht, während Reduce für diejenigen gedacht ist, die dies tun. Sie können Animationen für Benutzer, die reduzierte Bewegungen bevorzugen, vollständig deaktivieren oder ändern. So deaktivieren Sie den bewegten Hintergrund mithilfe der Medienabfrage „Preferred-Reduced-Motion“:
@media (prefers-reduced-motion: reduce) {
.container::before {
animation: none;
}
}
Randbemerkung: Auf Geräten, auf denen Windows 11 ausgeführt wird, können Sie Animationen deaktivieren, indem Sie zu Einstellungen gehen, Barrierefreiheit und dann Visuelle Effekte auswählen und ausschalten Animationseffekte. Der Vorgang ist für fast jeden Gerätetyp/Betriebssystem ähnlich.
Hier ist ein CodePen:
Sie können die Art der Animation ändern, anstatt sie zu deaktivieren. Anstelle einer Slide-in-Transformationsanimation verwenden Sie beispielsweise eine Einblendanimation für Benutzer, die reduzierte Bewegung bevorzugen.
Wenn Sie Scroll-Animationen mit Elementen verwenden, die von einer Seite der Seite eingeschoben werden, können Sie zu einem einfacheren Effekt wechseln, beispielsweise einer Einblendung.
Hier ist CSS für eine einfache Scroll-Animation:
<div>
<p>And here’s the CSS:<br>
</p>
<pre class="brush:php;toolbar:false">.container {
position: relative;
width: 100%;
height: 100%;
&::before {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: calc(100% + 110px);
background: repeating-linear-gradient(
45deg,
#553c9a 0%,
#553c9a 25%,
#301934 25%,
#301934 50%
);
background-size: 110px 110px;
animation: animateStripes 2s linear infinite;
}
}
@keyframes animateStripes {
to {
transform: translateX(-110px);
}
}
In diesem Beispiel werden die Boxelemente von der rechten Seite der Webseite eingeblendet und nach links verschoben. Diese Bewegung wird durch die Transformationseigenschaft gesteuert, sodass Sie sie für Benutzer, die eine reduzierte Bewegung bevorzugen, einfach entfernen können:
@media (prefers-reduced-motion: reduce) {
.container::before {
animation: none;
}
}
Benutzer ohne Präferenz sehen Folgendes, wenn sie scrollen:
Und das sehen Benutzer mit „Reduzieren“:
Mit der Medienabfrage „Preferences-Reduced-Motion“ können Sie komplexe Animationen abschwächen/verlangsamen oder ganz deaktivieren, je nachdem, was der Benutzer möchte.
Hier ist ein CodePen zur Interaktion, mit dem Sie Animationen auf Ihrem Gerät deaktivieren können, um den Unterschied zu sehen:
Benutzer mit Gleichgewichtsstörungen wie Reisekrankheit und Schwindel können beim Betrachten von Animationen die Orientierung verlieren oder schwindelig werden. Animationen können auch für Benutzer ablenkend sein, die eine einfache Benutzeroberfläche bevorzugen.
Durch die Möglichkeit der Bewegungsreduzierung wird die Nutzung von Websites für Benutzer, die empfindlich auf Bewegungen reagieren, deutlich komfortabler.
Es ist mittlerweile üblich, dass Websites und Anwendungen die Möglichkeit haben, von einem hellen zu einem dunkleren Thema zu wechseln. Einige Websites bieten Ihnen eine zusätzliche Option basierend auf den Systemeinstellungen.
Die Medienabfrage „Preferes-Color-Schema“ erkennt, ob ein Benutzer dunkle oder helle Themen bevorzugt. Die Benutzer können ein Standarddesign basierend auf ihren Geräteeinstellungen erhalten.
Hier ist eine Webseite mit hellen Farben:
Das sehen Benutzer, wenn ihr Standarddesign „Light“ ist. Anschließend können Sie das bevorzugte Farbschema verwenden, um das dunkle Thema zu erstellen:
.box {
transform: translateX(100%);
opacity: 0;
transition: transform 0.5s linear, opacity 0.5s linear;
}
.reveal {
transform: translateX(0);
opacity: 1;
}
@keyframes reveal {
to {
transform: translateX(0);
opacity: 1;
}
}
Das Ausschreiben der CSS-Regeln sowohl für den hellen als auch für den dunklen Modus könnte zu aufwändig sein, insbesondere wenn mehrere Eigenschaften dieselben Werte haben. Durch die Verwendung von Variablen zum Zuordnen der Farbschemata können Sie Wiederholungen vermeiden:
@media (prefers-reduced-motion: reduce) {
.box {
transform: translateX(0);
}
}
Hier ist ein Screenshot derselben Seite wie zuvor, jedoch mit aktiviertem Dunkelmodus:
Hier ist ein CodePen, mit dem Sie interagieren können:
Das bevorzugte Farbschema ist nicht nur auf Farben beschränkt; Sie können damit Bilder austauschen:
<div>
<p>And here’s the CSS:<br>
</p>
<pre class="brush:php;toolbar:false">.container {
position: relative;
width: 100%;
height: 100%;
&::before {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: calc(100% + 110px);
background: repeating-linear-gradient(
45deg,
#553c9a 0%,
#553c9a 25%,
#301934 25%,
#301934 50%
);
background-size: 110px 110px;
animation: animateStripes 2s linear infinite;
}
}
@keyframes animateStripes {
to {
transform: translateX(-110px);
}
}
Hier ist ein Screenshot der Webseite im Light-Modus:
Hintergrundfoto von Plufow Le Studio auf Unsplash.
Und hier ist die Seite im dunklen Modus:
[Bildunterschrift>
Hintergrundfoto von Plufow Le Studio auf Unsplash.
Testen Sie unbedingt Farbkontraste, bevor Sie sie verwenden, um eine bessere Lesbarkeit zu gewährleisten. Es stehen mehrere Tools zur Verfügung, die Ihnen bei der Auswahl der zu verwendenden Farben helfen können.
Berücksichtigen Sie jedes mögliche Element, das aktualisiert werden muss, wenn Sie das Thema wechseln, nicht nur den Hintergrund und den Text. Aus diesem Grund ist es eine gute Idee, die Designs mithilfe von CSS-Variablen zu speichern. Möglicherweise müssen Sie Alternativen für Schaltflächen, Schatten, Rahmen, Links und mehr bereitstellen.
Der einfachste Weg, Benutzereinstellungen zu implementieren, ist die Verwendung der @media-Regel. Sie müssen die Präferenz für Bewegung oder Themen angeben, andernfalls überschreiben die CSS-Regeln in der Medienabfrage alle anderen Regeln oder Geräteeinstellungen.
Das bedeutet, dass Sie für Bewegungseinstellungen angeben müssen, ob es reduziert oder nicht bevorzugt ist, und für Themen, ob es hell oder dunkel ist:
@media (prefers-reduced-motion: reduce) {
.container::before {
animation: none;
}
}
Dies kann beim Testen Ihres Codes nützlich sein, aber stellen Sie sicher, dass Sie vor der Implementierung die genaue Präferenz angeben.
Benutzereinstellungen können auch mit JavaScript umgesetzt werden. Sie können basierend auf den Benutzereinstellungen bestimmten Elementen eine neue Klasse hinzufügen.
Anhand unseres ersten Beispiels mit den animierten Streifen erfahren Sie hier, wie Sie mit JavaScript nach Benutzereinstellungen suchen:
.box {
transform: translateX(100%);
opacity: 0;
transition: transform 0.5s linear, opacity 0.5s linear;
}
.reveal {
transform: translateX(0);
opacity: 1;
}
@keyframes reveal {
to {
transform: translateX(0);
opacity: 1;
}
}
Hier ist das CSS:
@media (prefers-reduced-motion: reduce) {
.box {
transform: translateX(0);
}
}
Beachten Sie, dass Pseudoelemente nicht Teil des DOM sind und nicht direkt in JavaScript ausgewählt werden können, daher dieser Ansatz.
Benutzerdefinierte HTML-Datenattribute und JavaScript ermöglichen Ihnen die Implementierung von Benutzereinstellungen. Mit Datenattributen können Sie Informationen zu HTML-Elementen speichern, ohne die Struktur des Dokuments zu beeinträchtigen. Sie verwenden das Datenpräfix und können einfach mit JavaScript bearbeitet werden:
@media (prefers-color-scheme: dark) {
#main {
background-image: repeating-linear-gradient(
45deg,
#553c9a,
#553c9a 50px,
#3a1e4f 50px,
#3a1e4f 100px,
#301934 100px,
#301934 150px
);
}
nav{
background: rgba(0, 0, 0, 0.5);
}
.logo a,
nav ul li a{
color: #b393d3;
}
.content {
background: rgba(0, 0, 0, 0.5);
}
.content h1 {
color: #b393d3;
}
.content p{
color: #b393d3;
}
}
Hier ist das CSS:
<div>
<p>And here’s the CSS:<br>
</p>
<pre class="brush:php;toolbar:false">.container {
position: relative;
width: 100%;
height: 100%;
&::before {
position: absolute;
content: "";
top: 0;
left: 0;
height: 100%;
width: calc(100% + 110px);
background: repeating-linear-gradient(
45deg,
#553c9a 0%,
#553c9a 25%,
#301934 25%,
#301934 50%
);
background-size: 110px 110px;
animation: animateStripes 2s linear infinite;
}
}
@keyframes animateStripes {
to {
transform: translateX(-110px);
}
}
Preferences-reduced-data ist zwar noch experimentell, handelt es sich jedoch um eine vorgeschlagene Medienabfrage, mit der Websites erkennen können, ob Benutzer Daten lieber speichern möchten.
Sie verwendet die gleiche Syntax wie die Medienabfrage „Preferers-Reduced-Motion“, nämlich „Reduce“ für Benutzer, die leichtgewichtige Inhalte bevorzugen, und „No-Preference“ für Benutzer ohne Datenpräferenz.
Einige seiner potenziellen Anwendungen umfassen das Reduzieren hochauflösender Bilder, das Laden alternativer Schriftarten, das Deaktivieren der automatischen Wiedergabe von Videos und das verzögerte Laden unkritischer Inhalte. Diese Medienabfrage könnte dazu beitragen, die Ladezeiten für Benutzer mit begrenzten oder teuren Datentarifen oder mit unzuverlässigen Internetverbindungen zu verbessern.
Die Berücksichtigung der Benutzerpräferenzen ist entscheidend für die Verbesserung des Benutzererlebnisses. In diesem Tutorial haben Sie gelernt, wie Sie die Medienabfrage „Preferes-Reduced-Motion“ und „Preferes-Color-Scheme“ verwenden, um die Bewegungs- und Designeinstellungen eines Benutzers zu erkennen. Es gibt auch @media-Regeln für Kontrast- und Transparenzeinstellungen.
Als Webentwickler sind Sie der Architekt mit der Macht, jede Website für jeden Benutzertyp komfortabel, zugänglich und effizient zu gestalten.
Da Web-Frontends immer komplexer werden, fordern ressourcenintensive Funktionen immer mehr vom Browser. Wenn Sie daran interessiert sind, die clientseitige CPU-Nutzung, Speichernutzung und mehr für alle Ihre Benutzer in der Produktion zu überwachen und zu verfolgen, probieren Sie LogRocket aus.
LogRocket ist wie ein DVR für Web- und mobile Apps und zeichnet alles auf, was in Ihrer Web-App, mobilen App oder Website passiert. Anstatt zu erraten, warum Probleme auftreten, können Sie wichtige Frontend-Leistungsmetriken zusammenfassen und darüber berichten, Benutzersitzungen zusammen mit dem Anwendungsstatus wiedergeben, Netzwerkanfragen protokollieren und alle Fehler automatisch aufdecken.
Modernisieren Sie die Art und Weise, wie Sie Web- und mobile Apps debuggen – beginnen Sie mit der kostenlosen Überwachung.
Das obige ist der detaillierte Inhalt vonAnpassung an Bewegungs- und Themenpräferenzen des Benutzers mit CSS und JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
