nicht angemeldet
Gunnar Bittersmann
Gunnar Bittersmann
Gunnar Bittersmann
T-Rex
basti_p
JürgenB
Gunnar Bittersmann
JürgenB
T-Rex
JürgenB
Gunnar Bittersmann
T-Rex
molily
Hi,
ich möchte einen fade-in Effekt beim Klicken auf einen Link erzeugen.
Die zugrunde liegende Mechanik ist simple: Link auf Seite 1. Beim Anklicken wird Seite 2 aufgerufen. Ein normaler <a href=""...> also.
Was ich jetzt aber erreichen möchte ist, dass beim Anklicken des Links von Seite 1 die Seite 2 langsam eingefaded wird.
Hintergrund: Ich stelle mir vor auf der index.html nur das Logo mit einem Slogen anzuzeigen (Positionierung irgendwo oben links). Wenn man dann auf den Link drückt faded die 2. Seite ein wo das Logo/Slogan an genau der gleichen Stelle steht, allerdings mit dem ganzen restlichen Content auf de Seite.
Ja, mag dem ein oder anderen nicht gefallen weil man dann ja extra 1x klicken muss um was auf der Seite zu tun, aber mir gefällts einfach. (Könnte mir noch vorstellen nen zeitlich getriggerten redirect von 1-2 auf der 1. Seite zu hinterlegen. Dann muss der Anwender gar nix tun aber muss halt 1-2 Sekunden warten bis er die Seite "nutzen" kann).
Gibts für sowas css-Boardmittel oder muss ich hier schon auf jquery zurück greifen oder ähnliches? Wichtig wäre mir natürlich, dass es in allen gängigen Browsern läuft.
Danke im Voraus!
@@Gast:
nuqneH
Hintergrund: Ich stelle mir vor
Sätze, die mit „ich“ anfangen, seind beim Designen kaum sinnvoll. Sätzer, die mit „der Nutzer“ anfangen, schon eher.
auf der index.html nur das Logo mit einem Slogen anzuzeigen (Positionierung irgendwo oben links). Wenn man dann auf den Link drückt faded die 2. Seite ein wo das Logo/Slogan an genau der gleichen Stelle steht, allerdings mit dem ganzen restlichen Content auf de Seite.
Kommen Nutzer auf deine Seite, um deinen Slogan zu lesen, oder wegen der Inhalte?
Damit sollte die Frage nach dem Ob geklärt sein und sich die Frage nach dem Wie erübrigt haben.
Qapla'
Immer wieder schön zu lesen wenn andere einem erkären wollen wie man die eigene Seite zu gestalten hat. Aber wenn es bei der Beantwortung hilft: "Der Nutzer möchte einen fade-in Effekt beim Klicken auf einen Link erzeugen."
Seis drum...gibts also diese technische Möglichkeit oder gibt es die nicht?
Bin für weiterhelfende Hinweise dankbar.
@@Gast:
nuqneH
Aber wenn es bei der Beantwortung hilft: "Der Nutzer möchte einen fade-in Effekt beim Klicken auf einen Link erzeugen."
Nein, das tut es überhaupt nicht.
Bin für weiterhelfende Hinweise dankbar.
Was Orlando sagte.
Qapla'
Moin,
Was Orlando sagte.
Und du legst fest, was eine qualitativ hochwertige Seite ist? Oder irgendwelche Geeks mit NoScript-Plugins oder Text-Browsern? Internetnutzer ist heutzutage fast jeder. Und was die Masse als "schön" oder "fancy" befindet, deckt sich kaum mit der oft hier im Forum proklamierten Sicht.
Grüße Marco
Moin,
Was Orlando sagte.
Und du legst fest, was eine qualitativ hochwertige Seite ist? Oder irgendwelche Geeks mit NoScript-Plugins oder Text-Browsern? Internetnutzer ist heutzutage fast jeder. Und was die Masse als "schön" oder "fancy" befindet, deckt sich kaum mit der oft hier im Forum proklamierten Sicht.
Grüße Marco
Danke. Du sprichst mir aus der Seele. Ich war's nur leid eine Diskussion zu führen die vermutlich ohnehin keine Aussicht auf Erfolg hat, bzw. mit dem subjektiven Empfinden eines Einzelnen überein kommt.
Ansonsten danke erst mal für die beiden Hinweise. Vor allem die Idee mit dem ausgeblendeten Inhalt das bei Klicken sichtbar gemacht wird finde ihr sehr charmant weil man dann keine 2. Seite braucht...
@@misterunknown:
nuqneH
Und du legst fest, was eine qualitativ hochwertige Seite ist?
Nein. Wenn du den Thread gelesen hättest, wüsstest du das.
Also für dich nochmal: Sätze, die mit „ich“ anfangen, seind beim Designen kaum sinnvoll.
Anstatt zu polemisieren hättest du dich der Beantwortung der entscheidenden Frage widmen können: Kommen Nutzer auf deine Seite, um deinen Slogan zu lesen, oder wegen der Inhalte?
Qapla'
Moin,
Anstatt zu polemisieren hättest du dich der Beantwortung der entscheidenden Frage widmen können: Kommen Nutzer auf deine Seite, um deinen Slogan zu lesen, oder wegen der Inhalte?
Die Frage stellt sich aber IMHO nicht wirklich, denn der Content soll ja nicht nicht angezeigt werden. Sondern er soll eingefaded werden. Aktuelle Browser unterstützen das. Für ältere kann man around worken. Die Qualität der Website hat damit nicht wirklich etwas zu tun.
Grüße Marco
@@misterunknown:
nuqneH
Anstatt zu polemisieren hättest du dich der Beantwortung der entscheidenden Frage widmen können: Kommen Nutzer auf deine Seite, um deinen Slogan zu lesen, oder wegen der Inhalte?
Die Frage stellt sich aber IMHO nicht wirklich, denn der Content soll ja nicht nicht angezeigt werden.
Doch, genau die Frage stellt sich. Was soll ein Nutzer auf einer Seite, auf der kein Inhalt angezeigt wird?
Was wird er dort tun? Nach einem Link suchen oder die Seite gleich wieder verlassen?
Und kommt er überhaupt auf die Seite, wenn eine Suchmaschine auch keine Inhalte dort findet?
Qapla'
Moin,
Doch, genau die Frage stellt sich. Was soll ein Nutzer auf einer Seite, auf der kein Inhalt angezeigt wird?
Warum kein Inhalt? Habe ich das falsch verstanden, oder soll _natürlich_ Inhalt angezeigt werden.
Was wird er dort tun? Nach einem Link suchen oder die Seite gleich wieder verlassen?
Um das herauszufinden gibt es Tools wie Piwik.
Und kommt er überhaupt auf die Seite, wenn eine Suchmaschine auch keine Inhalte dort findet?
Warum sollte eine Suchmaschine keine Inhalte finden? Wenn man mit CSS-Transitions arbeitet und ein ordentliches Markup hat, ist die Suchmaschine zufrieden. Auch, wenn der User mit modernem Browser den Inhalt eine Sekunde später sieht, als die Suchmaschine.
Grüße Marco
Sätze, die mit „ich“ anfangen, seind beim Designen kaum sinnvoll. Sätzer, die mit „der Nutzer“ anfangen, schon eher.
Ich glaube du hast Recht.
Gruß
Schamützel
T-Rex
Hallo,
Du könntest den Inhalt der Seite (bis auf das Logo) per Javascript unsichtbar machen und mit Klick auf den Slogan einblenden (ggf. mittels jquery o.ä.).
Grüße Basti
@@basti_p:
nuqneH
Du könntest den Inhalt der Seite (bis auf das Logo) per Javascript unsichtbar machen und mit Klick auf den Slogan einblenden (ggf. mittels jquery o.ä.).
Wegen eines zweifelhaften Effekts, der sich ohen JavaScript mit CSS erreichen ließe, ein JavaScript-Framework einzubinden, ist ziemlich unsinnig.
Qapla'
Hallo,
Wegen eines zweifelhaften Effekts, der sich ohen JavaScript mit CSS erreichen ließe, ein JavaScript-Framework einzubinden, ist ziemlich unsinnig.
Ich schrieb "KÖNNTEST mit Javascript" und "GGF. mit jquery" - dass es andere Lösungen gibt, habe ich nicht ausgeschlossen. Warum gibst Du dem Fragesteller keine fachlich hilfreiche Antwort, sondern mir?
Grüße Basti
@@basti_p:
nuqneH
Ich schrieb "KÖNNTEST mit Javascript" und "GGF. mit jquery" - dass es andere Lösungen gibt, habe ich nicht ausgeschlossen.
Wenn du „könntest, solltest es aber nicht tun“ meinst, dann schreib das doch!
Warum gibst Du dem Fragesteller keine fachlich hilfreiche Antwort, sondern mir?
„Lass den Unsinn“ ist vermutlich die fachlich beste Antwort, die man geben kann. Der OP muss die Hilfe nur annehmen.
Qapla'
Hallo,
Wegen eines zweifelhaften Effekts, der sich ohen JavaScript mit CSS erreichen ließe, ein JavaScript-Framework einzubinden, ist ziemlich unsinnig.
Du kommentierst konkrete Vorschläge zur Umsetzung, weigerst dich aber, über eine bessere Umsetzung zu sprechen…?
Bei der Wikipedia gibt es m.W. einen brauchbaren Grundsatz: Halte andere nicht auf, nur um etwas zu beweisen.
Mathias
@@molily:
nuqneH
Du kommentierst konkrete Vorschläge zur Umsetzung, weigerst dich aber, über eine bessere Umsetzung zu sprechen…?
Dir muss „mit CSS erreichen ließe“ entgangen sein.
Qapla'
@@Gunnar Bittersmann:
nuqneH
Und nein, ich werde kein Tutorial verfassen, wie man eine Flash-Intro-Seite mit CSS nachbaut. Die Gründe hab ich genannt.
Qapla'
Moin,
Gibts für sowas css-Boardmittel oder muss ich hier schon auf jquery zurück greifen oder ähnliches? Wichtig wäre mir natürlich, dass es in allen gängigen Browsern läuft.
Es kommt natürlich auf den Aufbau der Seite an, aber wenn du den Content, der gefaded werden soll in einem Elternelement liegt (beispielsweise body, oder ein Wrapper-Div sollte er unbedingt gebraucht werden), hilft dir sicherlich dieser Link.
Grüße Marco
@@misterunknown:
nuqneH
Wrapper-Div
Du liest hier schon lange genug mit um zu wissen, dass es außer div noch andere HTML-Elemente gibt.
Zur Auszeichnung des Hauptinhalts dient das main-Element.
Qapla'
Om nah hoo pez nyeetz, Gunnar Bittersmann!
hüstel
Matthias
Moin,
Du liest hier schon lange genug mit um zu wissen, dass es außer div noch andere HTML-Elemente gibt.
Zur Auszeichnung des Hauptinhalts dient das main-Element.
Das stimmt. Asche aufs Haupt.
Grüße Marco
Hallo,
ich würde schon auf der ersten Seite den Inhalt einbauen und per css unsichtbar machen. Nach einiger Zeit kann er dann per Transitions eingeblendet werden. Vergiss aber nicht eine Lösung für Browser, die Transitions nicht unterstützen.
Gruß, Jürgen
@@JürgenB:
nuqneH
Vergiss aber nicht eine Lösung für Browser, die Transitions nicht unterstützen.
Der Fallback sollte schon da sein, da transition (wie der Name schon sagt), den Übergang zwischen Anfangs- und Endzustand beschreibt, aber nicht Anfangs- und Endzustand. Für Browser, die Transitions nicht unterstützen, erfolgt der übergang halt schlagartig.
Qapla'
Hallo Gunnar,
Der Fallback sollte schon da sein, ...
ich dachte eher daran, das "Gast" (blöder Nic) das auch in älteren IE testen sollte, um vor Überraschungen sicher zu sein. Fallback war da nicht der richtige Begriff.
Zu diesem Thread:
Du neigst dazu, auf "unsinnige Ideen" recht heftig und kompromisslos zu reagieren. Natürlich ist eine Vorschaltseite Murks. Aber statt das so direkt zu schreiben, kann man ja, wenn möglich, auch auf Alternativen verweisen, die über ein "lass es" hinaus gehen.
Ich habe auch oft Design-Ideen, die ich (!) ganz toll finde und dann mit viel Mühe und Aufwand auch umsetze. Wenn ich das Ergebnis dann aber sehe, evtl. auch erst am nächsten Tag, finde ich es gar nicht mehr so toll und entsorge es dann schnell im Giftschrank. Trotzdem musste ich es ausprobieren, um daraus zu lernen.
Gruß, Jürgen
Ich habe auch oft Design-Ideen, die ich (!) ganz toll finde und dann mit viel Mühe und Aufwand auch umsetze. Wenn ich das Ergebnis dann aber sehe, evtl. auch erst am nächsten Tag, finde ich es gar nicht mehr so toll und entsorge es dann schnell im Giftschrank. Trotzdem musste ich es ausprobieren, um daraus zu lernen.
Amen Bruder.
Und diese Spielereien kosten soooooo viel Zeit.
Gruß
Bruder
T-Rex
Hallo T,
Amen Bruder.
ich glaube, du hast mich nicht verstanden.
Und diese Spielereien kosten soooooo viel Zeit.
du solltest es ja wissen.
Gruß, Jürgen
Ich habe auch oft Design-Ideen, die ich (!) ganz toll finde und dann mit viel Mühe und Aufwand auch umsetze. Wenn ich das Ergebnis dann aber sehe, evtl. auch erst am nächsten Tag, finde ich es gar nicht mehr so toll und entsorge es dann schnell im Giftschrank. Trotzdem musste ich es ausprobieren, um daraus zu lernen.
Amen Bruder.
Und diese Spielereien kosten soooooo viel Zeit.
Reich ist der, der es sich leisten kann, zu Spielen. Und man lernt dabei. Beim Spielen.
Humorlose Grüße
@@JürgenB:
nuqneH
Du neigst dazu, auf "unsinnige Ideen" recht heftig und kompromisslos zu reagieren.
Wir Berliner sind für unsere spezielle Art von Herzlichkeit berüc^Dhmt. ;-)
Wenn ich das Ergebnis dann aber sehe, evtl. auch erst am nächsten Tag, finde ich es gar nicht mehr so toll und entsorge es dann schnell im Giftschrank.
Nicht alle haben diesen Blick am Tag danach.
Qapla'
Hallo (ähh) Gast,
ich würde nach der Zukunftsorientierung gehen. Wenn es wirklich nur um eine definierte Seite und einen definierten Seiteninhalt geht, hast du bereits viele gute Antworten gehört.
Eventuell möchtest du das ganze jedoch ausbauen. Vielleicht gefällt es dem Nutzer so gut, dass du es auf jeder Seite einbauen möchtest. Dann kommst du um ein nachladen mittels ajax nicht drum herum.
Probleme gibt es, wenn man das Javascript nicht sauber umsetzt. Bei meinem früheren Arbeitsgeber hatten wir manchmal tausende von Script Blöcken mitten im Quelltext stehen, da es mittels Templateengine so praktisch war. Solche Seiten kann man mittels Javascript nicht nachladen, da das javascript zwischen dem ganzen HTML nicht ausgeführt werden würde (außer wieder evil...).
Wenn du jedoch alles schön sauber mit jquery umgesetzt hast und auch immer brav on (früher live) benutzt hast, kannst du den Effekt auf allen Unterseiten umsetzen und nicht nur auf der Startseite.
Also der Vorteil mittels Javascript:
1. du brauchst keine Fallback lösung. Diejenigen ohne Javascript klicken einfach den Link an und gut ist.
2. Es funktioniert für jede Seite egal welcher Inhalt (Voraussetzung ist natürlich sauberes JS)
3. du kannst noch Elemente dazwischen schalten. Mit css transaktions bist du auf die css Effekte angewiesen. Wenn du JS benutzt könntest du auch animierte gifs kurz zwischen laden. So könnte es aussehen das der User eine Seite umblättert, ähnlich wie in einem Buch (in letzter Zeit ist das Thema Buch in meinem Leben anscheinend mit h1 geschrieben). Du könntest die Seite die er sieht auch zerreisen lassen etc... das alles ist mit transaction nicht möglich.
4. Du würdest die Ladezeit verkürzen, da Inhalt 2 nicht auf Seite ein zu sehen ist (was bei einer Introseite und beim Thema Google natürlich doof wäre).
5. JS ist einfach cooler
Gruß
Webseiten zerreißender
T-Rex
Hallo,
ich möchte einen fade-in Effekt beim Klicken auf einen Link erzeugen.
Ich hab’s mal ohne Klick mit CSS-Keyframe-Animationen demonstriert:
http://dabblet.com/gist/7502432
Hier werden im Grunde nur die Inhalte nacheinander eingefadet und die Aufmerksamkeit des Nutzers gelenkt.
Wenn der Browser Animationen nicht unterstützt, sind die Inhalte direkt sichtbar.
Du kannst die Animation auch auf Klicken auslösen. Dazu fügst du einem Element einen click-Handler hinzu, der beim einzublendenden Element eine Klasse setzt. Diese Klasse bekommt die CSS-Eigenschaft animation: …;, womit die Animation startet. Dann muss man aber dafür sorgen, dass in Browsern, die Animationen nicht unterstützen, die Inhalte gar nicht erst ausgeblendet werden. Das lässt sich mit JavaScript herausbekommen, z.B. mit Modernizr. Die Feature-Abfrage heißt »CSS Animations«.
Einige Browser brauchen noch sogenannte Hersteller-Präfixe (Vendor-Prefixes); in meinem Beispiel habe ich welche für Webkit/Blink (Chrome/Safari) hinzugefügt. Das sollte eigentlich reichen.
Ich poste das hier, um die Diskussion zu versachlichen und auf eine technische Ebene zurückzuführen. Für Verbesserungsvorschläge bin ich offen.
Ich stelle mir vor auf der index.html nur das Logo mit einem Slogen anzuzeigen (Positionierung irgendwo oben links). Wenn man dann auf den Link drückt faded die 2. Seite ein wo das Logo/Slogan an genau der gleichen Stelle steht, allerdings mit dem ganzen restlichen Content auf de Seite.
Einen ähnlichen Aufbau hat mein Beispiel.
Grüße,
Mathias
Du kannst die Animation auch auf Klicken auslösen. Dazu fügst du einem Element einen click-Handler hinzu, der beim einzublendenden Element eine Klasse setzt. Diese Klasse bekommt die CSS-Eigenschaft animation: …;, womit die Animation startet. Dann muss man aber dafür sorgen, dass in Browsern, die Animationen nicht unterstützen, die Inhalte gar nicht erst ausgeblendet werden.
Ich habe das mal beispielhaft umgesetzt:
http://jsfiddle.net/molily/unuHb/
Da diese Funktionalität einfacher ist, braucht es keine CSS-Keyframe-Animationen, sondern eine CSS-Transition (transition: opacity 1s;) reicht aus.
Über Feedback und Verbesserungsvorschläge würde ich mich freuen.
Mathias
Meine Herren,
Über Feedback und Verbesserungsvorschläge würde ich mich freuen.
Mal abgesehen von dem Typo in dem dritten, öffnenden p-Tag:
Je nachdem wie viel Inhalt ein- oder ausgeblendet wird, kann der Eindruck enstehen, dass man auf einer anderen Unterseite gelandet ist, in dem Fall sollte sich das im URL wiederspiegeln (pushState). Das hat außerdem den Vorteil, dass man auch direkt auf den Inhalt verweisen kann und nicht immer die Animation abwarten muss.
Ansonsten kam mir der Effekt doch irgendwie seltsam vertraut vor.
Hallo!
Je nachdem wie viel Inhalt ein- oder ausgeblendet wird, kann der Eindruck enstehen, dass man auf einer anderen Unterseite gelandet ist, in dem Fall sollte sich das im URL wiederspiegeln (pushState). Das hat außerdem den Vorteil, dass man auch direkt auf den Inhalt verweisen kann und nicht immer die Animation abwarten muss.
Guter Hinweis. Wobei ich hier sogar zu location.replaceState() oder einfach location.replace() greifen würde, sonst taucht die erste URL in der History auf.
Eine andere Möglichkeit wäre sessionStorage. Dort speichert man, ob der Nutzer die Animation schon gesehen hat, und spielt sie beim zweiten Besuch der Seite nicht erneut ab.
Mathias
@@molily:
nuqneH
Eine andere Möglichkeit wäre sessionStorage. Dort speichert man, ob der Nutzer die Animation schon gesehen hat, und spielt sie beim zweiten Besuch der Seite nicht erneut ab.
Wenn die Animation beim zweiten Mal so unwichtig ist, dass man sie weglässt, warum in aller Welt sollte sie beim ersten Mal so wichtig sein, dass man sie anzeigt?
Du führst das nun selbst ad absurdum. Sind wir uns nun einig, dass dieses „Feature“ Unsinn ist?
Qapla'
Erst einmal: Dies ist keine bloße technische Diskussion, sondern eher eine Design-Frage. Ob ein Effekt angemessen ist, hängt davon ab, was die Ziele der Seite sind und was vermittelt werden soll. In meinem Beispiel habe ich der Einfachheit halber einen Slogan, ein Logo und einen Beschreibungstext für meinem Arbeitgeber (eine Software-Agentur) genommen. Man kann (und sollte) darüber streiten, ob das der Sache angemessen ist und an welcher Stelle so etwas sinnvoll eingesetzt werden kann. Ohne die Rahmenbedingungen zu kennen, sollte man keine pauschale Ablehnung äußern, sondern kann höchstens generelle Vor- und Nachteile auflisten.
Generell ist eine solche Animation ein ästhetisches Designelement, dass die Seite auflockert und wiedererkennbarer macht sowie die Aufmerksamkeit des Nutzers lenkt. Warum haben viele Seiten solche visuelle Effekte? Einiges davon ist überflüssige Dekoration, einiges sind sinnvolle Designmittel, um den Inhalt besser zu vermitteln oder ein besonderes Erlebnis zu schaffen. Einiges davon ist nervig und hindert beim Lesen der Seite, anderes ist schnell und unaufdringlich.
Animationen zum Einfaden oder Einfliegen von Inhalten sind heute weit verbreitet, bspw. auf http://www.mozilla.org/de/firefox/os/. Vieles davon halte ich aus Design-Sicht für problematisch, es hat etwas von »Why? Because we can!«. Dazu hatte ich mich schon 2006 geäußert.
Auf vielen Seiten werden Effekte jedoch gekonnt eingesetzt, um schrittweise Inhalte zugänglich zu machen und eine Geschichte zu erzählen. Im Webkrauts-Adventskalender erscheint nächsten Monat ein längerer Artikel von mir zum Thema »Interactive Storytelling«, zu dem ich bereits einen Vortrag gehalten habe. In diesem Kontext verorte ich auch kleinere Web-Animationen.
Dieses Forum ist nicht gerade für seine Design-Kompetenzen bekannt. Ich bin kein Designer und kann nur meine Beobachtungen als Nutzer aufschreiben sowie meinen Beitrag zur Frage leisten, wie eine performante, unaufdringliche, abwärtskompatible … Implementierung aussehen würde.
Grüße,
Mathias
Matthias Apsel