Wie berechnet man, wie viel ein Hintergrundbild basierend auf Breite/Höhe des Darstellungsbereichs verschoben wird

Question

Ich habe ein Hintergrundbild, das 6830px x 768px ist. Ich habe auch Inhalte, die auf der Seite zentriert sind. Der Hintergrund ist

background-size: cover; 
background-position: 0 50%; 

zu verwenden, wie der Benutzer durch die Schritte voranschreitet, muss der Hintergrund animieren (Blättern zu einer anderen Szene links in dem sehr breiten Hintergrund). Jede Szene wurde mit 1366px x 768px entworfen. Daher muss jeder Schritt den Hintergrund um 1366 Pixel verschieben, wenn die Fensterhöhe 768 Pixel beträgt. Es ist einfach genug, um den Hintergrund an Ort und Stelle zu animieren, wenn die Ansichtsfensterauflösung genau gleich ist, wenn es jedoch groß/kleiner ist, muss ich berechnen, wie viel der Hintergrund verschoben werden soll. Das ist, was ich gekämpft habe. Was ist die Mathematik, die erforderlich ist, um den Bildlaufbetrag basierend auf der Größe des Darstellungsbereichs im Vergleich zur Hintergrundgröße zu berechnen?

Answer 1

background-size: cover; bricht Dinge, wenn, aus irgendeinem seltsamen oder legitimen Grund, die Höhe des Ansichtsfensters größer als 6830px ist, wäre ein kleiner Fix, Hintergrundgröße auf auto 100% zu ändern;

würde eine Lösung für Ihr Problem sein, Prozentsatz zu verwenden, wie Lukas erwähnt, aber man vorsichtig sein, als Prozentsatz anders funktionieren, wenn background-position ein hier vor mir mit elaborate article about it

Es gibt immer noch die Frage über das unterschiedliche Bildseitenverhältnis des Ansichtsfensters In der perfekten Welt wird es immer 1366:768 sein. Sie müssen Kompromisse eingehen, indem Sie entweder Leerzeichen oder Leerzeichen außerhalb des Ansichtsfensters oben oder unten oder beides verwenden. Abhängig vom angegebenen Verhältnis des Darstellungsbereichs.

Der Kompromiss muss auf der Höhe gemacht werden, da jede Szene (ich nehme an) eine feste Länge von 1366 Pixeln hat.

schließlich die Lösung:
Wir werden für den bg-Po von Szene 0 und der Wert beginnen 0% 50%
Konsequente Werte von bg-x-pos sein wird, der Formel 100%/(n-x)
wobei n die Gesamtzahl der folgen Szenen und x ist die Szenennummer.

Beispiel von 4 Szenen

Szene 0: background-position: 0% 50%;
Szene 1: background-position: 33.333% 50%;
Szene 2: background-position: 66.666% 50%;
Szene 3: background-position: 100% 50%;

Answer 2

Dank @Luke & @jkris für Ihre Anregungen. Das Problem war jedoch komplexer, aber ich habe eine Lösung gefunden. Für alle, die über das gleiche Problem kommt, kann diese Funktion helfen Ihnen:

calcBgPosition (slideNum) { 
    let slideW = 1366; 
    let slideH = 768; 
    let winH = window.innerHeight; 
    let winW = window.innerWidth; 

    // Because the height determines the background scale we must multiply the width by the height scale to ensure calculations are correct 
    let adjustedSlideW = slideW * (winH/slideH); 

    // In order to center the background we must first calculate the offset 
    // then subtract the current slide position 
    return ((winW - adjustedSlideW)/2) - (adjustedSlideW * slideNum); 
} 

Dieser Anwendungsfall ist mit einem Hintergrund, wo wir mehrere Szenen (Dias) haben. Für beste Ergebnisse sollten die erste und die letzte Folie (erster und letzter Teil des Hintergrunds) geblutete Folien sein, was bedeutet, dass sie Teile des Hintergrunds zeigen, aber nicht mit Ihren Inhalten verwendet werden.