Suche animierte Grafik für Homepage

[Mate42]

Hall zusammen!

Ich bin neu hier und hoffe ich bin im richtigen Forum gelandet und dass mir hier jemand weiterhelfen kann. Vielen Dank schon mal für eure Hilfe!

Ich bin gerade dabei, eine neue Firmenhomepage für mein kleines Unternehmen zu planen und stelle gerade nen groben Entwurf zusammen, um den Auftrag mehreren Firmen zuzuschicken. Bin gerade auf der Suche nach Ideen etc. auf diese Seite gestoßen. Wenn ihr auf der Seite nach unten scrollt, kommt ein Abschnitt "In drei Schritten zum Ziel", bei dem durch das weiterscrollen bestimmte Effekte ausgelöst werden bzw. Textfenster erscheinen. Finde ich ne klasse Idee, hab ich auch noch nirgendwo anders gesehen und würde was ähnliches gerne auf meiner Seite mit einbinden.

Ich hab jetzt schon wie ein bekloppter Google mit sämtlichen Umschreibungen des Ganzen bemüht, ich finde aber einfach keine Infos dazu. Kann mir hier vielleicht jemand sagen,
a) wie man sowas nennt
b) wie und mit was man sowas erstellt und einbindet
und c) ob es auch die Möglichkeit gibt, sowas für die für Mobilgeräte optimierte Seite zu erstellen.

Wenn ihr weitere Beispiele für so eine Animation habt nur her damit, wie gesagt bin ich noch auf der Suche nach konkreten Anregungen

[fireweasel]

Ich bin gerade dabei, eine neue Firmenhomepage für mein kleines Unternehmen zu planen und stelle gerade nen groben Entwurf zusammen, um den Auftrag mehreren Firmen zuzuschicken. Bin gerade auf der Suche nach Ideen etc. auf hxxp://www.escriba.de/ gestoßen. Wenn ihr auf der Seite nach unten scrollt, kommt ein Abschnitt "In drei Schritten zum Ziel", bei dem durch das weiterscrollen bestimmte Effekte ausgelöst werden bzw. Textfenster erscheinen. ... hab ich auch noch nirgendwo anders gesehen

Dann hast du entweder bis vor kurzem kein "Internet" gehabt, oder eine sehr lange Zeit ausgesetzt.

Finde ich ne klasse Idee,

Ist es aber nicht.
Es mag Laien für fünf Minuten beeindrucken, hat aber hauptsächlich Nachteile.

und würde was ähnliches gerne auf meiner Seite mit einbinden.

Nur, wenn du deine Kunden ärgern willst.

Ich hab jetzt schon wie ein bekloppter Google mit sämtlichen Umschreibungen des Ganzen bemüht, ich finde aber einfach keine Infos dazu. Kann mir hier vielleicht jemand sagen,
a) wie man sowas nennt

"infinite scrolling", "endless scrolling", manchmal auch "lazy loading" e.t.c. p.p.

b) wie und mit was man sowas erstellt und einbindet

Auf der Client-Seite mit JavaScript: Es muss das "Ende" der Scrollbewegung erkannt und per AJAX|AJAJ die entsprechenden Daten nachgeladen werden. Gängige JavaScript-Frameworks haben dafür eingebaute Funktionen oder Plugins. Auf der Serverseite muss natürlich ein Script die entsprechenden Datenblöcke liefern (aber das ist das kleinste der zu lösenden Probleme).

Beispiel: 5 jQuery Infinite Scrolling Demos
Weitere findest du, wenn du die oben genannten Google-Stichwörter um "how to", "tutorial", usw. ergänzt.

und c) ob es auch die Möglichkeit gibt, sowas für die für Mobilgeräte optimierte Seite zu erstellen.

Diese Technik ist quasi ein Auszeichnungsmerkmal von Web-Seiten, die für Mobilgeräte "optimiert" wurden.

Wenn ihr weitere Beispiele für so eine Animation habt nur her damit, wie gesagt bin ich noch auf der Suche nach konkreten Anregungen

Die konkrete Anregung: Lass es bleiben. Endlos-Scrolling ist nicht nutzerfreundlich.
* Man kann Abschnitte solcher Seiten nicht bookmarken.
* Der Zweck des Zurück-Browser-Buttons geht verloren. Der Neuladen-Button funktioniert oft auch nicht mehr wie erwartet.
* Die Seiten-interne Suche (Ctrl+F) funktioniert nicht mehr erwartungsgemäß (Sie kann ja nur noch einen Teil des gesamten Inhaltes sehen, und der variiert auch noch).
* Der Fußbereich einer Seite wird nicht mehr erreichbar (auf für Deutschland relevanten Seiten stehen da bspw. meist Links zum Impressum).
* Die Dinger müssen ständig das Erreichen des Seitenendes abfragen und belegen mit jedem Nachladevorgang größere Mengen Hauptspeicher. Das kombiniert mit schwachbrüstigen Endgeräten und schlechtem Netz führt eher zu negativen Eindrücken auf End-User-Seite.
* Alles, was JavaScript-basiert ist, kollidiert mit entsprechenden Blocking-Einstellungen der End-User.

Wenn die Suchmaschine deiner Wahl das JavaScript deiner Website nicht wie von dir gewünscht interpretiert, wirst du zusätzliche Links zu den nachladbaren Inhalten anbieten müssen. Dann kannst du auch gleich bei der klassischen "Paginierung" (Aufteilung in einzelne Seiten) bleiben.

Siehe auch:
The UX of Infinite Scroll: The Good, the Bad, and the Maybe
Infinite Scrolling and Accessibility (It’s Usually Bad) | Web Axe
Infinite Scrolling: Let's Get To The Bottom Of This – Smashing Magazine
Außerdem: https://news.ycombinator.com/item?id=9416017
... und natürlich speziell: https://xkcd.com/1309/

[mermshaus]

(Ich kann Sie aus technischen Gründen gerade nicht bewerten, aber das ist mal wieder ein sehr gelungener Beitrag, Herr Weasel. Der xkcd-Cartoon trifft einen Aspekt auch perfekt.)

[Quetschi]

Ich kann auf der vom Threadersteller verlinkten Seite kein infinites scrollen erkennen und es werden auch keine Inhalte via AJAX nachgeladen. Es werden lediglich an bestimmten Scrollpositionen Animationen z.B. von den SVGs durchgeführt.

[fireweasel]

Waypoints, Trigger, Events, Scroll-activated Actions

(Ich kann Sie aus technischen Gründen gerade nicht bewerten,

Das geht mir umgekehrt genauso, seit hier zu wenig ständige Text-Verfasser unterwegs sind, die man mit grünen Punkten bedenken kann.

aber das ist mal wieder ein sehr gelungener Beitrag, Herr Weasel.

Zum Glück hat Quetschi etwas genauer hingesehen ...

Mir fällt gerade auf, dass ich oben bei den Google-Suchlinks auch noch das Wort "bad" mit eingebaut habe. Das erschwert natürlich das Finden von Artikeln mit vorurteilsfreier Betrachtung des Themas.

Ich kann auf der vom Threadersteller verlinkten Seite kein infinites scrollen erkennen und es werden auch keine Inhalte via AJAX nachgeladen.

Guter Einwand. Ich hab zum Zeitpunkt des Verfassens meines Traktats irgendwann den Seiten-Ladevorgang abgebrochen, weil da etwas grün-weiß wackelte und ich nicht wirklich erkennen konnte, was hier dargestellt werden sollte. Ich sah Buzzword-Bingo-würdigen Text und irgendwelche Listen. Da hab ich einfach ins Blaue (oder Grüne?) hinein assoziiert.

Also: Thema verfehlt und durchgefallen? Mal sehen, ob ich mich da noch rauswieseln kann ...

Es werden lediglich an bestimmten Scrollpositionen Animationen z.B. von den SVGs durchgeführt.

Die Kringel um die Zahlen, die sich verändern, wenn man vertikal scrollt?

Der oben verlinkte HN-Thread hat auch dazu kurze Diskussionen:
https://news.ycombinator.com/item?id=9416415
https://news.ycombinator.com/item?id=9416326
Die Bewertung aus Benutzersicht fällt überwiegend negativ aus.

Man kann Endlos-Scrolling als einen Spezialfall dieser Technologie betrachten. Allgemein: Wenn ein bestimmter Bereich sichtbar wird, löse irgendwelche Aktionen aus.

Beim Endlos-Scrollen ist das Ereignis das Erreichen des (vorläufigen) Endes der Seite, was als Aktion das Nachladen weiterer Inhalte auslöst.

Ein einfaches Beispiel erklärt das Funktionsprinzip: javascript - How to start animations when element appears on screen? - Stack Overflow
Ein Beispiel mit jquery und CSS3-Animationen: jquery - Activate CSS3 animation when the content scrolls into view - Stack Overflow
Hier gibts ein (mehrteiliges) Tutorial zur Kombination mit SVG-Animationen: https://ihatetomatoes.net/simple-scrollmagic-tutorial/

Begriffsfindung:

Anscheinend hat sich dafür noch kein knackiger Name etabliert. Vielleicht tuts "scroll-activated animations" oder "scroll-activated moving objects" ...? Sonst bleibt nur, nach dem Ablauf der Aktion zu suchen, wie: "start animation if section becomes visible" ...

Waypoints ist die Vokabel für das Auslösen der Aktion nach "Erreichen" eines HTML-Elements.

--

Meine Zweifel bleiben, ob diese Darstellung (speziell die der im Ausgangspost verlinkten Web-Seite) zu mehr Erfolg bei potenziellen Kunden führt. Ich habe eher den Eindruck, dass hier ein Webdesigner einfach mal gezeigt hat, was er so kann.

... es werden auch keine Inhalte via AJAX nachgeladen.

Stimmt. Aber mein RequestPolicy spielt trotzdem verrückt. Mal zeigt es verlinkte Resourcen an, dann wieder keine. Diesen Effekt hatte ich bisher noch nie beobachtet. Auch ist mir nicht wohl bei dem Gedanken, wenn die Web-Seite von terrabuild.ru ein GIF nachladen möchte. Glücklicherweise ist die Domain "abgelaufen" und der Request läuft ins Leere.

Was noch schlimmer ist: Meine Aufmerksamkeit für dieses Thema verflüchtigt sich langsam (aber sicher). Warum muss stackoverflow.com auch "Hot Network Questions" einblenden, die nichts mit dem Thema zu tun haben, aber wunderbar ablenken können. Wie die hier: I heard Santa's little helper insult me! ...