Mike: Seitenüberblendungen

SELF-Forum

Seitenüberblendungen

Mike
– Informationen zu den Bewertungsregeln

Hi,

ist es mit relativ _einfachen_ Mitteln möglich Seitenüberblendungen Webbrowser übergreifend zu erstellen? Das Ziel ist, links ist eine Navi mit Links, wird nun ein Link angeklickt soll mit einer Überblendung zu der anderen Seite geführt werden.

Ich mag solche Spielereien selbst nicht (deswegen habe ich da auch nicht Ahnung), aber es muss sein...

Danke schonmal :)

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Seitenüberblendungen

    Hansi
    – Informationen zu den Bewertungsregeln

    wird nun ein Link angeklickt soll mit einer Überblendung zu der anderen Seite geführt werden.

    Ein DIV über die ganze Seite (volle Höhe + Breite, top & left = 0) legen, Hintergrundfarbe festlegen, transparenz auf 0% stellen, dann beim aufrufen die Transparenz hochschrauben auf 100%, in bestimmten ms abständen, somit entsteht eine "Überblendung", zum Schluss submitten. Realisierbar mit JavaScript + CSS in 20 min. ;)

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Seitenüberblendungen

      Mike
      – Informationen zu den Bewertungsregeln

      Realisierbar mit JavaScript + CSS in 20 min. ;)

      Danke, deine Antwort ist wohl die, die übergreifend funktionieren sollte...

      Hast du evtl. ein' Link zur genauen Anleitung? Oder Links zu den Teilen, die ich bei JS brauchen werde. CSS sollte kein Problem sein.

      Danke !

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Seitenüberblendungen

        Hansi
        – Informationen zu den Bewertungsregeln

        Hast du evtl. ein' Link zur genauen Anleitung? Oder Links zu den Teilen, die ich bei JS brauchen werde. CSS sollte kein Problem sein.

        Ich hatte gerade ein bisschen Zeit, daher habe ich dir was zusammengebastelt, habe aber nun Feierabend, daher konnte ich es nicht vollenden & testen.

        Wenn du bis Morgen früh das Problem nicht selbst gelöst hast, poste ich hier meine Version, noch vor 12:00 Uhr.

        Gruss

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Seitenüberblendungen

          Mike
          – Informationen zu den Bewertungsregeln

          Wenn du bis Morgen früh das Problem nicht selbst gelöst hast, poste ich hier meine Version, noch vor 12:00 Uhr.

          Gruss

          Wow, vielen Dank, hast dir ja echt Mühe gemacht! Da diese Frage für die Zukunft gedacht war, habe ich selbst noch nicht praktisch gebastelt. Es ist noch nicht gesichert, dass ich an dem Projekt teilhaben werde, aber wäre natürlich super, wenn ich so eine Vorlage hätte :)

          Danke nochmal!

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Seitenüberblendungen

            Hansi
            – Informationen zu den Bewertungsregeln

            Danke nochmal!

            Bitte bitte, ich finde es auch schöner anhang eines Beispiels was zu lernen.

              
<?xml version="1.0" encoding="ISO-8859-1"?>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  
		"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html xmlns="http://www.w3.org/1999/xhtml">  
 <head>  
  <script type="text/javascript">  
   [code lang=javascript]transparenz = 0; // Transparenz des Divs (0 = 100% Transparent, 100 = keine Transparenz)  
  
   function submitFader() {  
    var fader = document.getElementById("fader"); // Fader  
  
    transparenz += 5; // Transparenz um 5 erhöhen  
  
    fader.style.display = "block"; // Fader zeigen  
    fader.style.filter = "alpha(opacity="+ transparenz +")"; // Transparenz neu setzen, nur IE  
  
    if(transparenz != 100) setTimeout("submitFader()", 10); // Solange Transparenz unter 100 ist, weitermachen  
    else alert("Ende im Gelände!"); // Transparenz ist 100, Meldung ausgeben, Funktion beenden!  
   }

            </script>

            <style type="text/css">
               ~~~css body           { margin:0px; padding:0px; }
               #mainContainer { text-align:center; }
               #fader         { position:absolute; top:0px; left:0px; height:100%; width:100%; background-color:#000; filter:alpha(opacity=0); display:none; z-index:1000; }

              </style>  
 </head>  
 <body>  
  <div id="mainContainer">  
   <h1>Das</h1><br /><br /><br />  
   <h2>ist</h2><br /><br /><br />  
   <h3>eine</h3><br /><br /><br />  
   <h4>Webseite</h4><br /><br /><br />  
   <input type="button" value="Seite abschicken!" onclick="submitFader();" />  
   <div id="fader"></div>  
  </div>  
 </body>  
</html>  
[/code]  
So, dieses Beispiel funktioniert nur mit IE, FireFox kennt `filter`{:.language-css} nicht, das kannst du aber nach belieben anpassen. Wenn du den Fader schneller machen willst, dann erhöhe die Schritte wo die Transparenz hochgezählt wird, oder setz das `setTimeout()`{:.language-javascript} niedriger (momentan 10ms).  
  
Ich denke mir, das ist einfach genug gebastelt (nicht Perfekt!) um es zu verstehen und anzupassen. Viel Glück!
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. Seitenüberblendungen

              Mike
              – Informationen zu den Bewertungsregeln

              Ich denke mir, das ist einfach genug gebastelt (nicht Perfekt!) um es zu verstehen und anzupassen. Viel Glück!

              Vielen Dank,

              ich denke für Firefox muss ich -moz-opacity: anwenden :)

              Great :)

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. Seitenüberblendungen

                Malcolm Beck´s
                – Informationen zu den Bewertungsregeln

                hi,

                ich denke für Firefox muss ich -moz-opacity: anwenden :)

                FF kennt auch opacity, zu dem ist opacity Valide, was man von -moz-opacity: nicht behaupten könnte.

                mfg

                --
                マルコム ベック`秒 エイリアス エJ Ñ - ĜわたしÑ
                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

  2. Seitenüberblendungen

    Malcolm Beck´s
    – Informationen zu den Bewertungsregeln

    hi,

    ist es mit relativ _einfachen_ Mitteln möglich Seitenüberblendungen Webbrowser übergreifend zu erstellen? Das Ziel ist, links ist eine Navi mit Links, wird nun ein Link angeklickt soll mit einer Überblendung zu der anderen Seite geführt werden.

    Du kannst IE-User mit folgenden Zeilen Nerven:

    <meta http-equiv="Page-Enter" content="blendTrans(Duration=0.3)">  
<meta http-equiv="Page-Exit" content="blendTrans(Duration=0.3)">

    mfg

    --
    マルコム ベック`秒 エイリアス エJ Ñ - ĜわたしÑ
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. Seitenüberblendungen

      Der Martin
      – Informationen zu den Bewertungsregeln

      Hallo,

      Du kannst IE-User mit folgenden Zeilen Nerven:

      <meta http-equiv="Page-Enter" content="blendTrans(Duration=0.3)">

      <meta http-equiv="Page-Exit" content="blendTrans(Duration=0.3)">

        
kommt drauf an:  
  
  Tools/Internet Options/Advanced  
     ...  
  [ ] Enable page transitions  
  
Muss man ja nicht ankreuzen. ;-)  
  
So long,  
 Martin  

-- 
Die letzten Worte des Helden:  
Feigling! Traust dich ja doch nicht!
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. Seitenüberblendungen

        Malcolm Beck´s
        – Informationen zu den Bewertungsregeln

        hi,

        kommt drauf an:

        Tools/Internet Options/Advanced
             ...
          [ ] Enable page transitions

        Muss man ja nicht ankreuzen. ;-)

        Wie vielen, die diesen "Browser" Freiwillig nutzen[1], traust du dieses wissen zu?  ;)

        mfg
        [1] Stichwort: Das Blaue E = Internet

        --
        マルコム ベック`秒 エイリアス エJ Ñ - ĜわたしÑ
        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. Seitenüberblendungen

          Der Martin
          – Informationen zu den Bewertungsregeln

          Hallo,

          [ ] Enable page transitions
          Muss man ja nicht ankreuzen. ;-)
          Wie vielen, die diesen "Browser" Freiwillig nutzen[1], traust du dieses wissen zu?  ;)

          so wie du "freiwillig" hier meinst:    ungefähr 0%
          Freiwillig im wahren Sinn des Wortes:  geschätzte 50%

          [1] Stichwort: Das Blaue E = Internet

          Ja, ich weiß. Es gibt sie aber tatsächlich - PC-Anwender, die wissen, dass es mehrere Browser gibt, die sogar schon den einen oder anderen ausprobiert haben, und trotzdem den IE verwenden. Damit meine ich nicht nur mich selbst (bei mir verhält sich die Nutzungsquote IE:Opera etwa wie 80:20), sondern auch ein paar meiner Bekannten.

          So long,
           Martin

          --
          Alleine sind wir stark ...
          gemeinsam sind wir unausstehlich!
          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. Seitenüberblendungen

            Malcolm Beck´s
            – Informationen zu den Bewertungsregeln

            hi,

            (bei mir verhält sich die Nutzungsquote IE:Opera etwa wie 80:20)

            Eine für mich nach wie vor nicht Nachvollziehbare Tatsache.

            Ich kriege schon nach 10 Minuten surfen mit dem IE 6 Resp. 7 einen Nervenkollaps, wie du dass mit dem 5.5er erträgst, ist mir Schleierhaft.

            mfg

            --
            マルコム ベック`秒 エイリアス エJ Ñ - ĜわたしÑ
            Beitrag melden
            –
            Informationen zu den Bewertungsregeln