bionade: Transistion-Effekt ruckelt

Hi Community,
ich habe ein Problem mit einem Transtition-Effekt. Es geht darum, dass in einem div-Container 2 fast identische Bilder (eines heller, eines dunkler) übereinander gelegt werden sollen. Eines (das hellere) ist dabei als Hintergrundbild definiert, das andere ist ein Link.  Bei hover soll das verlinkte Bild durchsichtig werden (opacity: 0), das hintere, hellere Bild wird dadurch sichtbar und für den User entsteht der Eindruck, dass das Bild langsam heller wird. Damit der Effekt weich verläuft, habe ich ihm eine transition-time von 2 sek. gegeben.

Diese Transition-time ist aber problematisch: Während das obere Bild langsam ausgeblendet wird, ruckelt es um ca. 1px hin und her. Gibt man den Transition-Effekt weg, dann ist der Übergang perfekt und ohne ruckeln. Aber eben hart und nicht verlaufend.

Meine Frage ist jetzt, ob jemand ähnliche Erfahrungen bei längeren Transitions hat.

Danke vorab!
Raphael

  1. Hallo

    Meine Frage ist jetzt, ob jemand ähnliche Erfahrungen bei längeren Transitions hat.

    Nein, die funktionieren absolut ruckelfrei.

    Wahrscheinlich liegt es an deiner Webseite wenn es Probleme gibt. Hast du einen Link zu der Seite? Du kannst sie ja auch  bei einem Freeware-Provider online stellen.

    Ansonsten ist konkrete Hilfe kaum möglich.

    Gruss

    MrMurphy

    1. Hallo MrMurphy,
      danke für die Info. OK, also der erste Verdacht hat sich nicht bestätigt.
      Hier ist der Link

      5 der Felder haben den Hovereffekt. Beim ersten Feld rechts oben (short on time) habe ich die transition-time auf 1ms beschränkt. Dann ruckelt es nicht. Bevor ich den Effekt mit jquery definiert hatte, gabs auch eine Variante in nur CSS, da hats genauso geruckelt. Dadurch kam ich auf die Idee, dass es die transition-time ist.

      Bin schon sehr gespannt wo das Problem liegt. Beim Original der Seite ruckelt es übrigens auch. Spannend ist auch, dass die Felder nicht immer wandern. Es handelt sich ca. um 70% der Fälle. Regel - wann der Effekt eintritt - habe ich aber noch keine rausgefunden.

      Eine Variante der Seite in "nur CSS" ohne jquery haben die gehoverten Bilder übrigens auch um ein Pixel getanzt.

      Danke auf jeden Fall mal vorab!
      Bio

      1. Hallo

        bei mir (Win 7, aktueller FF) laufen die Transitions absolut ruckelfrei, die Bilder springen nicht. Das scheint also eher an deiner Hard- oder Software zu liegen.

        Allerdings solltest du auf Java-Script-Lösungen verzichten wenn es gleichwertige CSS-Lösungen gibt. CSS ist um etwa den Faktor 100 schneller, beansprucht weniger Hardware-Resourcen und viele User haben Java-Script blockiert, um sich vor Werbung und Spielereien zu schützen. Bei denen funktioniert deine Lösung überhaupt nicht.

        Gruss

        MrMurphy

        1. Hallo MrMurphy,

          ich stimme deiner Antwort in allem zu, bis auf

          ... und viele User haben Java-Script blockiert ...

          kannst du das irgendwie belegen? Wenn ich in meine Logfiles sehe, haben nur Bots Javascript abgeschaltet.

          Bei meinem Smartphone (WP7) und bei meinem Firefox (aktuelle Version unter W7 und W8) wüsste ich auch gar nicht, wie man Javascript abschaltet.

          Gruß, Jürgen

          1. Om nah hoo pez nyeetz, JürgenB!

            Bei meinem Smartphone (WP7) und bei meinem Firefox (aktuelle Version unter W7 und W8) wüsste ich auch gar nicht, wie man Javascript abschaltet.

            Für den Fuchs stehts im Wiki.

            Matthias

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Bar und Barsch.

            1. Hallo Matthias,

              Bei meinem Smartphone (WP7) und bei meinem Firefox (aktuelle Version unter W7 und W8) wüsste ich auch gar nicht, wie man Javascript abschaltet.

              Für den Fuchs stehts im Wiki.

              und wie viele Surfer interessieren sich dafür?

              Gruß, Jürgen

              1. Mahlzeit,

                und wie viele Surfer interessieren sich dafür?

                Kannst du dir vermutlich an einem Finger abzählen :D

                --
                42
        2. Mahlzeit,

          viele User haben Java-Script blockiert,

          Das war vielleicht vor 10 Jahren so, als Javascript als pauschal Böse hingestellt wurde. Aktuell schalten das eher eine Handvoll Hardcore-User aus, weil sie der Meinung sind, alles, was im Internet über schwarzen Text auf weissen Grund hinausgeht, ist Teufelswerk.

          Ich hab nur meine eigenen Statistiken, um das zu belegen, aber wenn ich sehe, welche Webseiten ohne JS nicht funktionieren, ist es völlig unmöglich, dass eine relevante Anzahl  Internetnutzer ohne JS unterwegs ist.

          --
          42
        3. Allerdings solltest du auf Java-Script-Lösungen verzichten wenn es gleichwertige CSS-Lösungen gibt. CSS ist um etwa den Faktor 100 schneller, beansprucht weniger Hardware-Resourcen...

          Hi MrMurphy,
          ich habe die Lösung in CSS jetzt fertig. Hier noch mal der Link: Es ist ganz interessant: Ich habe als oberen Layer einfach ein durchscheinendes PNG (weiss mit 10% Deckung) genommen und habe sicherheitshalber die schwarzen Ränder ausgespart. Und das Ganze jetzt doch mit CSS gelöst.

          Das sieht ziemlich ähnlich aus wie die erste Lösung, falls jetzt aber was ruckelt, sieht man es wenigstens nicht mehr. ;)

          Einziges Miniproblem ist der CSS-Code für Transition. Ich habe 1s transition-time festgelegt, aber das langsame Überblenden funktioniert nur beim Eintritt in das gehoverte Feld. Theoretisch müsste es ja beim Verlassen genauso langsam wieder zurückblenden. Tut es aber nicht, der Effekt endet plötzlich. (?) Weiss da jemand, wo der Fehler liegen könnte?

          Danke!
          Bio

          1. Hallo,

            Einziges Miniproblem ist der CSS-Code für Transition. Ich habe 1s transition-time festgelegt, aber das langsame Überblenden funktioniert nur beim Eintritt in das gehoverte Feld. Theoretisch müsste es ja beim Verlassen genauso langsam wieder zurückblenden. Tut es aber nicht, der Effekt endet plötzlich. (?) Weiss da jemand, wo der Fehler liegen könnte?

            Wahrscheinlich. Ohne Link zu der Seite kann ich aber nur raten.

            Ich habe den Verdacht, das du die transition-Eigenschaften beim :hover-Zustand eingegeben hast. Der gehört aber in den Ursprungszustand. Aus dem :hover-Zustand kannst du ihn dann löschen.

            Gruss

            MrMurphy

          2. Om nah hoo pez nyeetz, bionade!

            Einziges Miniproblem ist der CSS-Code für Transition. Ich habe 1s transition-time festgelegt, aber das langsame Überblenden funktioniert nur beim Eintritt in das gehoverte Feld. Theoretisch müsste es ja beim Verlassen genauso langsam wieder zurückblenden. Tut es aber nicht, der Effekt endet plötzlich. (?) Weiss da jemand, wo der Fehler liegen könnte?

            http://forum.de.selfhtml.org/archiv/2013/3/t213227/#m1457640

            Matthias

            --
            Der Unterschied zwischen Java und JavaScript ist größer als der zwischen Rind und Rindenmulch.

  2. Mahlzeit,

    Meine Frage ist jetzt, ob jemand ähnliche Erfahrungen bei längeren Transitions hat.

    Bei der Länge nicht, aber sowas ist Prozessor- und Speicherhungrig. Wenn dir z.B. den RAM ausgeht, passiert sowas.
    Wenn du aber nur zwischen einem hellen und dunklen Bild überblöendest, wieso legst du über das Bild kein farbiges Rechteck und veränderst nur die Transparenz? Das spart ne Menge resourcen gegenüber dem Überblenden eines Bildes.

    --
    42
    1. Meine Frage ist jetzt, ob jemand ähnliche Erfahrungen bei längeren Transitions hat.

      Bei der Länge nicht, aber sowas ist Prozessor- und Speicherhungrig. Wenn dir z.B. den RAM ausgeht, passiert sowas.

      OK, das klingt plausibel. Weil richtig nachvollziehbar ist mir nicht, bei welchen Usern das Problem auftaucht und bei welchen nicht.

      Ich habe jetzt einen anderen Testcase geabut: http://www.raphael-bolius.com/webentwicklung/flavoursys/starttest2/ Das Bild unten ist sehr hell, die opacity beim Hovern nur 0.9 Dadurch habe ich mir erhofft, dass weniger Rechenkapazität benötigt wird. Leider nein.

      Wenn du aber nur zwischen einem hellen und dunklen Bild überblöendest, wieso legst du über das Bild kein farbiges Rechteck und veränderst nur die Transparenz? Das spart ne Menge resourcen gegenüber dem Überblenden eines Bildes.

      Gute Überlegung.
      Also als unteres Bild einfach das Bild, als oberes "Bild, das gefadet wird, eine weisses gif.

      a {opacity: 0;}
      a:hover {opacity 0.1}

      Das müsste ziemlich ähnlich aussehen, ist aber deutlich weniger rechenintensiv. Ich probiers gleich mal aus und melde mich wieder.

      Danke für den Tipp!
      Bio

      1. Gute Überlegung.
        Also als unteres Bild einfach das Bild, als oberes "Bild, das gefadet wird, eine weisses gif.

        a {opacity: 0;}
        a:hover {opacity 0.1}

        Das müsste ziemlich ähnlich aussehen, ist aber deutlich weniger rechenintensiv. Ich probiers gleich mal aus und melde mich wieder.

        OK, hier bin ich wieder.
        Das ganze funktioniert jetzt: http://www.raphael-bolius.com/webentwicklung/flavoursys/starttest3/

        Mein Rechner hat aktuell ein Geschwindigkewitsproblem, insofern hab eich jetzt einen Vorteil, denn ich teste für die allerlangsamsten Geräte. ;) Auf meinem Rechner hat sich sogar das weisse gif verschoben. Daher habe ich es etwas kleiner gemacht und ihm einen margin von 2px verpasst. Jetztt sieht man nicht mehr, dass es ruckt.

        DANKE!!!