Wir stellen uns Hintergrundbilder oft als Textur oder etwas vor, das Kontrast für lesbaren Inhalt bietet – mit anderen Worten, nicht wirklich Inhalt. Wenn es zufrieden wäre, würden Sie wahrscheinlich nach einem greifen <img>
Wie auch immer, Zugänglichkeit und so weiter.
Aber es gibt Zeiten, in denen die Position or Treppe eines Hintergrundbildes irgendwo im Spannungsfeld von Inhalt und Dekoration angesiedelt sein. Der Kontext ist König, oder? Wenn wir die Position des Hintergrundbilds ändern, kann es etwas mehr Kontext oder Erfahrung vermitteln.
Wie so? Schauen wir uns ein paar Beispiele an, die ich gesehen habe.
Zu Beginn möchte ich darauf hinweisen, dass es in diesen Demos eine feine Linie zwischen Bildern, die zur Dekoration verwendet werden, und Bildern, die als Inhalt verwendet werden, gibt. Der Unterschied wirkt sich auf die Barrierefreiheit aus, wenn Hintergründe Screenreadern nicht angekündigt werden. Wenn Ihr Bild wirklich ein Bild ist, dann ziehen Sie vielleicht eine in Betracht <img>
Tag mit richtig alt
Text. Und wo wir gerade über Zugänglichkeit sprechen, es ist eine gute Idee Berücksichtigen Sie die Bewegungspräferenz eines Benutzers .
Zeig mir mehr!
Chris Coyier hat diese nette kleine Demo von vor einigen Jahren.
Die Demo ist in vielerlei Hinsicht superpraktisch, weil es ein ordentlicher Ansatz für die Anzeige von Anzeigen in Inhalten ist. Sie haben das Verkaufsargument und ein verlockendes Image, um es zu ergänzen.
Die große Einschränkung für die meisten Anzeigen, würde ich wetten, ist der begrenzte Platz. Ich weiß nicht, ob Sie jemals eine Anzeige auf einer Seite platzieren mussten, aber ich habe und frage den Werbetreibenden normalerweise nach einem Bild, das den genauen Pixelabmessungen entspricht, damit das Asset in den Raum passt.
Aber Chris' Demo mildert das Platzproblem. Bewegen Sie den Mauszeiger über das Bild und beobachten Sie, wie es sich bewegt und skaliert. Der Benutzer bekommt tatsächlich mehr Kontext für das Produkt, als wenn sich das Bild an seiner ursprünglichen Position befände. Das ist eine Win-Win-Situation, oder? Der Werbetreibende kann ein auffälliges Bild erstellen, ohne den Kontext zu beeinträchtigen. In der Zwischenzeit erhält der Benutzer einen kleinen Mehrwert aus den neu aufgedeckten Teilen des Bildes.
Wenn Sie sich das Markup der Demo ansehen, werden Sie feststellen, dass es ziemlich genau das ist, was Sie erwarten würden. Hier ist eine gekürzte Version:
<div class="ad-container"> <a href="#" target="_blank" rel="noopener"> <!-- Background image container --> <div class="ad-image"></div> </a> <div class="ad-content"> <!-- Content --> </div>
</div>
Über die Semantik könnten wir wahrscheinlich ein bisschen streiten, aber darum geht es nicht. Wir haben einen Container mit einem angeschlossenen <div>
für das Hintergrundbild und andere <div>
um den Inhalt zu halten.
Was das Styling betrifft, sind die wichtigsten Teile hier:
.container { background-image: url("/path/to/some/image.png"); background-repeat: no-repeat; background-position: 0 0; height: 400px; width: 350px;
}
Nicht schlecht, oder? Wir geben dem Container einige Abmessungen und legen ein Hintergrundbild darauf, das sich nicht wiederholt und an seinem linken unteren Rand positioniert wird.
Der eigentliche Trick ist mit JavaScript. Wir werden dies verwenden, um die Mausposition und den Offset des Containers zu erhalten, und konvertieren diesen Wert dann in eine geeignete Skalierung, um die festzulegen background-position
. Hören wir uns zunächst die Mausbewegungen auf dem an .container
Element:
let container = document.querySelector(".container");
container.addEventListener("mousemove", function(e) { // Our function }
);
Von hier aus können wir die Container benutzen offsetX
und offsetY
Eigenschaften. Aber wir werden diese Werte nicht direkt verwenden, da der Wert für die X-Koordinate kleiner ist als wir brauchen, und die Y-Koordinate größer ist. Wir müssen ein wenig herumspielen, um eine Konstante zu finden, die wir als Multiplikator verwenden können.
Es ist ein bisschen Touch-and-Feel, aber das habe ich gefunden 1.32
und 0.455
funktionieren perfekt für die X- bzw. Y-Koordinaten. Wir multiplizieren die Offsets mit diesen Werten, hängen a an px
Einheit auf das Ergebnis, dann wenden Sie es auf die an background-position
Werte.
let container = document.querySelector(".container");
container.addEventListener("mousemove", function(e) { container.style.backgroundPositionX = -e.offsetX * 1.32 + "px"; container.style.backgroundPositionY = -e.offsetY * 0.455 + "px"; }
);
Schließlich können wir auch die Hintergrundpositionen wieder auf das Original zurücksetzen, wenn der Benutzer den Bildcontainer verlässt.
container.addEventListener("mouseleave", function() { container.style.backgroundPosition = "0px 0px"; }
);
Da wir gerade bei CSS-Tricks sind, biete ich an, dass wir eine viel billigere Version davon mit einem kleinen Hover-Übergang in Vanille-CSS hätten machen können:
Malen Sie ein größeres Bild
Zweifellos waren Sie in einem Online-Bekleidungsgeschäft oder was auch immer und sind auf die alte Zoom-on-Hover-Funktion gestoßen.
Dieses Muster gibt es schon seit einer gefühlten Ewigkeit (Dylan Winn-Brown teilte seinen Ansatz zurück in 2016), aber das ist (hoffe ich) nur ein Beweis für seine Nützlichkeit. Der Benutzer erhält mehr Kontext, wenn er hineinzoomt und eine bessere Vorstellung von den Nähten eines Pullovers oder was auch immer bekommt.
Es gibt zwei Teile dazu: die Container und für Lupe. Der Container ist das einzige, was wir im Markup benötigen, da wir das Lupenelement während der Interaktion des Benutzers einfügen. Also, siehe unser HTML!
<div class="container"></div>
Im CSS erstellen wir width
und height
Variablen, um die Abmessungen des Lupenglases selbst zu speichern. Dann geben wir das .container
eine Form und a background-image
:
:root {
--magnifer-width: 85;
--magnifer-height: 85;
} .container { width: 500px; height: 400px; background-size: cover; background-image: url("/path/to/image.png"); background-repeat: no-repeat; position: relative;
}
Es gibt einige Dinge, die wir bereits über die Lupe wissen, bevor wir sie überhaupt sehen, und wir können diese Stile im Voraus definieren, insbesondere die zuvor definierten Variablen für die .maginifier
's width
und height
:
.magnifier { position: absolute; width: calc(var(--magnifer-width) * 1px);
height: calc(var(--magnifer-height) * 1px);
border: 3px solid #000;
cursor: none;
background-image: url("/path/to/image.png");
background-repeat: no-repeat;
}
Es ist ein absolut positioniertes kleines Quadrat, das die verwendet gleich Hintergrundbilddatei als .container
. Beachten Sie, dass die calc-Funktion hier ausschließlich verwendet wird, um den einheitenlosen Wert in der Variablen in Pixel umzuwandeln. Fühlen Sie sich frei, dies so zu arrangieren, wie Sie es für richtig halten, um Wiederholungen in Ihrem Code zu eliminieren.
Wenden wir uns nun dem JavaScript zu, das dies alles zusammenfasst. Zuerst müssen wir auf die zuvor definierte CSS-Variable zugreifen. Wir werden dies später an mehreren Stellen verwenden. Dann müssen wir die Mausposition innerhalb des Containers abrufen, da dies der Wert ist, den wir für die Hintergrundposition der Lupe verwenden.
// Get the css variables
let root = window.getComputedStyle(document.documentElement);
let magnifier_width = root.getPropertyValue("--magnifer-width");
let magnifier_height = root.getPropertyValue("--magnifer-height"); let container = document.querySelector(".container");
let rect = container.getBoundingClientRect();
let x = (e.pageX - rect.left);
let y = (e.pageY - rect.top); // Take page scrolling into account
x = x - window.pageXOffset;
y = y - window.pageYOffset;
Was wir brauchen, ist im Grunde a mousemove
Ereignis-Listener auf der .container
. Dann verwenden wir die event.pageX
or event.pageY
-Eigenschaft, um die X- oder Y-Koordinate der Maus abzurufen. Aber um die zu bekommen genau relative Position der Maus auf einem Element, müssen wir die Position des übergeordneten Elements von der Mausposition subtrahieren, die wir aus dem obigen JavaScript erhalten. Ein „einfacher“ Weg, dies zu tun, ist die Verwendung getBoundingClientRect()
, die die Größe eines Elements und seine Position relativ zum Ansichtsfenster zurückgibt.
Beachten Sie, wie ich das Scrollen berücksichtige. Wenn es einen Überlauf gibt, Subtrahieren des Fensters pageX
und pageY
Offsets stellen sicher, dass der Effekt wie erwartet abläuft.
Wir werden zuerst das Lupen-Div erstellen. Als nächstes erstellen wir eine mousemove
-Funktion und fügen Sie sie dem Bildcontainer hinzu. In dieser Funktion geben wir der Lupe ein Klassenattribut. Wir berechnen auch die Mausposition und geben der Lupe die linken und oberen Werte, die wir zuvor berechnet haben.
Machen wir weiter und bauen die magnifier
wenn wir a hören mousemove
Ereignis auf dem .container
:
// create the magnifier
let magnifier = document.createElement("div");
container.append(magnifier);
Jetzt müssen wir sicherstellen, dass es einen Klassennamen hat, den wir auf das CSS anwenden können:
// run the function on `mousemove`
container.addEventListener("mousemove", (e) => { magnifier.setAttribute("class", "magnifier");
}
Das Beispielvideo, das ich früher gezeigt habe, positioniert die Lupe außerhalb des Behälters. Wir werden dies einfach halten und es stattdessen über den Container legen, während sich die Maus bewegt. Wir werden verwenden if
Anweisungen, um die Position der Lupe nur festzulegen, wenn die X- und Y-Werte sind mehr or gleich auf null und weniger als die Breite oder Höhe des Containers. Das sollte sich in Grenzen halten. Achten Sie nur darauf, die Breite und Höhe der Lupe von den X- und Y-Werten zu subtrahieren.
// Run the function on mouse move.
container.addEventListener("mousemove", (e) => { magnifier.setAttribute("class", "magnifier"); // Get mouse position let rect = container.getBoundingClientRect(); let x = (e.pageX - rect.left); let y = (e.pageY - rect.top); // Take page scrolling into account x = x - window.pageXOffset; y = y - window.pageYOffset; // Prevent magnifier from exiting the container // Then set top and left values of magnifier if (x >= 0 && x <= container.clientWidth - magnifier_width) { magnifier.style.left = x + "px"; } if (y >= 0 && y <= container.clientHeight - magnifier_height) { magnifier.style.top = y + "px"; }
});
Last but not least… müssen wir ein wenig mit dem Hintergrundbild der Lupe spielen. Der springende Punkt ist, dass der Benutzer eine GRÖSSERE Ansicht des Hintergrundbilds erhält, je nachdem, wo der Hover stattfindet. Definieren wir also eine Lupe, mit der wir die Dinge vergrößern können. Dann definieren wir Variablen für die Breite und Höhe des Hintergrundbilds, damit wir etwas haben, worauf wir diese Skalierung stützen können, und legen alle diese Werte auf fest .magnifier
Stile:
// Magnifier image configurations
let magnify = 2;
let imgWidth = 500;
let imgHeight = 400; magnifier.style.backgroundSize = imgWidth * magnify + "px " + imgHeight * magnify + "px";
Nehmen wir die X- und Y-Koordinaten des Bildes der Lupe und wenden sie auf die an .magnifier
Elemente background-position
. Wie zuvor bei der Lupenposition müssen wir die Breite und Höhe der Lupe mithilfe der CSS-Variablen von den X- und Y-Werten subtrahieren.
// the x and y positions of the magnifier image
let magnify_x = x * magnify + 15;
let magnify_y = y * magnify + 15; // set backgroundPosition for magnifier if it is within image
if ( x <= container.clientWidth - magnifier_width && y <= container.clientHeight - magnifier_height
) { magnifier.style.backgroundPosition = -magnify_x + "px " + -magnify_y + "px";
}
Dann!
Machen Sie es filmisch
Kennen Sie schon die Ken Burns-Effekt? Es ist eine klassische und zeitlose Sache, bei der ein Bild größer ist als der Container, in dem es sich befindet, und dann irgendwie langsam wie eine Schnecke gleitet und skaliert. Nahezu jeder Dokumentarfilm der Welt scheint es für Standbilder zu verwenden. Wenn Sie ein Apple TV haben, dann haben Sie es sicherlich auf dem Bildschirmschoner gesehen.
Es gibt reichlich of Beispiele drüben bei CodePen wenn du dir ein besseres Bild machen willst.
Sie werden sehen, dass es eine Reihe von Möglichkeiten gibt, dies zu erreichen. Einige verwenden JavaScript. Andere sind 100 % CSS. Ich bin sicher, dass die JavaScript-Ansätze für einige Anwendungsfälle gut sind, aber wenn das Ziel einfach darin besteht, das Bild subtil zu skalieren, ist CSS perfekt geeignet.
Wir könnten die Dinge ein wenig aufpeppen, indem wir mehrere Hintergründe anstelle von einem verwenden. Oder, noch besser, wenn wir die Regeln erweitern, um Elemente anstelle von Hintergrundbildern zu verwenden, können wir dieselbe Animation auf alle Hintergründe anwenden und einen Strich von verwenden animation-delay
die Wirkung zu staffeln.
Natürlich gibt es viele Möglichkeiten, dies zu tun! Es kann sicherlich mit Sass- und/oder CSS-Variablen optimiert werden. Verdammt, vielleicht kannst du es mit einer Single schaffen <div>
Wenn ja, teile es in den Kommentaren!
Bonus: Machen Sie es immersiv
Ich weiß nicht, ob irgendetwas cooler ist als das von Sarah Drasner Kugelschreiber „Frohes Halloween“.… und das ist von 2016! Es ist ein großartiges Beispiel, bei dem Hintergründe geschichtet und mit unterschiedlichen Geschwindigkeiten bewegt werden, um ein fast filmisches Erlebnis zu schaffen. Meine Güte ist das cool!
GSAP ist dort der Haupttreiber, aber ich stelle mir vor, wir könnten eine abgespeckte Version machen, die einfach jede Hintergrundebene mit unterschiedlichen Geschwindigkeiten von links nach rechts übersetzt. Natürlich nicht so cool, aber sicherlich die Basiserfahrung. Stellen Sie sicher, dass Anfang und Ende jedes Hintergrundbilds konsistent sind, damit es sich nahtlos wiederholt, wenn sich die Animation wiederholt.
Das war es fürs Erste! Ziemlich nett, dass wir Hintergründe für viel mehr als Textur und Kontrast verwenden können. Ich bin mir absolut sicher, dass es unzählige andere clevere Interaktionen gibt, die wir auf Hintergründe anwenden können. Temani Afif tat genau das mit ein Haufen netter Hover-Effekte für Links. Woran denkst du? Teile es mit mir in den Kommentaren!
- SEO-gestützte Content- und PR-Distribution. Holen Sie sich noch heute Verstärkung.
- Platoblockkette. Web3-Metaverse-Intelligenz. Wissen verstärkt. Hier zugreifen.
- Quelle: https://css-tricks.com/moving-backgrounds/
- 1
- 11
- 7
- 9
- 98
- a
- Über Uns
- oben
- Absolute
- absolut
- Zugang
- Zugänglichkeit
- Konto
- berührt das Schneidwerkzeug
- Ad
- Siehe Werbung
- voraus
- Alle
- bereits
- und
- Animation
- angekündigt
- Ein anderer
- Apple
- Bewerben
- Ansatz
- Ansätze
- angemessen
- um
- Vermögenswert
- Zurück
- Hintergrund
- background-image
- Hintergründe
- Badewanne
- Base
- basierend
- Baseline
- Grundsätzlich gilt
- weil
- Bevor
- Besser
- zwischen
- Big
- größer
- Bit
- Grenze
- bauen
- Haufen
- Berechnen
- berechnet
- Fälle
- sicherlich
- Übernehmen
- billiger
- Klasse
- klassisch
- Bekleidung
- Code
- kompromittierend
- Geht davon
- konsistent
- konstante
- Container
- Inhalt
- Kontext
- Kontrast
- verkaufen
- cool
- Koordinate
- könnte
- Kurs
- Abdeckung
- erstellen
- CSS
- Dash
- definiert
- Demos
- DID
- Unterschied
- anders
- Größe
- Direkt
- Anzeige
- Dokument
- Dokumentarfilm
- Tut nicht
- Nicht
- zweifeln
- Fahrer
- Drop
- im
- jeder
- Früher
- Edge
- bewirken
- Effekten
- Elemente
- eliminieren
- gewährleisten
- Sommer
- Sogar
- Event
- ÜBERHAUPT
- Jedes
- genau
- Beispiel
- Beispiele
- Faszinierende
- Erweitern Sie die Funktionalität der
- erwarten
- erwartet
- ERFAHRUNGEN
- extra
- Auffällig
- Merkmal
- wenige
- Reichen Sie das
- Filme
- Finden Sie
- Ende
- Vorname
- passen
- schweben
- für immer
- gefunden
- Frei
- für
- Funktion
- bekommen
- ABSICHT
- Glas
- Go
- Kundenziele
- Goes
- gut
- groß
- Höhe
- hier
- ein Geschenk
- schweben
- Ultraschall
- aber
- HTML
- HTTPS
- KRANK
- Idee
- Image
- Bilder
- Auswirkungen
- wichtig
- in
- In anderen
- beantragen müssen
- Interaktion
- Interaktionen
- Problem
- IT
- selbst
- JavaScript
- Behalten
- King
- Wissen
- größer
- Schicht
- Lagen
- Einschränkung
- Limitiert
- Line
- wenig
- aussehen
- Main
- um
- Mittlerweile
- Trifft
- könnte
- Geist / Bewusstsein
- mehr
- vor allem warme
- Bewegung
- schlauer bewegen
- Bewegungen
- bewegt sich
- ziehen um
- mehrere
- mehrere Hintergründe
- Name
- Need
- weiter
- Anzahl
- bieten
- Offset
- EINEM
- Online
- optimiert
- Original
- Andere
- Anders
- aussen
- Schnittmuster
- Stücke
- Tonhöhe (Pitch)
- Pixel
- Ort
- Länder/Regionen
- Plato
- Datenintelligenz von Plato
- PlatoData
- Play
- Points
- Position
- positioniert
- für einige Positionen
- positiv
- Praktisch
- ziemlich
- verhindern
- vorher
- wahrscheinlich
- Produkt
- ordnungsgemäße
- immobilien
- Resorts
- bietet
- Pullover
- erreichen
- Leser
- echt
- Immobilien
- wiederholen
- Folge
- Rückgabe
- Revealed
- Wurzel
- Ohne eine erfahrene Medienplanung zur Festlegung von Regeln und Strategien beschleunigt der programmatische Medieneinkauf einfach die Rate der verschwenderischen Ausgaben.
- Führen Sie
- Vertrieb
- gleich
- Sass
- Skalieren
- Waage
- Umfang
- Bildschirm
- Bildschirmlesegeräte
- Scrollen
- nahtlos
- scheint
- Semantik
- kompensieren
- mehrere
- Form
- Teilen
- von Locals geführtes
- sollte
- Einfacher
- einfach
- Single
- Größe
- Slides
- langsam
- kleinere
- So
- solide
- einige
- etwas
- irgendwo
- Raumfahrt
- speziell
- Geschwindigkeiten
- Gewürz
- quadratisch
- Anfang
- begonnen
- Aussagen
- speichern
- Stil
- geeignet
- Super
- TAG
- Nehmen
- Einnahme
- sprechen
- Testament
- Das
- die Welt
- Ding
- zeitlos
- mal
- zu
- gemeinsam
- Ton
- Top
- Übergang
- was immer dies auch sein sollte.
- WENDE
- tv
- typisch
- Einheit
- -
- Mitglied
- Wert
- Werte
- Version
- Video
- Anzeigen
- Ansehen
- Wege
- Was
- welche
- während
- ganze
- Wikipedia
- werden wir
- .
- ohne
- Worte
- Arbeiten
- weltweit wie ausgehandelt und gekauft ausgeführt wird.
- würde
- X
- Jahr
- Du
- Ihr
- Zephyrnet
- Null
- Zoom