[joakim]

Hey Leute,

habe heute diese Seite hier gefunden: http://nizoapp.com/ und muss sagen, dass ich das ganz schön cool finde. Wie genau geht sowas? Bilder außerhalb des Sichtbarkeitsbereichs des Viewports positionieren und dann einfach abhängig von der Scrollbewegung einfliegen lassen? Was muss man dabei beachten?
Wenn man am unteren Seitenrand angekommen ist, dann kommt einem das Newsletter-Formular ja quasi entgegen geflogen. Dass man dort die selbe Technik hintersteckt leutet mir ein - aber wieder: Wie geht sowas? Schließlich müsste man ja defakto eine Seite "ohne" Footer schreiben der dann erst später dazu kommt.

[immerIch]

Das Ganze läuft in Zusammenspiel von Javascript, Html und Css.
Für einsteiger warscheinlich etwas leichter zu vollziehen wären Js-Libraries wie jQuery oder Mootools. Ich befürchte aber, dass du ohne wirkliche Kenntnisse in Js und Css nicht weit kommen wirst.

Vorgefertigte Lösungen gibt es für soetwas auch eher selten/weniger, ist schon zu speziell.

[hannahc]

Hi Joakim,

wenn Du´s ganz genau wissen willst, wie das geht, nimm mal den IE 8 und mach folgendes:

In der Menüleiste auf "Extras" gehen, dort "Entwicklertools" auswählen.

Nun öffnet sich das Fenster mit Entwicklertools, wo man als erstes mal den Quellcode der Seite sieht.

Oben, unter der Menüleiste solltest Du den Button "Debuggen starten" sehen, so, und gleich rechts daneben ist eine Drop-Down Box, aus der man alle von der Nizo-App-Seite verwendeten .js Seiten auswählen und anschauen kann.

Und jetzt kommst Du:

Mit etwas Zeit und Motivation kannst Du Dich jetzt durch den kompletten Quellcode wühlen, danach bist Du schlauer.

Um das Ganze zu verstehen, solltest Du natürlich schon ein bißchen Javascript können, sonst wirds heftig.


Ich persönlich bin jetzt zu faul, mich da durchzuwühlen, würde aber zu Deiner Frage, wie so etwas geht, mal darauf tippen, daß alle Bilder, und auch der Newsletter, die einem entgegengeflogen kommen, Stück für Stück abhängig davon, wie weit bereits gescrollt wurde, auf der Webseite positioniert werden.

Also quasi

if (window.pageYOffset >1 && window.pageYOffset <10) {
document.getElementByID('Erstes_Bild').style.top='...';
document.getElementByID('Erstes_Bild').style.left='...';

document.getElementByID('Zweites_Bild').style.top='...';
document.getElementByID('Zweites_Bild').style.left='...';

document.getElementByID('Drittes_Bild').style.top='...';
document.getElementByID('Drittes_Bild').style.left='...';
...
..
.
}

if (window.pageYOffset >10 && window.pageYOffset <20) {
document.getElementByID('Erstes_Bild').style.top='...';
document.getElementByID('Erstes_Bild').style.left='...';

document.getElementByID('Zweites_Bild').style.top='...';
document.getElementByID('Zweites_Bild').style.left='...';

document.getElementByID('Drittes_Bild').style.top='...';
document.getElementByID('Drittes_Bild').style.left='...';
...
..
.
}


... und so weiter.

Also, wie bei einem Daumenkino, wo für jede Position eines Objekts im dargestellten Film, ein einzelnes Bild angefertigt werden muß.

Und alle Bilder zusammen ergeben dann die Bewegung.

[joakim]

Danke für die Antworten!
Dass es dafür keine fertige Lösung gibt, ist mir klar, das war auch nicht Sinn meiner Frage. Die Idee den Quellcode auseinander zu nehmen ist natürlich die aufwändigste Lösung...aber ohne Fleiß kein Preis, nicht wahr?

[hannahc]

Stimmt, aufwändig ist es, aber denk nur wieviel Du dabei lernen kannst, hehe...

Aber ok, wenn ich irgendwas sehe, programmiertechnisch, was mir gefällt, schaue ich eigentlich in den wenigsten Fällen, eben weíl´s tierisch aufwändig ist, in den kompletten Quellcode.

Meistens mach ich es so, daß ich mir überlege, ok, was kann ich zu dem Thema, fachlich, und dann, habe ich Möglichkeiten, mit meinem jetzigen Wissen das irgendwie genauso hinzukriegen.

Zusätzlich schaue ich dann noch hier mal und da mal (Google, Fachliteratur, Foren,usw.), wenn ich wo nicht weiterkomme.

Diese Vorgehensweise hat mir auch die Erfahrung gebracht, daß es meist 1001 Möglichkeit gibt, ein und dasselbe hinzukriegen (und es ist immer gut, wenn man mehrere Wege kennt).

Aber wie ich gesagt habe, wenn Du die Seite nachbauen willst, probier´s wirklich mal nach dem Daumenkino-Schema.

Setze für jede Scrollbewegung die Position für jedes Objekt auf der Seite fest, das ist gar nicht soo aufwändig...

[DerM]

hier das Verhalten der Seite!
Ist gar nicht schwer zu verstehen!

http://nizoapp.com/media/j/site.js