TS: CSS-Slideshow

Hello,

im Netz gibt es einige sehr gut funktionierende frei verwendbare Tutorials und Skripte für CSS-Slideshows. Die funktionieren alle ohne JS, dafür mit CSS-Animationen. Die Last, die Bilder einmal herunterzuladen, ist bei guter Bildvorbereitung noch erträglich. Selbstverständlich gehört sowas zu den Dingen im Web, die nicht notwendig sind, aber hübsch anzusehen. Ich bin mir dessen bewusst.
Aber was ist schon notwendig? ;-)

Leider haben die aber auch noch alle die Macke, dass man auf schwächeren Systemen während der Animation in einer Seite kaum noch mit Bedienerhandlungen (z. B. Eingabe einer neuen URL, Umschalten auf anderen Link) dazwischen kommt.

Ist das ein allgemeines Problem von CSS-Animationen?
Sollte man dafür im Animationsraster irgendwelche Lücken vorsehen und wenn ja, wie kann man das realisieren?

Ich habe eine davon im Netz stehen. Die ist aber schon für die Interessenten teilweise personalisiert. Ich möchte die hier nicht öffentlich verlinken.

Liebe Grüße
Tom S.

-- Es gibt nichts Gutes, außer man tut es.
Das Leben selbst ist der Sinn!
  1. @@TS

    im Netz gibt es einige sehr gut funktionierende frei verwendbare Tutorials und Skripte für CSS-Slideshows.

    Magst du welche zeigen? Um es vorwegzunehmen: „gut funktionierend“ bedeutet:

    • tastaturbedienbar
    • screenreader-bedienbar, d.h. ARIA-Attribute werden richtig gesetzt.

    Die funktionieren alle ohne JS, dafür mit CSS-Animationen.

    Das eine schließt das andere nicht aus. Aber vermutlich schließen sich „ohne JS“ und „gut funktionierend“ aus.

    Selbstverständlich gehört sowas zu den Dingen im Web, die nicht notwendig sind, aber hübsch anzusehen.

    „Nicht notwendig“ wie in Should I use a carousel dot com

    Leider haben die aber auch noch alle die Macke, dass man auf schwächeren Systemen während der Animation in einer Seite kaum noch mit Bedienerhandlungen (z. B. Eingabe einer neuen URL, Umschalten auf anderen Link) dazwischen kommt.

    Ist das ein allgemeines Problem von CSS-Animationen?

    Nicht, dass ich wüsste.

    LLAP 🖖

    -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
    1. Hello Gunnar,

      im Netz gibt es einige sehr gut funktionierende frei verwendbare Tutorials und Skripte für CSS-Slideshows.

      Magst du welche zeigen?

      Ja, ich wollte Dir gerne eine private Nachricht über das Forum senden, aber da bekomme ich leider nur eine Fehlermeldung.

      Es ist etwas schief gelaufen

      Kopie an @Christian Kruse

      Mehr dazu später...

      Liebe Grüße
      Tom S.

      -- Es gibt nichts Gutes, außer man tut es
      Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
      1. Aloha ;)

        im Netz gibt es einige sehr gut funktionierende frei verwendbare Tutorials und Skripte für CSS-Slideshows.

        Magst du welche zeigen?

        Ja, ich wollte Dir gerne eine private Nachricht über das Forum senden, aber da bekomme ich leider nur eine Fehlermeldung.

        Wenn du mir jetzt noch erklärst, was an …

        frei verwendbare Tutorials und Skripte für CSS-Slideshows

        … so privat ist, dass sie nur per PN verschickt werden können...⁉️

        Grüße,

        RIDER

        -- Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller

        # Twitter # Steam # YouTube # Self-Wiki #

        Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
        1. Hello,

          Wenn du mir jetzt noch erklärst, was an …

          frei verwendbare Tutorials und Skripte für CSS-Slideshows

          … so privat ist, dass sie nur per PN verschickt werden können...⁉️

          Dass ich die Version im Netz schon soweit personalisiert habe, dass ich sie nicht frei verbreiten darf, ohne dass die Interessenten zustimmen?

          Auf meinem Local Host habe ich noch die Urversion. Wenn ich Zeit dazu finde und eine freie Domain, lade ich das Material dort gerne hoch.

          BTW:
          ich finde diese Art der subtilen Angriffe grundsätzlich ekelhaft. Ich wüsste mich dagegen zur Wehr zu setzen, möchte aber im Sinne des Forumsfriedens darauf verzichten.

          Wenn Du mir helfen magst, sende ich Dir gerne die URL über die private Mitteilungsfunktion des Forums. Wenn etwas sinnvolles dabei herauskommen sollte, spendiere ich gerne eine nachhaltige URL (Domain mit Pfad) für die (neutralen) Ergebnisse. Soviel Datenschutz muss einfach bleiben!

          Und wenn es sich auf grundsätzliche Erkenntnisse eindampfen ließe, würde man nachher Ross und Reiter im Wiki nennen können und dürfen. Momentan operiere ich aber am offenen Herzen.

          Liebe Grüße
          Tom S.

          -- Es gibt nichts Gutes, außer man tut es
          Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
          1. Aloha ;)

            Du missverstehst mich auf ganzer Linie 😉

            Wenn du mir jetzt noch erklärst, was an …

            frei verwendbare Tutorials und Skripte für CSS-Slideshows

            … so privat ist, dass sie nur per PN verschickt werden können...⁉️

            Dass ich die Version im Netz schon soweit personalisiert habe, dass ich sie nicht frei verbreiten darf, ohne dass die Interessenten zustimmen?

            Es ging doch gar nicht um deine personalisierten Versionen, sondern um die frei verwendbaren Tutorials und Skripte!!

            BTW:
            ich finde diese Art der subtilen Angriffe grundsätzlich ekelhaft. Ich wüsste mich dagegen zur Wehr zu setzen, möchte aber im Sinne des Forumsfriedens darauf verzichten.

            Der Sinn dieses „subtilen Angriffs“ war nur, dich darauf hinzuweisen, dass du schief gewickelt warst, worum genau es ging, weil du (offensichtlich) die Sachen im Kopf hattest, die du schon personalisiert hast, und eben nicht die Tutorials und Skripte aus dem Netz, die Gunnar sehen wollte.

            Ich wollte dich damit weder angreifen noch verletzen, sondern lediglich (durch das doppelte Zitat) nochmal darauf hinweisen, was Gunnar sehen wollte. Schade, dass es so angekommen ist.

            Grüße,

            RIDER

            -- Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller

            # Twitter # Steam # YouTube # Self-Wiki #

            Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
            1. Hello,

              das ändert aber nichts am Forumsproblem, dass ich keine privaten Meldungen mehr schicken kann.

              Könnte ich, dann wären wir hier spurweise schon weiter und ich wüsste, was ich z. B. auf welchem Pfad von http://getskript.de veröffentlichen könnte.

              Liebe Grüße
              Tom S.

              -- Es gibt nichts Gutes, außer man tut es
              Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
              1. Aloha ;)

                das ändert aber nichts am Forumsproblem, dass ich keine privaten Meldungen mehr schicken kann.

                Da hast du natürlich Recht. Um das für @Christian Kruse nochmal zu präzisieren:

                Der Aufruf von https://forum.selfhtml.org/mails/new führt zur „Es ist etwas schiefgelaufen“-Meldung.

                Grüße,

                RIDER

                -- Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller

                # Twitter # Steam # YouTube # Self-Wiki #

                Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
                1. Hi,

                  das ändert aber nichts am Forumsproblem, dass ich keine privaten Meldungen mehr schicken kann.

                  Da hast du natürlich Recht. Um das für @Christian Kruse nochmal zu präzisieren:

                  Der Aufruf von https://forum.selfhtml.org/mails/new führt zur „Es ist etwas schiefgelaufen“-Meldung.

                  Kann ich nicht bestätigen, konnte gerade eine Nachricht an TS verschicken.

                  cu,
                  Andreas a/k/a MudGuard

                  1. Aloha ;)

                    Der Aufruf von https://forum.selfhtml.org/mails/new führt zur „Es ist etwas schiefgelaufen“-Meldung.

                    Kann ich nicht bestätigen, konnte gerade eine Nachricht an TS verschicken.

                    Jetzt gehts bei mir auch wieder. Entweder stillschweigend gefixed oder ein Teilsystem war temporär ausgefallen, denke ich.

                    Grüße,

                    RIDER

                    -- Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller

                    # Twitter # Steam # YouTube # Self-Wiki #

                    Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
                    1. Hi,

                      Jetzt gehts bei mir auch wieder. Entweder stillschweigend gefixed oder ein Teilsystem war temporär ausgefallen, denke ich.

                      Poststreik! 😉

                      cu,
                      Andreas a/k/a MudGuard

    2. Hallo Gunnar,

      im Netz gibt es einige sehr gut funktionierende frei verwendbare Tutorials und Skripte für CSS-Slideshows.

      Magst du welche zeigen? Um es vorwegzunehmen: „gut funktionierend“ bedeutet:

      • tastaturbedienbar
      • screenreader-bedienbar, d.h. ARIA-Attribute werden richtig gesetzt.

      Nein, gut funktionierend, bedeutet in diesem Sinne, "gut funktionierend" 😉
      Es muss nicht immer alles barrierefrei sein, sofern es nur einen optischen Effekt hat. Das Auge isst mit, wie es so schön heißt und viele Kunden mögen diese Spielerei. Also was solls, tut keinem weh.

      „Nicht notwendig“ wie in Should I use a carousel dot com

      Schon lustig, dieser Link. Prangern, in deren realitätsfernen/nurunseremeinungzählt/nichtkundenorientierten Ansicht, solche Spielereien an, aber ausgerechnet denen ihr Slider ist dumm konzipiert, weil er zu schnell läuft bzw. sich nicht anhalten lässt. So muss man immer mühselig zurück klicken um wirklich ausführlich lesen zu können.

      Leider haben die aber auch noch alle die Macke, dass man auf schwächeren Systemen während der Animation in einer Seite kaum noch mit Bedienerhandlungen (z. B. Eingabe einer neuen URL, Umschalten auf anderen Link) dazwischen kommt.

      Ist das ein allgemeines Problem von CSS-Animationen?

      Nicht, dass ich wüsste.

      Doch ab und zu schon, wenn große Bilder und in Kombi mit Transform. Hatte das auch mit diversen Scripten aus dem Netz, meistens aufwendig und mit Jquery und anderen Frameworks. Bin aus diesem Grund dann auch dazu übergegangen das selbst zu coden, ist zwar deshalb etwas resourceschonender aber dennoch springt dabei oft mein Lüfter an, was er sonst eher selten macht.

      Gruss
      Henry

      1. @@Henry

        • tastaturbedienbar
        • screenreader-bedienbar, d.h. ARIA-Attribute werden richtig gesetzt.

        Nein, gut funktionierend, bedeutet in diesem Sinne, "gut funktionierend"

        „Gut funktionierend“ bedeutet: für alle funktionierend.

        Es muss nicht immer alles barrierefrei sein

        Im Web schon, wenn die Seite/Anwendung „gut funktionieren“ soll.

        sofern es nur einen optischen Effekt hat.

        Visuell ansprechende Darstellung und Barrierefreiheit schließen sich nicht aus.

        „Nicht notwendig“ wie in Should I use a carousel dot com

        Schon lustig, dieser Link. Prangern, in deren realitätsfernen/nurunseremeinungzählt/nichtkundenorientierten Ansicht, solche Spielereien an, aber ausgerechnet denen ihr Slider ist dumm konzipiert, weil er zu schnell läuft bzw. sich nicht anhalten lässt.

        Nein, das ist ausgesprochen klug konzipiert, weil sie damit eben die Schwachstellen von Karussellen verdeutlichen.

        Du hast erkannt, dass es keine optimale Geschwindigkeit bei der automatischen Weiterschaltung geben kann? Was für die eine zu schnell ist, ist für den anderen zu langsam.

        So muss man immer mühselig zurück klicken um wirklich ausführlich lesen zu können.

        Das war wohl geplant. Und sag nicht, dass das bei Karussellen im RL anders wäre.

        LLAP 🖖

        -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
        1. Hallo Gunnar,

          „Gut funktionierend“ bedeutet: für alle funktionierend.

          obwohl ich es unfassbar faszinierend finde, was Sehbehinderte leisten könne, sehe ich es nicht so, dass alles für diese Gruppe funktionieren muss. Oder muss man Treppen generell verbieten und nur Aufzüge erlauben?

          Es muss nicht immer alles barrierefrei sein

          Im Web schon, wenn die Seite/Anwendung „gut funktionieren“ soll.

          Warum? Ein optisches Highlight ist lediglich Design, nichts funktionelles. Sollte man denn dann nicht auch Bilder abschaffen im Netz? (Ja ich weiß, es gibt fühlbare Screens... aber wer nutzt die und wie nah kommt die tatsächliche Wahrnehmung)

          sofern es nur einen optischen Effekt hat.

          Visuell ansprechende Darstellung und Barrierefreiheit schließen sich nicht aus.

          Aber Aufwand/Nutzen stehen dabei oft im Unverhältnis.

          Nein, das ist ausgesprochen klug konzipiert, weil sie damit eben die Schwachstellen von Karussellen verdeutlichen.

          glaube nicht, dass dieser Fehler beabsichtigt war, sonst würde er bei den "Pseudo"-Gründen dort auch zu lesen sein.

          Du hast erkannt, dass es keine optimale Geschwindigkeit bei der automatischen Weiterschaltung geben kann? Was für die eine zu schnell ist, ist für den anderen zu langsam.

          Wer nutzt denn bitteschön Slider für Textdarstellung? In der Regel wohl eher für Bilder. Und wenn schon Text, dann ein einfacher Stopmechanismus, dürfte wohl kein Thema sein.

          So muss man immer mühselig zurück klicken um wirklich ausführlich lesen zu können.

          Das war wohl geplant. Und sag nicht, dass das bei Karussellen im RL anders wäre.

          Wie gesagt, bestimmt nicht geplant, und im Netz sind es meistens unwichtige Bilder, die das Ganze nur aufhübschen. Das die dort das Ganze mit den blinkenden Gimmicks der Frühzeit vergleichen, halte ich für realitätsfern. Sehr vielen Usern gefällts, den Kunden gefällts, das war bei BLINK-Schrott nicht so.

          Nur mal so aus Interesse, kannst Du einige Beispiele/Webseiten von renommierten Firmen (nicht Programmierer.. da gäbe es zwar einige schöne(wäre aber nicht objektiv), die meisten allerdings hässlich) zeigen, die für die meisten User folgende Assoziationen auslöst: (professionell, ästhetisch, einladend, seriös, unterhaltsam) und zugleich deinen Barriereansprüchen absolut genügt?

          Gruss
          Henry

          1. @@Henry

            obwohl ich es unfassbar faszinierend finde, was Sehbehinderte leisten könne, sehe ich es nicht so, dass alles für diese Gruppe funktionieren muss.

            Eine Bildbearbeitung wie Photoshop vielleicht nicht. Bei Videoschnitt sieht das schon anders aus: Auch ein Blinder/Sehschwacher könnte ein Vortragsvideo anhand der Tonspur bearbeiten wollen.

            Oder muss man Treppen generell verbieten und nur Aufzüge erlauben?

            Nein. Treppen und Aufzüge bauen.

            Und zwar so, dass die Aufzüge einfach zu erreichen sind. Geschichte von Laura Carvajal und ihrer Tochter im Einkaufszentrum (Video ab 3:14, englisch):

            T: „Wie kommt jemand im Rollstuhl nach oben?“
            L: „Da ist irgendwo ein Fahrstuhl.“
            T: „Wo ist der denn?“
            [L. zeigt zum anderen Ende des Einkaufszentrums]
            T: „Jemand im Rollstuhl muss also den ganzen Weg dahin fahren und oben den ganzen Weg wieder zurück? Das ist nicht fair!

            “Children have a way of seeing things for what they are.” Kinder sehen mitunter mehr. Kinder an die Macht!

            “Accessibility…is about ensuring that the access you provide is fair for everyone.”

            Es muss nicht immer alles barrierefrei sein

            Im Web schon, wenn die Seite/Anwendung „gut funktionieren“ soll.

            Warum? Ein optisches Highlight ist lediglich Design, nichts funktionelles.

            Wenn die Inhalte im Karussell des tatsächlich nur wechselnde Hinkucker sind … Der Wechsel des Alternativtextes von "" zu "" muss sicher nicht bekanntgegeben werden.

            Zu beachten wäre hier, dass der automatische Wechsel von Bildern für manche Nutzer verstörend ist. Aber dagegen kann man vielleicht mit @media (prefers-reduced-motion: reduce) was machen.

            Oft sind in einem Karussell aber tatsächlich Inhalte untergebracht. Dann sollte die Umschaltung und Präsentation (nicht nur die visuelle) barrierefrei funktionieren.

            Visuell ansprechende Darstellung und Barrierefreiheit schließen sich nicht aus.

            Aber Aufwand/Nutzen stehen dabei oft im Unverhältnis.

            Das „Unverhältnis“ ist meist keins:

            1. Barrierefreiheit kommt mehr Nutzern zugute als man denkt. Eigentlich allen.
            2. Mehr Nutzer → mehr Gewinn.
            3. Etwas barrierefrei zu implementieren ist nicht aufwendiger (eher im Gegenteil).

            Siehe Nachdenkliches zum Wochenende.

            Wer nutzt denn bitteschön Slider für Textdarstellung?

            Mehr als man denken mag.

            LLAP 🖖

            -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
            1. Hallo Gunnar,

              Oder muss man Treppen generell verbieten und nur Aufzüge erlauben?

              Nein. Treppen und Aufzüge bauen.

              Dachte ich mir schon, dass du das so siehst 😉 Dann frage ich mal anders, wenn in einem Lokal alles ebenerdig ist, aber eine Treppe hinauf nur zu einem Laufband führt, wäre dann der Aufzug wirklich sinnvoll?

              Übrigens, und das ärgert mich sehr, weiß auch nicht, warum das erlaubt ist, das Cafe Extrablatt in Krefeld ist riesengroß über drei Etagen und kein Aufzug, das mag bestenfalls noch ignorant sein, aber die Toilette befindet sich (natürlich super für ältere und gehbehinderte Menschen) oben. Als ich das kritisierte, sagte man mir dort, das zuständige Amt erlaube keine Toilette unten, weil dort der Küchenbereich ist. Wer dort auch immer schuld haben mag, für mich Grund genug den Laden zu meiden. Komisch nur, dass sich so viele Menschen sozial engagieren und vieles in dieser Richtung kritisieren, dort aber fröhlich verweilen, ohne zum Boykott aufzurufen.

              Wenn die Inhalte im Karussell des tatsächlich nur wechselnde Hinkucker sind … Der Wechsel des Alternativtextes von "" zu "" muss sicher nicht bekanntgegeben werden.

              Genau, so meinte ich es.

              Oft sind in einem Karussell aber tatsächlich Inhalte untergebracht. Dann sollte die Umschaltung und Präsentation (nicht nur die visuelle) barrierefrei funktionieren.

              Dürfte eher die Ausnahme sein, aber wenn, dann natürlich für jeden zugänglich.

              Wer nutzt denn bitteschön Slider für Textdarstellung?

              Mehr als man denken mag.

              Beispiele?

              Gruss
              Henry

              1. @@Henry

                Wer nutzt denn bitteschön Slider für Textdarstellung?

                Mehr als man denken mag.

                Beispiele?

                Beispiel

                LLAP 🖖

                -- “When UX doesn’t consider all users, shouldn’t it be known as ‘Some User Experience’ or... SUX? #a11y” —Billy Gregory
                1. Hallo Gunnar,

                  Wer nutzt denn bitteschön Slider für Textdarstellung?

                  Mehr als man denken mag.

                  Beispiele?

                  Beispiel

                  .. und die hätten es mal lieber bleiben lassen. 😉 Kurze Zweizeiler in riesiger Box? Na ja zumindest sind die "Inhalte" einzeln ansprechbar und damit lesbar. Aber mit Beispiele meinte ich natürlich etablierte Webseiten.

                  Gruss
                  Henry

  2. Aloha ;)

    Leider haben die aber auch noch alle die Macke, dass man auf schwächeren Systemen während der Animation in einer Seite kaum noch mit Bedienerhandlungen (z. B. Eingabe einer neuen URL, Umschalten auf anderen Link) dazwischen kommt.

    Ist das ein allgemeines Problem von CSS-Animationen?

    Ich glaube eher, dass das ein allgemeines Problem von schwächeren Systemen ist. Man darf nicht vergessen, dass die Systemanforderungen von Browsern stetig wachsen. Das schließt auch Animationen mit ein - wahrscheinlich wäre die Unbedienbarkeit auch bei JS-basierten Animationen gegeben, einfach weil das „schwächere System“ eben nicht so gut auf Animationen zu sprechen ist.

    Grüße,

    RIDER

    -- Camping_RIDER a.k.a. Riders Flame a.k.a. Janosch Zoller

    # Twitter # Steam # YouTube # Self-Wiki #

    Selfcode: sh:) fo:) ch:| rl:) br:^ n4:? ie:% mo:| va:) js:) de:> zu:} fl:( ss:) ls:[
  3. Ist das ein allgemeines Problem von CSS-Animationen?

    Eigentlich nicht. Die Chrome DevTools bieten jede Menge Werkzeuge zur Analyse der Performance an. Du musst vermutlich die Rendering Performance unter die Lupe nehmen. Falls du das noch nie gemacht hast, das Chrome Team hat eine umfassende Anleitung dazu geschrieben. Leicht ist das allerdings nicht, vor allem nicht die ersten Male. Es braucht ein wenig Übung bis man die Werte zu interpretieren weiß.

    Sollte man dafür im Animationsraster irgendwelche Lücken vorsehen und wenn ja, wie kann man das realisieren?

    Was verstehst du unter einem Animationsraster?

    Ich habe eine davon im Netz stehen. Die ist aber schon für die Interessenten teilweise personalisiert. Ich möchte die hier nicht öffentlich verlinken.

    Weil du Angst hast, dass das hier als Eigenwerbung negativ aufgewasst werden könnte? Brauchst du nicht. Du könntest auch ein reduziertes Testbeispiel fürs Forum basteln und dafür einen der vielen Code Playgrounds aus dem Internet benutzen.

    1. Hello,

      Was verstehst du unter einem Animationsraster?

      Es werden hier mehrere Animationen verschachtelt. Die sind aber so aufgebaut, dass bei fünf Animationen vier davon gerade eine Pause haben müssten, während die fünfte läuft.

      Weil du Angst hast, dass das hier als Eigenwerbung negativ aufgefasst werden könnte?

      Nicht wirklich. Ich habe die ja auch von jemand als (freies) Sample bekommen und dann nur weiterverwendet. Dabei sind die beschriebenen Probleme auch schon im Original vorhanden. Ich habe das beispiel nur gekürzt und personalisiert.

      Das hat mich ja überhaupt nur zu der Kernfrage gebracht, ob CSS-Animationen allgemein die Browser so stark von der Arbeit abhalten können, dass die ihre sonstigen Obliegenheiten nur noch mangelhaft bedienen? Mehr wollte ich fürs erste auch nicht wissen. :-)

      Liebe Grüße
      Tom S.

      -- Es gibt nichts Gutes, außer man tut es
      Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
      1. Es werden hier mehrere Animationen verschachtelt. Die sind aber so aufgebaut, dass bei fünf Animationen vier davon gerade eine Pause haben müssten, während die fünfte läuft.

        Okay, das hilft mir ohne Demo leider trotzdem nicht besonders weiter.

        Das hat mich ja überhaupt nur zu der Kernfrage gebracht, ob CSS-Animationen allgemein die Browser so stark von der Arbeit abhalten können, dass die ihre sonstigen Obliegenheiten nur noch mangelhaft bedienen? Mehr wollte ich fürs erste auch nicht wissen. :-)

        Klar kann das passieren. Das war dir doch schon vor der Frage klar: wenn du zentillionen HTML-Elemente unabhängig über den Bildschirm bewegen willst, dann zwingst du deinen Browser damit in die Knie. Das liegt an der unvermeidbaren Komplexität des Problems. Wenn deine Diashow die Reaktionsfähigkeit der Benutzeroberfläche aber spürbar negativ beeinflusst, dann liegt es nicht an der Schwierigkeit ein paar Bilder zu bewegen. Dann gibt es vermutlich irgndwo ein Optimierungspotenzial, das man aufdecken kann.

        1. Hello,

          Klar kann das passieren. Das war dir doch schon vor der Frage klar: wenn du zentillionen HTML-Elemente unabhängig über den Bildschirm bewegen willst, dann zwingst du deinen Browser damit in die Knie. Das liegt an der unvermeidbaren Komplexität des Problems. Wenn deine Diashow die Reaktionsfähigkeit der Benutzeroberfläche aber spürbar negativ beeinflusst, dann liegt es nicht an der Schwierigkeit ein paar Bilder zu bewegen. Dann gibt es vermutlich irgndwo ein Optimierungspotenzial, das man aufdecken kann.

          Ich werde mich bemühen, dem Problem auf die Fährte zu kommen. Soweit da hier im Forum Interesse bestehen bleibt, bitte ich darum, auf meine Mitteilung zu einer URL zu warten. Da es sich prinzipell um ein passives Beispiel (Only Frontend) handelt, müsste das also möglich sein. Ich will nur vorher nochmal die Lizenzbedingungen studieren. "Weiterverwendung" ist etwas anderers, als "Weiterverbreitung".

          Liebe Grüße
          Tom S.

          -- Es gibt nichts Gutes, außer man tut es
          Andersdenkende waren noch nie beliebt, aber meistens diejenigen, die die Freiheit vorangebracht haben.
      2. Servus!

        Was verstehst du unter einem Animationsraster?

        Es werden hier mehrere Animationen verschachtelt. Die sind aber so aufgebaut, dass bei fünf Animationen vier davon gerade eine Pause haben müssten, während die fünfte läuft.

        Ich glaube, dass hier der Denkfehler ist. Ich nehme an, du willst nur eine Animation mit 5 Elementen haben und nicht fünf verschiedene.

        Nicht wirklich. Ich habe die ja auch von jemand als (freies) Sample bekommen und dann nur weiterverwendet. Dabei sind die beschriebenen Probleme auch schon im Original vorhanden.

        Also doch!

        Das hat mich ja überhaupt nur zu der Kernfrage gebracht, ob CSS-Animationen allgemein die Browser so stark von der Arbeit abhalten können, dass die ihre sonstigen Obliegenheiten nur noch mangelhaft bedienen? Mehr wollte ich fürs erste auch nicht wissen. :-)

        CSS-animations ist nativ im Browser und daher schnell, WAAPI (Web Animations API) nutzt auch CSS-animations.

        Wir haben freie Tutorials, auf die auch hingewiesen werden kann und darf:

        Herzliche Grüße

        Matthias Scharwies

        -- Es gibt viel zu tun: ToDo-Liste
  4. Hello,

    Link zur Demo

    Liebe Grüße
    Tom S.

    -- Es gibt nichts Gutes, außer man tut es.
    Leben ist das, was passiert, wenn Du gerade andere Pläne machst.
    1. Link zur Demo

      Ich hab da nur einen kurzen Blick draufgeworfen und nur festgestellt, dass Demo 3 die einzige Variante, bei der in jedem Frame Rasterization fällig wird, die ist also rechenintensiver als der Rest.

      Ich war jetzt nicht besonders sorgfältig, mit hoher Wahrscheinlichkeit ist mir den 10 Minuten auch etwas entgangen, aber mehr Freizeit möchte ich dafür auch nicht aufwenden. An deiner Stelle würde ich nochmal ohne Hardware-Beschleunigung und mit CPU-Throttling profilen, das dürfte auf aufschlussreicher sein. Außerdem solltest du auch mal gezielt die Browser überprüfen, die mit der Animation ihre Schwierigkeiten haben, ich habe nur mit Chrome gemessen.