Was ist ein eingebetteter Webhintergrund? Was sind Webanwendungen und dynamische Webseiten? Typische Anwendung von Webanwendungen
| 16.04.2015
Im vergangenen Jahr haben Webdesigner zunehmend damit begonnen, eine Website auf originelle Weise aufzupeppen - indem sie ein Video als Seitenhintergrund installieren. Eine interessante Handlung oder einfach nur ein „lebendiges“ Bild im Hintergrund schmückt sogar eine gewöhnliche Visitenkartenseite, interessiert den Benutzer und ermutigt ihn, länger auf der Seite zu bleiben. Heute teilen wir Ihnen eine der Möglichkeiten mit, wie Sie mit HTML5 und CSS einen Vollbild-Videohintergrund für eine Website festlegen können.
Wenn Sie fest davon überzeugt sind, dass Sie ein Video für den Hintergrund auf der Website einstellen möchten, müssen Sie einige Nuancen kennen:
- Zunächst müssen Sie bedenken, dass das Video ein ziemlich großes Gewicht hat. Dies kann sich negativ auf die Ladegeschwindigkeit der Seite auswirken, insbesondere wenn der Benutzer eine langsame Internetverbindung hat. Wählen Sie daher Videos, die zeitlich nicht zu lang sind. Für den Fall, dass Sie ein ziemlich langes Video verwenden müssen, seien Sie darauf vorbereitet, entweder daran zu arbeiten, sein Gewicht zu reduzieren, oder dass Sie einen Teil des Publikums opfern müssen.
- Zweitens, vermeiden Sie die automatische Wiedergabe von Audio von Videos. Verwenden Sie entweder Videos ohne Ton oder fügen Sie die Möglichkeit hinzu, dass der Benutzer den Ton bei Bedarf selbst einschalten kann. Das automatische Abspielen eines Tons beim Öffnen einer Website gilt als sehr schlechte Form.
- Drittens müssen Sie sich um die browserübergreifende Kompatibilität und die korrekte Anzeige und Wiedergabe von Videos auf allen Geräten kümmern sowie eine Alternative zum Video bereitstellen (in Fällen, in denen es nicht abgespielt wird). Wie das geht, zeigen wir in unserem Beispiel weiter unten.
- Und viertens sollte man sich genau überlegen, ob ein Bildtelefon an dem Ort, an dem man es aufstellen möchte, angemessen ist, da man bei diesem Unterfangen sehr leicht die Grenze zwischen Originalität und Sinnlosigkeit überschreitet. In keinem Fall sollte das Video den Benutzer von seinem Hauptziel ablenken, aufgrund dessen er auf die Website gelangt ist. Vergessen Sie beim Einstellen eines Videohintergrunds unter Textinhalten nicht, die Lesbarkeit des Textes zu überprüfen. Beispielsweise kann es an einer bestimmten Stelle der Videowiedergabe in den Hintergrund treten (weißer Text auf weißem Hintergrund, schwarzer Text auf schwarzem Hintergrund usw.).
1.HTML
Für unser Beispiel haben wir ein Video mit einer Auflösung von 1920 × 1080, einer Dauer von 15 Sekunden und einem Gewicht von knapp über 3 MB aufgenommen. Innerhalb des Blocks
Für Tag
- width - die Breite des Bereichs zum Abspielen des Videos;
- Höhe - die Höhe des Bereichs;
- Autoplay - automatische Videowiedergabe;
- Schleife - zyklische Wiederholung des Videos;
- Poster ist ein Bild, das anstelle des Videos angezeigt wird, während es geladen wird oder nicht verfügbar ist.
Als nächstes haben wir zwei Tags
2. CSS
Unser Hintergrund-Stylesheet sieht so aus:
#video-bg ( Position: fest; oben: 0; rechts: 0; unten: 0; links: 0; Überlauf: versteckt; z-index: 1; Hintergrund: url(bg/daisy-stock-poster.jpg) nr -repeat #94a233; background-size: cover; ) #video-bg > video ( position: absolute; top: 0; left: 0; min-width: 100%; min-height: 100%; width: auto; height : auto; ) @supports (object-fit: cover) ( #video-bg > video ( top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; ) )
Wie Sie dem Code entnehmen können, wird der Hintergrund auf die gesamte Seite gesetzt und das Bild (ein Frame aus demselben Video) wird als Backup-Hintergrund festgelegt. Im extremsten Fall ist die Hintergrundfarbe #94a233 .
Es gibt auch eine @supports-Direktive im Code, die prüft, ob der Browser die Object-Fit-Eigenschaft unterstützt. Wenn ja, dann wird der Hintergrund auf deckend eingestellt und bei unterschiedlichen Bildschirmgrößen proportional dargestellt.
Laut caniuse.com wird die Object-Fit-Eigenschaft derzeit von allen Browsern außer Internet Explorer, Firefox 31-35, Safari 7, iOS Safari 7.1 und Android Browser 4.1-4.4 unterstützt.
Vom Autor: In diesem Lernprogramm führen wir eine einfache Technik zum Erstellen eines Hintergrundbilds durch, das sich vollständig auf die volle Breite des Darstellungsbereichs des Browsers ausdehnt. Dazu benötigen wir die CSS-Eigenschaft background-size; JavaScript wird nicht benötigt.
Beispiele für reaktionsschnelle vollständige Hintergrundbilder
Heutzutage ist es sehr beliebt geworden, ein riesiges Foto als Hintergrund zu verwenden, das die gesamte Webseite einnimmt. Hier sind einige Beispiele für Websites, auf denen responsive vollständige Hintergrundbilder eingestellt sind:
Wenn Sie bei Ihrem nächsten Webprojekt ein ähnliches Ergebnis erzielen möchten, dann ist dieser Artikel genau das Richtige für Sie.
Grundprinzipien
Hier ist unser Aktionsplan.
Verwenden Sie die Eigenschaft background-size, um das Ansichtsfenster vollständig auszufüllen
Die CSS-Eigenschaft background-size ist auf cover gesetzt. Der Cover-Wert weist den Browser an, die Breite und Höhe des Hintergrundbilds automatisch und proportional zu skalieren, sodass sie immer gleich oder größer als die Breite/Höhe des Darstellungsbereichs sind.
Verwenden Sie eine Medienabfrage, um kleine mobile Hintergrundbilder zu verarbeiten
Um die Seitenladegeschwindigkeit auf kleinen Bildschirmen zu verbessern, verwenden wir eine Medienabfrage, um eine kleinere Version unseres Hintergrundbilds zu rendern. Es ist nicht obligatorisch. Diese Technik funktioniert auch ohne. Aber warum ist es eine gute Idee, ein kleines mobiles Hintergrundbild zu verwenden?
Das Bild, das ich in der Demo verwendet habe, ist 5500 x 3600 Pixel groß. Diese Auflösung ist für die meisten derzeit auf dem Markt befindlichen Breitbild-Computermonitore ausreichend. Dafür müssen Sie jedoch eine 1,7 MB große Datei verarbeiten.
Eine so enorme zusätzliche Belastung, nur um ein Hintergrundfoto zu platzieren, bringt auf jeden Fall nichts Gutes. Und das ist natürlich extrem schlecht für Verbindungen über das mobile Internet. Außerdem ist diese Auflösung für Geräte mit kleinem Bildschirm übertrieben (dazu später mehr). Werfen wir einen Blick auf den gesamten Prozess.
HTML
Alles, was Sie für das Markup benötigen, ist Folgendes:
Wir werden dem Body-Element ein Hintergrundbild zuweisen, sodass das Bild immer den gesamten Darstellungsbereich des Browsers einnimmt.
Diese Technik funktioniert jedoch auch für jedes Element auf Blockebene (z. B. ein div oder ein Formular). Wenn die Breite und Höhe Ihres Blockelements "fließend" sind, wird das Hintergrundbild immer so skaliert, dass es in den gesamten Container passt.
css
Legen Sie die folgenden Stile für das Körperelement fest:
body ( /* Pfad zum Bild */ background-image: url(images/background-photo.jpg); /* Das Hintergrundbild wird immer vertikal und horizontal zentriert */ background-position: center center; /* Das Hintergrundbild wird nicht wiederholt * / background-repeat: no-repeat; /* Das Hintergrundbild ist im Ansichtsfenster fixiert, sodass es sich nicht bewegt, wenn die Höhe des Inhalts größer als die Höhe des Bildes ist */ background-attachment: fixed; /* Dadurch kann sich das Hintergrundbild an die Größe des Containers anpassen */ background-size: cover; /* Legt die Hintergrundfarbe fest, die angezeigt wird, während das Hintergrundbild geladen wird */ background-color: #464646; )
Karosserie ( /* Pfad zum Bild */ Hintergrundbild : url (Bilder / Hintergrundfoto . jpg ) ; /* Das Hintergrundbild wird immer vertikal und horizontal zentriert */ /* Das Hintergrundbild wird nicht wiederholt */ Hintergrundwiederholung: keine Wiederholung; /* Das Hintergrundbild ist im Ansichtsfenster fixiert, sodass es sich nicht bewegt, wenn die Inhaltshöhe größer als die Bildhöhe ist */ /* Dadurch passt sich das Hintergrundbild an die Größe des Containers an */ Hintergrundgröße: Cover; /* Legt die Hintergrundfarbe fest, die angezeigt werden soll, während das Hintergrundbild geladen wird */ Hintergrundfarbe : #464646; |
Das wichtigste Eigenschaft/Wert-Paar, auf das Sie achten sollten, ist:
Hintergrundgröße: Cover;
Hintergrundgröße: Cover; |
Hier beginnt die Magie. Dieses Eigenschaft/Wert-Paar weist den Browser an, das Hintergrundbild proportional zu skalieren, d. h. so dass seine Breite und Höhe gleich oder größer als die Breite/Höhe des Elements (in unserem Fall das body-Element) sind.
Dieses Eigenschaft/Wert-Paar hat jedoch ein Problem: Wenn das Hintergrundbild kleiner als das body-Element ist – was auf hochauflösenden Bildschirmen und/oder wenn Sie eine große Menge an Inhalten auf der Seite haben – der Fall ist – wird der Browser unweigerlich hineinzoomen . Und wie wir wissen, nimmt die Qualität des Bildes ab, wenn wir die Abmessungen einer Bitmap erhöhen (mit anderen Worten, es kommt zu einer Verpixelung).
Das Erhöhen der Größe eines Bildes relativ zu seinen ursprünglichen Abmessungen wirkt sich auf die Qualität des Bildes aus. Beachten Sie dies bei der Auswahl des richtigen Bildes. Die Demo verwendet ein riesiges Foto mit 5500 x 3600 Pixeln für Breitbildmonitore, sodass für Qualitätsverzerrungen ein sehr großer Bildschirm erforderlich wäre. Lass uns weitermachen. Um sicherzustellen, dass das Hintergrundbild immer im Ansichtsfenster zentriert ist, schreiben wir:
Hintergrundposition: Mitte Mitte;
Hintergrundposition: Mitte Mitte; |
Dieser Eintrag platziert den Hintergrund auf der Koordinatenachse in der Mitte des Ansichtsfensters. Als Nächstes müssen wir definieren, was passiert, wenn die Höhe des Inhalts die sichtbare Höhe des Darstellungsbereichs überschreitet. In diesem Fall wird eine Bildlaufleiste angezeigt.
In diesem Fall müssen wir sicherstellen, dass das Hintergrundbild auch dann an seiner ursprünglichen Position bleibt, wenn der Benutzer auf der Seite nach unten scrollt. In dieser Situation endet das Bild beim Scrollen entweder einfach oder es bewegt sich mit fortschreitendem Scrollen (was für den Benutzer sehr ablenkend sein kann). Um den Hintergrund zu reparieren, setzen wir die Eigenschaft background-attachment auf fixed.
Hintergrund-Anhang: behoben;
Hintergrund-Anhang: behoben; |
In der Demo habe ich die Möglichkeit zum „Laden von Inhalten“ hinzugefügt, damit Sie sehen können, was passiert, wenn eine Bildlaufleiste im Browser angezeigt wird, wenn die Eigenschaft „background-attachment“ auf „fixed“ gesetzt ist. Sie können auch die Demo herunterladen und mit den Eigenschaften der Elementpositionierung (wie background-attachment und background-position) herumspielen, um zu sehen, wie sich dies auf das Scrollen von Seiten und das Hintergrundbild auswirkt. Die restlichen Eigenschaftswerte sind für sich genommen ziemlich selbsterklärend.
CSS-Kurzschrift
Ich habe die Hintergrundeigenschaften detailliert beschrieben, damit sie leichter erklärt werden können. Die Abkürzung wird auch äquivalent sein:
body ( hintergrund: url (background-photo.jpg) center center cover no-repeat fixed; )
Karosserie ( Hintergrund : URL ( Hintergrund - Foto . jpg ) Mitte Mitte Abdeckung nein - Wiederholung behoben ; |
Alles, was Sie tun müssen, ist, den URL-Wert so zu ändern, dass er auf den Pfad zu Ihrem Hintergrundbild verweist.
Optional: Medienabfrage für kleine Bildschirme
Für kleinere Bildschirme habe ich Photoshop verwendet, um das ursprüngliche Hintergrundbild proportional auf 768 x 505 Pixel zu verkleinern, und ich habe Smush.it verwendet, um es noch ein bisschen mehr zu verkleinern. Dadurch wurde die Dateigröße von 1741 KB auf 114 KB reduziert. Diese. Bildgröße um 93 % reduziert.
Bitte nicht falsch verstehen, 114KB sind für ein rein ästhetisches Designelement immer noch ziemlich viel. In Anbetracht der zusätzlichen Last von 114 KB würde ich eine solche Datei nur verwenden, wenn ich eine Möglichkeit sehe, die Benutzererfahrung (UX) der Website erheblich zu verbessern, da. Derzeit entfällt ein erheblicher Teil des Internetverkehrs auf mobile Geräte. background-image: url (images / background-photo-mobile-devices. jpg) ;
Die Medienabfrage hat eine Breitenbegrenzung von max-width: 767px, was bedeutet, dass, wenn der Darstellungsbereich des Browsers größer als 767px ist, ein großes Hintergrundbild geladen wird.
Der Nachteil bei der Verwendung dieser Medienabfrage ist, dass Sie, wenn Sie die Breite Ihres Browserfensters von beispielsweise 1200 px auf 640 px (oder umgekehrt) ändern, sofort sehen, wenn das kleine oder große Hintergrundbild geladen wird.
Da einige Geräte mit kleinem Bildschirm mehr Pixel anzeigen können – beispielsweise kann das iPhone 5 mit Retina-Display eine Auflösung von 1136 x 640 Pixel anzeigen – wird das kleine Hintergrundbild verpixelt.
Zusammenfassend
Eine aktuellere Version des Quellcodes finden Sie in diesem GitHub-Tutorial. Ich kann Sie nur vor einem warnen: Bitte verwenden Sie diese Technik mit Vorsicht, da große Dateien die UX ernsthaft beschädigen können, insbesondere wenn der Endbenutzer eine langsame und unzuverlässige Internetverbindung verwendet. Auch deshalb sollten Sie eine passende Hintergrundfarbe wählen, damit der Nutzer den Inhalt lesen kann, während das Hintergrundbild geladen wird.
Wie installiere ich eine Site auf dem Desktop-Monitor?
Wahrscheinlich ist das erste, was jeder Benutzer müde wird, das Hintergrundbild zu betrachten, das auf dem Desktop installiert ist. Viele Leute schauen jahrelang ständig auf das Standardbild, auch wenn das System mehr als einmal neu installiert wurde. Allen Usern wird es schnell langweilig und sie suchen nach passenden Bildern für den Desktop. Einige Benutzer bevorzugen animierte Hintergrundbilder. Ich schlage vor, dass Sie die Hauptseite Ihrer Lieblingsseite als Hintergrundbild festlegen (natürlich jede Seite). Jetzt, in Zeiten des unbegrenzten Internets, ist das für manche manchmal sehr, sehr bequem, besonders wenn ein Computer oder Laptop ständig mit dem Netzwerk verbunden ist. In jedem Fall ist es eine gute Option. Dieser Trick erschien in Windows XP. Leider endete es dort. Interaktive Tabellen sind weg. Für mich persönlich war es sehr interessant, die Aktualisierung von Nachrichtenseiten online zu verfolgen. Eine solche Einstellung auf dem Desktop wäre für viele Benutzer sinnvoll. Aber auch hier entschieden sich die Ersteller neuer Windows-Versionen, den Desktop ohne die Möglichkeit zu belassen, eine interaktive Seite zu reflektieren. Um ehrlich zu sein, sehr, sehr leid. Mir persönlich fehlt diese Möglichkeit manchmal sehr.
Aber lassen Sie uns von Worten zu Taten übergehen. Installieren Sie die Webseite auf dem Desktop
- Klicken Sie mit der rechten Maustaste auf eine beliebige freie Stelle auf Ihrem Desktop
- Wählen Sie im zusätzlichen Menü, das auf dem Desktop angezeigt wird, das Element aus Eigenschaften.
- Lassen Sie uns die Registerkarte Desktop auswählen und klicken Desktop-Setup...
- Wählen Sie im Menü Desktop-Elemente die Registerkarte aus Netz und klicken Sie dann auf die Schaltfläche Schaffen... Nun, oder wählen Sie einen Artikel aus Meine aktuelle Homepage. Als Hintergrund wird die Seite der Website angezeigt, die im Standardbrowser als Startseite festgelegt ist.
Geben Sie im erscheinenden Fenster einfach die zuvor kopierte Adresse Ihrer Lieblingsseite aus der Adressleiste Ihres Browsers ein.
Schließen Sie nachfolgende Dialogfelder, indem Sie die Änderungen akzeptieren und auf OK klicken. Jetzt haben Sie statt eines langweiligen Bildes eine Seite einer Website, die Ihnen gefällt, und können die Änderungen im Netzwerk interaktiv beobachten, wenn Sie die Website auf Ihrem Desktop betrachten.
Wird geladen...