Coding-Schatzkästlein
Kleine Tips & Scripts zum Webdesign
Start > JavaScript > Page-Blending

JavaScript: "PageBlending"

Zusammenfassung

Name:  PageBlending
Aufgabe:  Funktion, um die Seitenüberblendeffekte des IEs mit einer leichteren Syntax, erweiterten Möglichkeiten und unter Vermeidung der typischen Mängel zu nutzen.
Benötigt:  JavaScript 1.1 (ungesichert)
Beispiel:  Testseiten
Download:  blending.zip

Seit der Version 4.0 bietet der Internet Explorer Filter-Funktionen, um Elemente ineinander überzublenden (eine browserübergreifende Funktion um (Image-)Elemente zu überblenden, habe ich bei Durchsichtige Elemente veröffentlicht). Als besondere Funktion hat Microsoft auch eine Möglichkeit vorgesehen, komplette HTML-Seiten beim Laden überzublenden. Dazu reicht es, in den HEAD einer HTML-Datei ein oder zwei META-Tags einzufügen. Mit dem META-Tag <meta http-equiv="Page-Enter" content="BlendTrans(Duration=2)"> erreicht man z.B., daß diese Seite binnen 2 Sekunden sanft über die vorhergehende Seite eingeblendet wird. Der META-Tag <meta http-equiv="Page-Exit" content="RevealTrans(Duration=3,Transition=12)"> bewirkt, daß beim Verlassen dieser Seite innerhalb von 3 Sekunden mit Übergangseffekt 12 (punktweises Ersetzen) die neue Seite erscheint.

Soweit die Theorie. Leider gerieten die Umsetzungen in den Browsern recht fehlerhaft. Der IE 4.x macht nur einen einfachen Effekt, der IE 5.0 nur kurzzeitige Darstellungsfehler beim Laden und der IE 5.5 führt die Übergänge zwar aus, interpretiert jedoch die Zeitangabe ggf. falsch, was zu immens nervigen Wartezeiten führen kann (ein Dezimalpunkt wird ignoriert, d.h. bei einer Angabe von 2.5 Sekunden dauert der Übergang 25 Sekunden).

Ein weiteres Problem: Normalerweise kann man dem Browser zusehen, wie er die nächste Seite aufbaut. Insbesondere Surfer mit langsamen Modems sind dies gewohnt, können sie sich doch schon während der längeren Ladezzeit auf der Seite orientieren. Mit den Überblendeffekten gibt es diese Möglichkeit jedoch nicht mehr: Die neue Seite lädt im Hintergrund, und erst wenn der Ladevorgang komplett beendet, die neue Seite komplett aufgebaut wurde, fängt der Browser an, die neue Seite anzuzeigen.

Und ärgerlicherweise muß man sich wahlweise für den fließenden Seitenübergang (BlendTrans) oder für einen Übergangseffekt (RevealTrans) entscheiden (letzterer bietet die Auswahl aus 23 Effekten, sowie auch einer zufälligen Auswahl aus diesen) - natürlich durch Aktualisierung der betreffenden HTML-Seiten.

Um den genannten Mängeln abzuhelfen, habe ich die Funktion PageBlending geschrieben. Sie sorgt ggf. dafür, daß der Effekt

  • nur auf passenden Browsern ausgeführt wird (u.a. Systemvariable agt_ieVersion);
  • nur auf schnellen Internetverbindungen ausgeführt wird (Systemvariable agt_speed);
  • nicht wahlweise entweder eine Überblendung oder ein Übergangseffekt ist;
  • nicht jeweils in den HTML-Quellcode eingebaut werden muß.

Außerdem bietet die Funktion die Vorteile, daß

  • auf alten IEs die Laufdauer angepaßt wird (es wird auf ganze Sekunden auf- bzw. abgerundet);
  • die Zufallsauswahl nicht nur auf die Übergangseffekte beschränkt ist, sondern auch die Überblendung mit einbezieht;
  • man die zufällige Auswahl auf selbst zu definierende Effekte beschränken kann (z.B. nur Kreis-Effekte);
  • man wahlweise Symbole statt nachzuschlagender Effekt-Kennnummern verwenden kann.

Ein Nachteil sei allerdings auch nicht verschwiegen: Mittels JavaScript eingefügt, funktioniert ausschließlich die Variante Page-Exit, nicht jedoch Page-Enter. D.h., die Effekte können nur beim Verlassen der jeweiligen Seite wirken, nicht jedoch beim Betreten (es sei denn, die vorherige Seite hat einen Effekt mit Page-Exit definiert ;-)).

Der benötigte Funktionsaufruf BlendOver(duration,effect) (das aufrufende Script muß im HEAD der HTML-Seite laufen) enthält die Parameter duration (Dauer des Effekts in Millisekunden - nicht in Sekunden wie beim Original!) und effect (der zu verwendende Effekt). Für effect kann entweder eine Zahl zw. 0 und 23 übergeben werden (was den Effekt-Kennnummern des Übergangseffekts RevealTrans entspricht - 23 ist dabei die Zufallsauswahl), oder -1 (was der Überblendung BlendTrans entspricht, wobei dieser Effekt nunmehr ebenfalls in der Zufallsauswahl enthalten ist), bzw. auch eine (Komma-separierte) Liste mit den gewünschten Effekten, aus denen zufällig ausgewählt werden soll.

Alternativ kann man aber auch Symbole übergeben. Diese Symbole sind:

  • Überlagerungs-Effekte:
    • " " entspricht -1: fließende Überblendung
    • "::" entspricht 12: punktweiser Übergang
  • Box-Effekte:
    • "[]<-" entspricht 0: nach innen (schließend)
    • "[]->" entspricht 1: nach außen (öffnend)
  • Kreis-Effekte:
    • "O<-" entspricht 2: nach innen (schließend)
    • "O->" entspricht 3: nach außen (öffnend)
  • Streifen-Effekte:
    • "||->" entspricht 8: nach rechts
    • "=_" entspricht 9: nach unten
  • Schachbrett-Effekte:
    • "#->" entspricht 10: nach rechts
    • "#_" entspricht 11: nach unten
  • Schieber-Effekte (vertikal):
    • "->|<-" entspricht 13: nach innen (schließend)
    • "<-|->" entspricht 14: nach außen (öffnend)
    • "|->" entspricht 6: nach rechts
    • "|<-" entspricht 7: nach links
  • Schieber-Effekte (diagonal):
    • "\-_" entspricht 17: nach links-unten
    • "/_-" entspricht 18: nach links-oben
    • "/-_" entspricht 19: nach rechts-unten
    • "\_-" entspricht 20: nach rechts-oben
  • Schieber-Effekte (horizontal):
    • "_-" entspricht 4: nach oben
    • "-_" entspricht 5: nach unten
    • ">-" entspricht 15: nach innen (schließend)
    • "-<" entspricht 16: nach außen (öffnend)
  • Jalousie-Effekte:
    • "==" entspricht 21: horizontal
    • "||||" entspricht 22: vertikal
  • Zufalls-Effekte:
    • "*" entspricht 23: aus allen Effekten
    • "-1,0,O<-,O->,..." (keine Entsprechung): aus Effekt-Liste

Beispiele:

  • BlendOver(2500,"O->") erzeugt immer einen 2,5-sekündigen (auf IE vor Version 6: 3-sekündigen) Kreis-Effekt von innen nach außen
  • BlendOver(2500," ,::") erzeugt zufällig fließende oder punktweise Überlagerung
  • BlendOver(2500," , ,::") dito, jedoch werden doppelt so viele fließende wie punktweise Überlagerungen verwendet
  • BlendOver(2500,23) erzeugt einen Zufalls-Effekt aus allen möglichen Effekten
  • BlendOver(2500,"*,O<-,O->") erzeugt zu 2/3 Kreis-Effekte und zu 1/3 einen beliebigen Effekt
  • BlendOver(2500,"[]->,O->,<-|->,-<") erzeugt zufällig einen der sich "öffnenden" Effekte
PageBlending-Testseiten
(für den Download als ZIP-Archiv - inkl. JavaScript-Quellcode)
(Grundgerüst: MagicHTML inkl. Auszug der Systemvariablen)

Anmerkung: Da die Routine JavaScript-Code der Version 1.1 benutzt, sollte die Funktion als externes Script geladen werden (empfiehlt sich aber natürlich sowieso). Sollen nicht nur alleinstehende Seiten überblendet werden, so muß die Funktion sowohl im Frameset, als auch in den betreffenden Frames aufgerufen werden. Außerdem empfiehlt es sich, einfach eine Variable zu definieren, nach deren "Wahrheitsgehalt" die Routine ausgeführt wird - oder eben auch nicht. Somit kann man die Ausführung nicht nur von bestimmten Systemzuständen abhängig machen, sondern kann dem Surfer z.B. auch gezielt anbieten, die Funktion an- oder abzuschalten (und dann das Ergebnis des Wunsches z.B. in einem Cookie sichern). Beispiele (basierend auf den Systemvariablen):
  • do_blending=true; (immer ausführen)
  • do_blending=false; (nie ausführen)
  • do_blending=!is_online; (nur, falls die Seiten offline geladen werden - z.B. zum Testen)
  • do_blending=(is_ie && agt_ieVersion>=5.5) (nur im IE ab Version 5.5 inkl.)
  • do_blending=(!is_ie || (is_ie && agt_ieVersion>=5.5)); (auf jedem Browser - falls diese Funktion auch mal von einem anderen Browser als dem IE unterstützt werden sollte -, beim IE jedoch erst ab 5.5)
  • do_blending=((!is_ie || (is_ie && agt_ieVersion>=5.5)) && agt_speed>300); (wie oben, jedoch nur bei effektiven Verbindungsgeschwindigkeiten größer als 300 KBit/s)
  • do_blending=((!is_ie || (is_ie && agt_ieVersion>=5.5)) && lineType("DSL")); (wie oben, jedoch nur wenn mindestens die Geschwindigkeit eines DSL-Modems erreicht wird)

gefolgt vom Aufruf if(do_blending) { blendOver(duration,effect); } ...


Updates:
17.01.2004: 
 Erweiterung: Workaround für "Dezimalpunkt-Bug" des IE 5.5 eingebaut, und interne Zufallsfunktion rnd() ersetzt durch rand().


Kurz-URL dieses Artikels: http://Coding.binon.net/PageBlending