Traumhaft geschmeidige PAGE TRANSITIONS
lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript
animation
arbeit
aufbauen
auge
beispiel
bild
demo
effekt
erstellen
gegend
gestalten
grund
inhalt
jahr
laden
layout
objekt
passieren
problem
url
-
Ahoi,
prinzipiell war ich auf der Suche nach etwas, das einerseits diese hässlichen Übergänge zwischen einzelnen Seiten verschönert (ohne auf SPA umzusteigen, ich persönlich halte sehr wenig davon), und andererseits den schrecklichen Ladevorgang (also wenn die Elemente der Seite aufpoppen und hin- und hergeschoben werden) unsichtbar macht bzw. zumindest kaschiert.
Vor einiger Zeit habe ich dann das hier gefunden:
https://css-tricks.com/add-page-transitions-css-smoothstate-js/
Demo:
http://miguel-perez.github.io/smoothState.js/index.html
Ich muss euch ganz ehrlich sagen: Ich bin total begeistert davon! Die Demo läuft selbst bei mir in der Arbeit auf langsamen PCs total flüssig und ohne Ruckler! Und es sieht einfach nur geil aus
Ich habe noch nichts davon in meiner eigenen Website eingebaut, da mir schlicht und einfach die Zeit bis jetzt gefehlt hat (und auch noch weiterhin fehlen wird...). Dennoch wollte ich euch vorerst fragen, was ihr hiervon haltet.
Ist diese Lösung aus rein technischer Sicht sinnvoll? Ist dies realisierbar? So wie ich das sehe werden die Seiten via AJAX geladen...
Gefällt es euch? Könnt ihr etwas anderes empfehlen, falls nicht?
LG,
ila
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
ilavicion schrieb:
Ich muss euch ganz ehrlich sagen: Ich bin total begeistert davon! Die Demo läuft selbst bei mir in der Arbeit auf langsamen PCs total flüssig und ohne Ruckler! Und es sieht einfach nur geil aus
Ist diese Lösung aus rein technischer Sicht sinnvoll? Ist dies realisierbar? So wie ich das sehe werden die Seiten via AJAX geladen...
Gefällt es euch? Könnt ihr etwas anderes empfehlen, falls nicht?
Ich würde dabei nach zwei oder drei Übergängen fluchtartig
die Seite verlassen
Ich kämpfe schon seit Windows 95 Don-Quixote-gegen-Windmühlen-artig gegen zeit- und rechenleistungschluckende, von Arbeit und Inhalt ablenkende Animationen. Dass das jetzt auch im Web anfängt - oh Himmel, nein !! (und damit genug aus der Abteilung "Get off my lawn" ... )
Die Demo finde ich nicht so richtig aufschlussreich, da die Seiten, zwischen denen die Überblenden gemacht werden, extrem einfach gestrickt sind. Keine Bilder drin, keine komplex ineinander verschachtelten Elemente ... Was wohl mit der Animation passieren würde, wenn die Seiten beide die Komplexität z.B. dieser Forenseite hätten ?
H. -
hddg schrieb:
Ich würde dabei nach zwei oder drei Übergängen fluchtartig
die Seite verlassen
Ich kämpfe schon seit Windows 95 Don-Quixote-gegen-Windmühlen-artig gegen zeit- und rechenleistungschluckende, von Arbeit und Inhalt ablenkende Animationen. Dass das jetzt auch im Web anfängt - oh Himmel, nein !! (und damit genug aus der Abteilung "Get off my lawn" ... )
Die Demo finde ich nicht so richtig aufschlussreich, da die Seiten, zwischen denen die Überblenden gemacht werden, extrem einfach gestrickt sind. Keine Bilder drin, keine komplex ineinander verschachtelten Elemente ... Was wohl mit der Animation passieren würde, wenn die Seiten beide die Komplexität z.B. dieser Forenseite hätten ?
H.
Dass die 0,3s dauernde Animation von "Arbeit und Inhalt ablenkt" meinst du ja wohl bitte nicht ernst. Versteh mich nicht falsch, ich bin total auf deiner Seite. Lang andauernde und komplexe Übergänge verabscheue ich zutiefst, jedoch nicht derart simpel gestrickte und sehr kurze Animationen... Die begrüße ich aus oben genannten Gründen sogar sehr. Für mich gibt es nichts schlimmeres als wenn ich bei einer Website zwischen Seiten hin- und herwechsle, und ich ständig dieses hässliche "Seiten-aufbauen" mit ansehen muss, wo alles zuckt und blinkt und hässlich durch die Gegend fliegt. Absolutes No-Go in meinen Augen.
Bezüglich der Demo gebe ich dir Recht. Was passiert wenn man komplexere Seiten lädt, habe ich mich auch schon gefragt.
Beitrag zuletzt geändert: 5.11.2015 15:08:24 von ilavicion -
ilavicion schrieb
Dass die 0,3s dauernde Animation von "Arbeit und Inhalt ablenkt" meinst du ja wohl bitte nicht ernst. Versteh mich nicht falsch, ich bin total auf deiner Seite.
Sorry wenn der Sarkasmus nicht so heftig vom Bildschirm triefte, wie ich das eigentlich beabsichtigt hatte (dachte, dass der Verweis auf den "Ritter von der traurigen Gestalt" {der war in seiner Zeit eine Satire auf historisierende, die Vergangenheit verfälschende und verherrlichende Erzählungen} und "Get off my lawn" {David Letterman in Parodie auf ältere Leute, die Kinder aus ihrem Garten verscheuchen, ist im amerikanischem Englisch eine stehende Redewendung für altersstarrsinnige Miesmacherei ...} meine Absicht klar machen. Andererseits war ich mit WindowMaker (Fenstermanager unter X11, der sich in Look-and-Feel an NextStep anlehnt) erst so richtig glücklich nach dem ich ihm die 0,1s Animation beim Fensteröffnen abgewöhnt hatte ...
ilavicion schrieb
Lang andauernde und komplexe Übergänge verabscheue ich zutiefst, jedoch nicht derart simpel gestrickte und sehr kurze Animationen... Die begrüße ich aus oben genannten Gründen sogar sehr. Für mich gibt es nichts schlimmeres als wenn ich bei einer Website zwischen Seiten hin- und herwechsle, und ich ständig dieses hässliche "Seiten-aufbauen" mit ansehen muss, wo alles zuckt und blinkt und hässlich durch die Gegend fliegt. Absolutes No-Go in meinen Augen.
Das ist der Grund, warum ich meistens Links in neuen Tabs öffne. Da ist ein Wechsel zwischen alter und neuer Seite nur ein 'strg-tab' und bis ich tatsächlich -- nach zu Ende lesen der einen Seite -- zur Anderen wechsele, sollte die mit dem Laden fertig sein ...
Ausserdem sollte bei vernünftig geschriebenen Seiten nichts zappeln. Das kann nur passieren, wenn entweder Bilder ohne Grössenangaben verwendet werden (Pfui!) oder wenn man im Nachhinein das Layout per JS verändert (Doppel-und-dreifach-PFUI!!).
H. -
ilavicion schrieb:
Für mich gibt es nichts schlimmeres als wenn ich bei einer Website zwischen Seiten hin- und herwechsle, und ich ständig dieses hässliche "Seiten-aufbauen" mit ansehen muss, wo alles zuckt und blinkt und hässlich durch die Gegend fliegt. Absolutes No-Go in meinen Augen.
Wenn auf deinen Seiten "alles zuckt und blinkt und hässlich durch die Gegend fliegt", dann musst du einfach deine Seiten fixen, statt diese üblen Effekte mit Überblend-Skripten kaschieren zu wollen.
-
hddg schrieb:
Sorry wenn der Sarkasmus nicht so heftig vom Bildschirm triefte, wie ich das eigentlich beabsichtigt hatte (dachte, dass der Verweis auf den "Ritter von der traurigen Gestalt" {der war in seiner Zeit eine Satire auf historisierende, die Vergangenheit verfälschende und verherrlichende Erzählungen} und "Get off my lawn" {David Letterman in Parodie auf ältere Leute, die Kinder aus ihrem Garten verscheuchen, ist im amerikanischem Englisch eine stehende Redewendung für altersstarrsinnige Miesmacherei ...} meine Absicht klar machen. Andererseits war ich mit WindowMaker (Fenstermanager unter X11, der sich in Look-and-Feel an NextStep anlehnt) erst so richtig glücklich nach dem ich ihm die 0,1s Animation beim Fensteröffnen abgewöhnt hatte ...
Alles klar
Sarkasmus ist für mich (oder generell?) in textueller Form schwer heraus zu kristallisieren, vor allem im Internet. Deshalb gehe ich prinzipiell nicht davon aus dass jemand Sarkasmus benutzt
Don Quichotte kenne ich natürlich, und das mit David Letterman konnte ich durch Google herausfinden. Ich ging ehrlichgesagt davon aus dass du dies ernst meintest
hddg schrieb:
Ausserdem sollte bei vernünftig geschriebenen Seiten nichts zappeln. Das kann nur passieren, wenn entweder Bilder ohne Grössenangaben verwendet werden (Pfui!) oder wenn man im Nachhinein das Layout per JS verändert (Doppel-und-dreifach-PFUI!!).
H.
annihilus schrieb:
Wenn auf deinen Seiten "alles zuckt und blinkt und hässlich durch die Gegend fliegt", dann musst du einfach deine Seiten fixen, statt diese üblen Effekte mit Überblend-Skripten kaschieren zu wollen.
lima-city
ebay
apple
facebook
Nur um mal ein paar populäre Beispiele aufzuzeigen, an denen mir solche Hässlichkeiten auffallen. Es kann sein dass ich diesbezüglich total überempfindlich bin und ich den Eindruck erwecke, überzureagieren. Ich weiß es nicht. Aber ich persönlich lege sehr viel Wert auf Flüssigkeit und Geschmeidigkeit. Das ist übrigens auch der Grund weshalb ich Android Geräte zutiefst verabscheue. Die schaffen es nicht mal die Menüführung ruckelfrei zu gestalten.
Worauf ich aber eigentlich hinaus wollte: Wollt ihr mir ernsthaft weismachen, dass keines dieser (teils milliardenschwere) Unternehmen es geschafft hat eine vernünftige Seite zu erstellen? Ich bin beim besten Willen kein professioneller Webdesigner und lass mich gerne eines Besseren belehren, aber dieser hässliche Seitenaufbau scheint nach wie vor nicht trivial gelöst werden zu können, und das im Jahre 2015...
Edit: Außerdem habe ich alle Bilder mit Größenangaben versehen (wird ja schon bei w3schools gepredigt
), und ich verändere das Layout nicht per JS 
Was ich konkret meine: Bei meiner Seite sehe ich wie die Seite aufgebaut wird, und dass gewisse margins erst nach und nach aktiviert werden, obwohl das Objekt schon irgendwo anders angezeigt wird. Der Effekt ist, dass das Objekt beginnt hin- und herzuhüpfen. Ist das nicht normal?
Beitrag zuletzt geändert: 5.11.2015 17:40:51 von ilavicion -
ilavicion schrieb:
lima-city
ebay
apple
facebook
Nur um mal ein paar populäre Beispiele aufzuzeigen, an denen mir solche Hässlichkeiten auffallen. Es kann sein dass ich diesbezüglich total überempfindlich bin und ich den Eindruck erwecke, überzureagieren. Ich weiß es nicht. Aber ich persönlich lege sehr viel Wert auf Flüssigkeit und Geschmeidigkeit. Das ist übrigens auch der Grund weshalb ich Android Geräte zutiefst verabscheue. Die schaffen es nicht mal die Menüführung ruckelfrei zu gestalten.
Worauf ich aber eigentlich hinaus wollte: Wollt ihr mir ernsthaft weismachen, dass keines dieser (teils milliardenschwere) Unternehmen es geschafft hat eine vernünftige Seite zu erstellen? Ich bin beim besten Willen kein professioneller Webdesigner und lass mich gerne eines Besseren belehren, aber dieser hässliche Seitenaufbau scheint nach wie vor nicht trivial gelöst werden zu können, und das im Jahre 2015...
Edit: Außerdem habe ich alle Bilder mit Größenangaben versehen (wird ja schon bei w3schools gepredigt), und ich verändere das Layout nicht per JS
Was ich konkret meine: Bei meiner Seite sehe ich wie die Seite aufgebaut wird, und dass gewisse margins erst nach und nach aktiviert werden, obwohl das Objekt schon irgendwo anders angezeigt wird. Der Effekt ist, dass das Objekt beginnt hin- und herzuhüpfen. Ist das nicht normal?
Um Deiner Liste mein Lieblingsbeispiel hinzu zu fügen: tagesschau.de, auf einem alten Netbook mit niedriger Bildschirmauflösung (1024x600). Da kommt alles (wahrscheinlich auf Grund einer CSS-mediaquery) zuerst in einer Ansicht, die wohl für's Telefon gedacht ist, bevor dann das JS in der Seite anspringt, merkt das das ja wohl doch ein Computer ist und alles wieder umsortiert. Und genau das -- die mittlerweile recht grosse Vielfalt von Geräten, auf denen man Webseiten betrachten kann -- führt zu solchen Situationen: es wird -- ganz nach 'Best Practices' -- 'mobile first' entworfen und dann 'at runtime' umgebaut. Anstatt die Entscheidung an Hand des User Agents im HTTP-Request zu treffen und auf dem Server die zum Client passende Seite zusammen zu setzen, wird eine Seite an alle verschickt, die sich dann eben nach dem Laden selbst zurecht biegt. Weniger Serverlast => billiger für den Anbieter. Macht bei mehreren Mio Zugriffen am Tag ('Gesichtsbuch') sicher einiges aus.
H -
ilavicion schrieb:
Es kann sein dass ich diesbezüglich total überempfindlich bin und ich den Eindruck erwecke, überzureagieren. Ich weiß es nicht. Aber ich persönlich lege sehr viel Wert auf Flüssigkeit und Geschmeidigkeit. Das ist übrigens auch der Grund weshalb ich Android Geräte zutiefst verabscheue. Die schaffen es nicht mal die Menüführung ruckelfrei zu gestalten.
Ja, das denke ich auch, dass das subjektive Empfinden dabei eine große Rolle spielt. Ich versteh zum Beispiel gar nicht, was hier bei lima-city hüpfen und springen soll (Bei der Tagesschau nebenbei auch nicht, aber ich hab da jetzt auch nicht die erwähnte niedrige Auflösung und langsame Verbindung getestet). Die Menüleiste oben ist ja eh fest und der content unten wird bei mir in einem Rutsch ausgetauscht. Vielleicht ist das ja anders, wenn die Internetverbindung etwas langsamer ist. Ein übler Sprung entsteht nur, wenn man auf "Tutorials" geht, weil dann nämlich die ganze Seitenaufteilung geändert wird. Das stört mich dann auch, aber die Lösung wäre doch eher, das Seitenlayout anzugleichen statt ein Überblendungsskript einzusetzen...
ilavicion schrieb:
Worauf ich aber eigentlich hinaus wollte: Wollt ihr mir ernsthaft weismachen, dass keines dieser (teils milliardenschwere) Unternehmen es geschafft hat eine vernünftige Seite zu erstellen?
Das hat mit Geld erstmal nichts zu tun. Fast möchte ich behaupten dass das Gegenteil der Fall ist, denn gerade so Firmen wie Apple meinen ja, sie müssten immer besonders schick und mit viel Blingbling daherkommen, und die völlig mit Skripten überfrachtete Seite lädt dann entsprechend lahm. Und die Lösung? Mehr Skripte! Jo, is klar...
Die Frage ist hier einfach, was man unter einer "vernünftigen" Seite versteht. Natürlich könnte man alle erwähnten Seiten sehr viel schneller machen, in dem man auf Schnickschnack verzichtet, nur will das keiner, weils "unmodern" wäre.
ilavicion schrieb:Ich bin beim besten Willen kein professioneller Webdesigner und lass mich gerne eines Besseren belehren, aber dieser hässliche Seitenaufbau scheint nach wie vor nicht trivial gelöst werden zu können, und das im Jahre 2015...
Langsame Seiten gabs schon immer und wirds auch immer geben, das hat mit Technologie erstmal nichts zu tun. Die zunehmende Geschwindigkeit von Internetverbindungen wird einfach durch zunehmende Zumüllung kompensiert. Es gibt keine noch so schnelle Internetanbindung, die durch 20 externe Scriptquellen und 5 Flash-Animationen nicht kleinzukriegen ist. Wer meint er bräuchte sowas, der soll sich nicht beschweren, das ist meine Meinung.
ilavicion schrieb:
Edit: Außerdem habe ich alle Bilder mit Größenangaben versehen (wird ja schon bei w3schools gepredigt), und ich verändere das Layout nicht per JS
Ja genau, und wieso steht das bereits seit Jahrzehnten bei w3schools, selfHTML und allen Seiten dieser Art? Weil Bilder die traditionellen Lade-Verzögerer sind. Diese Rolle "erfüllen" heutzutage aber die großartigen Responsive-Scripte, die - natürlich erst nach Auslieferung der Seite an den Browser, weil dann erst Geräteklasse, Auflösung etc. feststehen, das komplette Teil umbauen. Und eine vorherige Größenangabe kann man dann nicht machen, das ist ja gerade das Problem. Wie kann man das lösen? Gibt zwei Möglichkeiten:
1. Man hält den Content klein. Dann muss zwar immer noch umgebaut werden, aber das geht dann schnell. Das wäre praktikabel, will aber keiner. Keine fünf Videos auf der Startseite? Pfui. Man könnte natürlich "abgespeckte" Seiten für Kleingeräte anbieten, aber dann müsste der Anwender sich ja bemühen, händisch ein /mobile oder ähnliches an die URL zu hängen (das hatten wir ja auch eine Zeitlang genau so). Weil das inzwischen aber inakzeptabel ist, baut man erst im laufenden Betrieb um und hat dann halt das Elend.
2. Der Browser zeigt den Inhalt erst an, wenn er komplett gerendert ist. Auf diese Art sieht der Benutzer den hässlichen Aufbau nicht. Problem dabei: Ein einziges Script, das ewig zum Laden braucht oder vielleicht gar nicht funktioniert, verklemmt eine ganze Seite. Deshalb muss man notgedrungen auch "Zwischenergebnisse" anzeigen.
Und wie genau dieses Problem durch dein Transition-Script gelöst werden soll, verstehe ich eben nicht. Das muss nämlich auch erst auf die Info warten, was wohin verschoben und skaliert werden muss, bevor die enstprechende Animation ausgeführt werden kann. Dass das bei dem extrem simplen Beispiel mit drei Textkästen kein Problem ist, ist eh klar! Wenn aber die Seite voller Krempel ist, wie z.B. bei Apple, dann wird das Ergebnis dadurch im Zweifel eher noch grausiger als besser. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage