Frage von lightup, 75

Wie kann man ein Bild am unteren Bildschirmrand beginnen lassen?

Hallo Zusammen

Ich würde bei meiner Homepage gerne den gleichen/ähnlichen "Effekt" bewirken wie bei der unten stehenden Homepage. Ich möchte am Anfang nur ein vollflächiges Bild zeigen über die gesamte Grösse des Browserfensters und sobald man anfängt zu scrollen werden die ersten Informationen angezeigt. Ich habe da schon ein wenig ausprobiert mein Hauptproblem liegt aber daran, dass ich nicht weiss, wie man dies auf verschiedene Bildschirmgrössen anwenden kann, also eine automatische Abfrage der Bildschirmgrösse und einer demensprechenden Vergösserung/Verkleinerung des Bildes.

http://www.multicolorshirt.de/

Vielen Dank!

Hilfreichste Antwort - ausgezeichnet vom Fragesteller
von Dory1, 31

In dem von dir gezeigten Beispiel wird die Höhe des Containers mit Hilfe von Javascript gesetzt. In etwa so:

// container selektieren, der das Bild enthält
var container = document.querySelector(".maxheight");
// Funktion definieren, die die Größe setzt
function setSize() {
  container.style.height = window.innerHeight + "px";
}
// Funktion beim betreten der Seite aufrufen
setSize();
// und erneut aufrufen wenn die Fenstergröße verändert wird
window.addEventListener("resize", setSize);

Demo http://codepen.io/anon/pen/WwPdeK

Kommentar von lightup ,

Ok ich werde das mal ausprobieren. Vielen Dank. Ich melde mich nochmals ob ich es hinbekommen habe.

Kommentar von lightup ,

Vielen vielen Dank! Hat alles super geklappt.

Antwort
von ilovetoro, 41

In deiner Beispiel-Webseite wird das Bild nicht von unten geladen - mach mal deinen Browser flacher (von oben nach unten) und refresh, dann wird das Bild unten abgeschnitten, also ladet es von oben.

Google mal das css-Elemewnt "canvas", das würde ich  dafür benutzen.

Beim Gestallten einer Webseite solltest du allerdings auch an die bots denken die versuchen deine Seite bei den Suchmaschinen zu indexieren. In dem Fall deiner Beispielseite sieht der Quelltext furchtbar aus ... da rennen die bots weg - sprich, der Aufbau der Seite sollte suchmaschinen freundlich gestalltet sein und inline-styling ist ein no-no.

Kommentar von fluffiknuffi2 ,

css-Elemewnt "canvas"

Du meinst wohl das HTML-Element "canvas"? :p

Kommentar von lightup ,

Ok vielen Dank ich werde mir das mal ansehen. Ja die Webseite habe nicht ich gemacht. Ich fand eben diese "Unterteilung" interessant.

Kommentar von Dory1 ,
  1. Wie soll denn ein Canvas-Element dem Fragesteller helfen?
  2. Bots interessieren sich nicht für den Quelltext sondern für die Inhalte einer Webseite.
Antwort
von stielaugen, 35

Da fehlt der Link um nach zu sehen.

Kommentar von lightup ,

Habe ich nachgereicht sorry

Keine passende Antwort gefunden?

Fragen Sie die Community