Coding and Programming

Mobile Hintergründe | CSS-Tipps – CSS-Tipps

Written by smirow

Wir betrachten Hintergrundbilder oft als eine Textur oder als etwas, das einen Kontrast zu lesbaren Inhalten bietet – mit anderen Worten, nicht wirklich Inhalt. Wenn es Inhalt wäre, würden Sie wahrscheinlich nach einem suchen <img> sowieso, Zugänglichkeit und so weiter.

Aber es gibt Zeiten, in denen Position Oder Leiter Die Gestaltung eines Hintergrundbilds kann irgendwo zwischen den Polen Inhalt und Dekoration liegen. Der Kontext ist König, oder? Wenn wir die Position des Hintergrundbilds ändern, kann es etwas mehr Kontext oder Erlebnis vermitteln.

Wie so? Schauen wir uns einige Beispiele an, die ich im Umlauf gesehen habe.

Zunächst möchte ich Sie warnen, dass in diesen Demos eine schmale Grenze zwischen Bildern, die zur Dekoration verwendet werden, und Bildern, die als Inhalt verwendet werden, besteht. Der Unterschied hat Auswirkungen auf die Barrierefreiheit, wenn Hintergründe nicht für Screenreader angekündigt werden. Wenn Ihr Bild wirklich ein Bild ist, dann denken Sie vielleicht über ein <img> mit dem Gutschein beschriften alt Text. Und wenn wir schon beim Thema Barrierefreiheit sind: Es ist auch eine gute Idee, die Bewegungspräferenzen des Benutzers zu berücksichtigen.

Zeig mir mehr!

Chris Coyier hat dieses nette kleine Demo von vor einigen Jahren.

Die Demo ist in vielerlei Hinsicht sehr praktisch, da sie einen interessanten Ansatz zur Anzeige von Werbung in Inhalten darstellt. Sie haben das Verkaufsargument und ein verlockendes Image, das es ergänzt.

Ich würde wetten, dass die große Einschränkung der meisten Werbung in der begrenzten Menge an Immobilien liegt. Ich weiß nicht, ob Sie schon einmal eine Anzeige auf einer Seite platzieren mussten, aber ich habe es getan und bitte den Werbetreibenden normalerweise um ein Bild, das den genauen Pixelabmessungen entspricht, damit das Element in den Platz passt.

Aber Chris' Demo entschärft das Platzproblem. Bewegen Sie den Mauszeiger über das Bild und beobachten Sie, wie es sich bewegt und weiterentwickelt. Der Benutzer bekommt tatsächlich mehr Kontext für das Produkt, als wenn sich das Bild an seiner ursprünglichen Position befände. Es 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 sichtbaren Teilen des Bildes.

Wenn Sie sich das Demo-Markup ansehen, werden Sie feststellen, dass es ziemlich genau Ihren Erwartungen entspricht. 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>

Wir könnten wahrscheinlich ein wenig über die Semantik streiten, aber darum geht es nicht. Wir haben einen Container mit einem Link <div> für das Hintergrundbild und ein anderes <div> um den Inhalt einzudämmen.

Wenn es um Stil geht, 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 bestimmte Abmessungen und legen darin ein Hintergrundbild fest, das sich nicht wiederholt und an seinem unteren linken Rand positioniert ist.

Der eigentliche Trick liegt in JavaScript. Wir werden dies verwenden, um die Mausposition und den Container-Offset zu ermitteln, und diesen Wert dann in einen geeigneten Maßstab umwandeln, um ihn 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 den Container nutzen offsetX Und offsetY Eigenschaften. Wir werden diese Werte jedoch nicht direkt verwenden, da der Wert der X-Koordinate kleiner als nötig und der Wert der 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 taktil, aber das habe ich gefunden 1.32 Und 0.455 funktionieren perfekt für X- bzw. Y-Koordinaten. Wir multiplizieren die Offsets mit diesen Werten und addieren a px Einheit auf das Ergebnis und wenden Sie es dann auf das 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 die Hintergrundpositionen auch 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, schlage ich vor, dass wir mit einem kleinen Hover-Übergang in Vanilla CSS eine viel günstigere Version davon hätten erstellen können:

Malen Sie ein größeres Bild

Sicherlich sind Sie schon einmal in einem Online-Bekleidungsgeschäft oder in einem anderen Geschäft auf die alte Zoom-on-Hover-Funktion gestoßen.

Dieses Modell gibt es scheinbar schon seit Ewigkeiten (Dylan Winn-Brown teilte seinen Ansatz im Jahr 2016 mit), aber dies ist (hoffe ich) nur ein Beweis für seine Nützlichkeit. Der Benutzer erhält beim Heranzoomen mehr Kontext und erhält eine bessere Vorstellung von den Nähten eines Pullovers oder anderen.

Dazu gibt es zwei Elemente: Container und das Lupe. Der Container ist das Einzige, was wir im Markup benötigen, da wir das Lupenelement während der Benutzerinteraktion einfügen. Also, hier ist unser HTML!

<div class="container"></div>

Im CSS werden wir erstellen width Und height Variablen zum Speichern der Abmessungen der Lupe selbst. Also geben wir das .containereine 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;
}

Einige Dinge wissen wir bereits über die Lupe, bevor wir sie überhaupt sehen, und wir können diese Stile im Voraus festlegen, insbesondere die zuvor für die Lupe festgelegten Variablen .maginifierEs ist 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 kleines, absolut positioniertes Quadrat, das das nutzt sogar Hintergrundbilddatei wie .container. Beachten Sie, dass die Berechnungsfunktion hier nur verwendet wird, um den einheitenlosen Wert der Variablen in Pixel umzuwandeln. Sie können dies gerne so organisieren, wie Sie es für richtig halten, um Wiederholungen in Ihrem Code zu vermeiden.

Kommen wir nun zum JavaScript, das alles zusammenführt. Zuerst müssen wir auf die zuvor definierte CSS-Variable zugreifen. Wir werden es später an mehreren Stellen verwenden. Als nächstes müssen wir die Mausposition im Container ermitteln, 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 im Wesentlichen brauchen, ist ein mousemove Ereignis-Listener auf der .container. Dann werden wir das verwenden event.pageX Oder event.pageY Eigenschaft, um die X- oder Y-Koordinate der Maus zu erhalten. Aber um das zu bekommen genau Um die relative Mausposition auf einem Element zu ermitteln, müssen wir die Position des übergeordneten Elements von der Mausposition subtrahieren, die wir aus dem obigen JavaScript erhalten. Eine „einfache“ Möglichkeit hierfür ist die Verwendung von getBoundingClientRect()Gibt die Größe eines Elements und seine Position relativ zum Fenster zurück.

Beachten Sie, wie ich das Scrollen berücksichtige. Wenn ein Überlauf vorliegt, subtrahieren Sie das Fenster pageX Und pageY Offsets stellen sicher, dass der Effekt wie beabsichtigt auftritt.

Wir werden zunächst 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 zuvor berechneten linken und oberen Werte.

Lasst uns weitermachen und es aufbauen magnifier wenn wir ein hören mousemove Veranstaltung am .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 CSS erweitern können:

// run the function on `mousemove`
container.addEventListener("mousemove", (e) => {
  magnifier.setAttribute("class", "magnifier");
}

Das Beispielvideo, das ich zuvor gezeigt habe, positioniert die Lupe außerhalb des Behälters. Wir halten dies einfach und legen es über den Container, während die Maus bewegt wird. Wir werden verwenden if Anweisungen zum Festlegen der Position der Lupe nur, wenn die X- und Y-Werte übereinstimmen größer Oder gleich auf Null, und weniger B. die Breite oder Höhe des Containers. Damit sollte er sich in Grenzen halten. Achten Sie einfach darauf, die Breite und Höhe der Lupe von den X- und Y-Werten abzuziehen.

// 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";
  }
});

Zu guter Letzt müssen wir noch ein wenig mit dem Lupen-Hintergrundbild herumspielen. Der 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 Dinge vergrößern können. Als nächstes legen wir Variablen für die Breite und Höhe des Hintergrundbilds fest, damit wir etwas haben, auf dem diese Skalierung basieren kann, und setzen alle diese Werte auf .magnifier Modi:

// 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 Lupenbildes und wenden sie auf das an .magnifierdie Elemente background-position​. Wie zuvor bei der Position der Lupe müssen wir mithilfe von CSS-Variablen die Breite und Höhe der Lupe 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";
}

Tada!

Machen Sie es filmisch

Haben Sie den Ken Burns-Effekt gesehen? Es ist eine klassische, zeitlose Sache, bei der ein Bild größer ist als der Behälter, in dem es sich befindet, dann langsam gleitet und sich wie eine Schnecke entwickelt. Fast jeder Dokumentarfilm auf der Welt scheint es für Standbilder zu verwenden. Wenn Sie ein Apple TV besitzen, haben Sie es wahrscheinlich schon auf dem Bildschirmschoner gesehen.

Es gibt eine Menge Beispiele auf CodePen, wenn Sie eine bessere Vorstellung bekommen möchten.

Sie werden sehen, dass es mehrere Möglichkeiten gibt, dies zu erreichen. Einige verwenden JavaScript. Andere bestehen zu 100 % aus CSS. Ich bin mir sicher, dass JavaScript-Ansätze für einige Anwendungsfälle geeignet sind, aber wenn das Ziel lediglich darin besteht, die Größe des Bildes geringfügig zu ändern, ist CSS perfekt geeignet.

Wir könnten die Sache ein wenig aufpeppen, indem wir mehrere Hintergründe anstelle nur eines 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 Hauch von verwenden animation-delay um den Effekt zu skalieren.

Es gibt natürlich viele Möglichkeiten, dies zu tun! Es kann durchaus mit Sass- und/oder CSS-Variablen optimiert werden. Verdammt, vielleicht schaffst du es mit nur einem <div> Wenn ja, teilen Sie es in den Kommentaren!

Bonus: Machen Sie es immersiv

Ich weiß nicht, ob es etwas Cooleres gibt als Sarah Drasners „Happy Halloween“-Stift … und er ist aus dem Jahr 2016! Dies ist ein großartiges Beispiel für die Überlagerung von Hintergründen und deren Bewegung in unterschiedlichen Geschwindigkeiten, um ein fast filmisches Erlebnis zu schaffen. Verdammt, das ist cool!

GSAP ist der Haupttreiber, aber ich kann mir vorstellen, dass wir eine verkleinerte Version erstellen könnten, die einfach jede Hintergrundebene mit unterschiedlichen Geschwindigkeiten von links nach rechts übersetzt. Natürlich nicht so cool, aber auf jeden Fall das grundlegende Erlebnis. Ich muss sicherstellen, dass Anfang und Ende jedes Hintergrundrahmens konsistent sind, damit er sich nahtlos wiederholt, wenn die Animation wiederholt wird.


Das ist alles für den Moment! Es ist ziemlich cool, dass man Hintergründe nicht nur für Textur und Kontrast verwenden kann. Ich bin mir absolut sicher, dass es noch jede Menge andere clevere Interaktionen gibt, die wir auf Hintergründe anwenden können. Temani Afif hat genau das mit einer Reihe netter Hover-Effekte für Links erreicht. Über was denkst du nach? Teile es mit mir in den Kommentaren!

About the author

smirow

Leave a Comment