Technik hinter Webseite
0 
molily
0 Meinereiner
0
Technik hinter Webseite
Hallo,
ich habe vor ein paar Tagen folgende Webseite gefunden und bin von der Art der Darstellung recht begeistert: www.onlinedepartment.nl
Was ich interessant finde ohne zu wissen, wie ich es umsetzen kann: Letztendlich ist die Startseite ja eine One-Page mit mehreren Schritten (entweder per Scrollen oder per Cursor erreichbar). Aber egal wie groß das Browserfenster ist bzw. wie groß ich das Fenster während der Ansicht der Seite ziehe ... die Seite zeigt nie "zu viel" oder "zu wenig" an. Das obere Foto wird einfach nur beschnitten.
Auf dem Punkt "What we do" kommen sogar weitere Fotofelder hinzu, wenn ich die Seite sehr große ziehe.
Falls einer von euch mir sagen könnte, wie sowas umgesetzt wurde bzw. wonach ich suchen muss, um etwas ähnliches zu erstellen, wäre ich sehr sehr dankbar.
Beste Grüße
vom Christian
-
Hallo,
Falls einer von euch mir sagen könnte, wie sowas umgesetzt wurde bzw. wonach ich suchen muss, um etwas ähnliches zu erstellen, wäre ich sehr sehr dankbar.
Da gibt es keine einfache Antwort und kein fertiges Tutorial. Das ist eine Mischung aus verschiedenen JavaScripten und responsivem CSS.
Die Anpassungsfähigkeit hinsichtlich der Viewport-Breite wird vermutlich mit altbekannten CSS-Media-Queries und flexiblen Layouts gelöst.
JavaScript fängt scroll-Events ab und sorgt durch programmatisches Scrollen für den bildschirmfüllenden Blätter-Effekt. Dazu müssen die einzelnen »Slides« vorher auf die Viewport-Höhe gesetzt werden. Das geht theoretisch auch mit CSS, aber robust nur mit zusätzlichem JavaScript.
JavaScript hört auch auf bestimmte Scroll-Schwellen, lädt Inhalte oder blendet sie ein, und aktualisiert die Navigation.
jQuery ist eine vielseitige DOM-Bibliothek, die diese Aufgaben auf unterster Ebene abdeckt. Es gibt einige Bibliotheken und Plugins, die in die Richtung gehen, z.B.:
http://scrolldjs.com/
https://github.com/peachananr/onepage-scroll
http://alvarotrigo.com/fullPage/Die Logik auf oberster Ebene müsstest du wahrscheinlich selbst schreiben.
Siehe auch meinen Hintergrundartikel zum Interactive Storytelling.
Grüße
Mathias-
Besten Dank für die Antwort. Damit werde ich mich schonmal etwas weiter durchhangeln.
-
-
Falls einer von euch mir sagen könnte, wie sowas umgesetzt wurde bzw. wonach ich suchen muss, um etwas ähnliches zu erstellen, wäre ich sehr sehr dankbar.
Will man das wirklich? Ich finde die Seite sehr unübersichtlich, habe grundsätzlich nie eine Ahnung, wo ich mich gerade befinde und wie ich eine Seite wiederfinde, die ich schon gesehen habe.
Mag ja interessant aussehen, aber die Usibilty ist furchtbar...Just my 2 cents...
-
Moin
Falls einer von euch mir sagen könnte, wie sowas umgesetzt wurde bzw. wonach ich suchen muss, um etwas ähnliches zu erstellen, wäre ich sehr sehr dankbar.
Diese Webseite wurde mit Wordpress und einem On-Page-Theme erstellt (welches angepasst wurde). One-Page-Themes findest du in Google mit den Schlagwörtern "wordpress one page theme" eine ganze Menge.
Zur Technik die dahintersteht hat molily bereits alles gesagt.
Gruß Bobby
--
-> Für jedes Problem gibt es eine Lösung, die einfach, sauber und falsch ist! <-
### Henry L. Mencken ###
-> Nicht das Problem macht die Schwierigkeiten, sondern unsere Sichtweise! <-
### Viktor Frankl ###
ie:{ br:> fl:{ va:} ls:< fo:) rl:( n4:( de:> ss:) ch:? js:( mo:} sh:) zu:)