Overblending und Fading bei Webprojekten

Hackse

Hackse

0
Tach allerseits,
vor einigen Monaten hab' ich mal in 'nem Laden zufällig 'ne Homepage gesehen, die deren Seiten überblendete. Doof zu erklären, aber im Grunde genommen wurden die HTML-Seiten beim Anklicken eines Links nicht einfach nur getauscht, sondern die neue Seite überblendete die aktuelle Seite nach und nach. Dann gab's hier auch noch Effekte, welche bestimmte HTML-Seiten einfach heller oder dunkler faden ließen.

Im Prinzip ist das ja recht einfach zu programmieren. Man müsste, so wie ich mir das zumindest vorstelle, nur Zugriff auf jeden Pixel des aktuellen Web-Fensters an der Position (x,y) haben, diesen Pixel mit dem Pixel der neuen, aufgerufenen Seite vergleichen und dann den Rot-, Grün- und Blauanteil dementsprechend intervallweise annähern bis die Farben eben korrespondieren.

Frage:
Wie komme ich an die Information der Pixel heran und wie werden diese modifiziert? Geht das mit Javascript, mit PHP oder wie wird das gemacht?

Greetz
Hackse
 
wie das mit JS geht weiss ich nicht. Mit PHP wirds aber zu 100% nicht funktionieren, da php serverseitig ausgeführt wird. Vielleicht ist das ganze auch einfach mit Flash programmiert/erstellt worden. Das dürfte wohl die einfachste Möglichkeit sein...
 
Hi,

Warum einfach, wenns auch kompliziert geht?

Wie fetzer schon gesagt hat, in PHP ist das nicht möglich.
In JS wäre es Theoretisch möglich, aber viel zu aufwändig.

Am einfachsten geht das aber mit den Meta-Tags! Allgemeines darüber findest du bei Selfhtml
Zum Blend-Effekt gibt es in der MSDN Informationen. Es handelt sich bei dem was du suchst um die "Interpage Transitions".

Da dieser Effekt von Microsoft stammt, wird er in der Regel nur vom Internet Explorer unterstützt.

Gruß Chris
 
Original von BlackSun1102
Hi,

Warum einfach, wenns auch kompliziert geht?

Wie fetzer schon gesagt hat, in PHP ist das nicht möglich.
In JS wäre es Theoretisch möglich, aber viel zu aufwändig.

Am einfachsten geht das aber mit den Meta-Tags! Allgemeines darüber findest du bei Selfhtml
Zum Blend-Effekt gibt es in der MSDN Informationen. Es handelt sich bei dem was du suchst um die "Interpage Transitions".

Da dieser Effekt von Microsoft stammt, wird er in der Regel nur vom Internet Explorer unterstützt.

Gruß Chris
Zum Vergrößern anklicken....
Hi,
MSDN und alles, was rein microsoftspezifisch ist, bringt nichts. Man kann kaum vom Besucher einer Page erwarten, dass der Benutzer den fehleranfälligen und mit Sicherheitslücken überfluteten Internet-Explorer verwendet. Firefox und co. müssen diesen Effekt auch darstellen können. Ich habe FLASH nun mit mehreren Browsern getestet. Funktioniert super.

Wie Fading in Javascript möglich ist, zeigst Du mir bitte. Background-Color Fading ist kein Problem, aber wie sprichst Du die einzelnen Pixel von Bildern an um diese auch faden zu lassen?

Greetz
Hackse
 
Wer spricht denn von einzelnen Pixeln? Die Webseite in ein DIV gepackt und dieses dann mit opacity-Werten bearbeitet, schon könnte man einen ähnlichen Effekt erreichen.

Problematisch wird's eher an dem Punkt, wie man eine weitere Seite nachlädt, ohne die aktuelle zu verlassen.
 
Original von LX
Wer spricht denn von einzelnen Pixeln? Die Webseite in ein DIV gepackt und dieses dann mit opacity-Werten bearbeitet, schon könnte man einen ähnlichen Effekt erreichen.

Problematisch wird's eher an dem Punkt, wie man eine weitere Seite nachlädt, ohne die aktuelle zu verlassen.
Zum Vergrößern anklicken....
Gute Idee. Wusste nicht, dass die anderen Browser != IE das auch können, aber umso besser. Alles klar, werd' ich versuchen, denn so kann ich es mir ersparen die einzelnen Pixel anzusprechen und einzeln zu verdunkeln. :D

Greetz
Hackse
 
Original von Hackse

Man kann kaum vom Besucher einer Page erwarten, dass der Benutzer den fehleranfälligen und mit Sicherheitslücken überfluteten Internet-Explorer verwendet. Firefox und co. müssen diesen Effekt auch darstellen können.
Zum Vergrößern anklicken....

Bei fehleranfällig stimme ich dir zu... Ich hab gestern mal ein paar Experiemte mit den Transitions gemacht. Was war bei ein paar ungültigen Werten der Fall? Der IE stützte mit einer Speicherschutzverletzung ab. :]

Original von LX
Wer spricht denn von einzelnen Pixeln? Die Webseite in ein DIV gepackt und dieses dann mit opacity-Werten bearbeitet, schon könnte man einen ähnlichen Effekt erreichen.

Problematisch wird's eher an dem Punkt, wie man eine weitere Seite nachlädt, ohne die aktuelle zu verlassen.
Zum Vergrößern anklicken....

Opacity ist doch eine CSS Eigenschaft wenn ich mich nicht täusche?

Die Idee ist gut, aber mit Frames könnte man doch das mit dem Nachladen realisieren? In einem Unsichtbaren Frame das Script laufen lassen....

Gruß Chris
 
O.k. Leute,
erst mal vielen Dank für Eure hilfreichen Beiträge. Werd' das mit dem JS-Fading heute Abend gleich mal probieren.

Für das Overblending von einem Screen zum nächsten müsste man nun tatsächlich die RGB-Werte der einzelnen Pixel ansprechen und sie z.B. von x=0 bis width-1, sowie von y=0 bis height-1an die RGB-Werte des neuen Bildes an der selben Koordinate anpassen, bis diese eben identisch sind. Bei ungleicher Bildgröße einfach die Pixel außerhalb auf Transparent setzen (falls möglich). Ich kann's programmieren, ich brauch' nur JS-Funktionen zum ansprechen der Pixel. :D

Greetz
Hackse
 
Um antworten zu können musst du eingeloggt sein.
Zurück
Oben