Vorheriger Artikel Nächster Artikel

Neues Plugin: jQuery Spoiler Alert

Die beste Serie verliert jeglichen Reiz, wenn man schon vorher weiß, was als Nächstes passieren wird. Mit Spoiler Alert können Spoiler auf Webseiten bei gleichbleibender Lese-Qualität versteckt und wieder eingeblendet werden.

Neues Plugin: jQuery Spoiler Alert
Mit jQuery Spolier Alert können Spoiler in Texten versteckt werden, ohne dabei den Lesefluss der Besucher zu stören.

„Achtung, Spoiler-Alarm! Nicht weiterlesen!“ Und doch springt dann genau das Wort ins Auge, das einem das spannende Finale der letzten „Breaking-Bad“-Episode verrät. Ärgerlich! Genau das dürften sich die Macher von jQuery Spoiler Alert gedacht haben.

jQuery Spoiler Alert Screenshot

Lösungen, die Textpassagen verstecken und erst nach Betätigung eines Buttons ausklappen und sichtbar machen, sind meistens eher störend als hilfreich. Daher verfolgt jQuery Spoiler Alert einen anderen Ansatz:  Elemente, die von dem markiert werden, erhalten einen Blur-Effekt und sind somit nicht ohne Weiteres lesbar. Hovert man über den Spoiler, werden die Umrisse ein wenig schärfer. Erst nach einem Klick wird der Text vollständig lesbar. Dadurch, dass die Elemente ihre ursprüngliche Form beibehalten, wird der Lesefluss nur minimal eingeschränkt.

Derzeit funktioniert jQuery Spoiler Alert laut Herstellerangaben in Chrome, Firefox, Safari und Safari Mobile. Unsere Tests mit dem Internet Explorer 10 bestätigen, dass das Plugin derzeit nicht im Microsoft-Browser funktioniert. Diese Funktionalität sollte aber demnächst zum Bestandteil des nützlichen Plugins werden.

jQuery Spoiler Alert bekommt ihr auf der offiziellen Seite von jQuery Spoiler Alert und auf GitHub.

Weiterführende Links

NEU: Lass dir diesen Artikel vorlesen
Ein Service von t3n, in Kooperation mit Narando.
Vorheriger Artikel Zurück zur Startseite Nächster Artikel
3 Antworten
  1. von marc.tissler am 25.03.2013 (11:17 Uhr)

    nett idee aber mit 10 zeilen code schnell selber implementiert. Dem Text eine passende CSS klasse geben die den Text blurt (muss wohl mit einem filter gemacht werden), beim mouseover den blur effect ein wenig vermindert und bei einem klick die blur klasse komplett entfernt.

    ich glaub das selber schreiben geht in dem fall schneller als das plugin zu laden, auf den server zu schieben und einzubinden ;)

    Aber die Idee dahinter gefällt mir! :)

    Antworten Teilen
  2. von Benny Lava am 25.03.2013 (11:38 Uhr)

    IE-User sind stärker als andere, die können die Wahrheit gleich vertragen und müssen sie nicht ausblenden. :-)

    Schlecht an dem Plugin ist, dass man den Text schon beim hovern einigermaßen lesen kann.

    Antworten Teilen
  3. von Sebbe am 26.03.2013 (12:15 Uhr)

    Hi,

    wieso ist es schlecht wenn man beim Drüberfahren mit der Maus schon etwas Text erkennt? Ist doch gut, das animiert gleich darauf zu klicken und man spart sich den Hinweis dafür.

    Was mich als NoScript Nutzer stört ist, dass hier mal wieder nicht an uns gedacht wurde. Ein simpler Workaround wäre den Text + Hintergrund auf die selbe Farbe zu stellen.

    Gruß
    Sebbe

    Antworten Teilen
Deine Meinung

Bitte melde dich an!

Du musst angemeldet sein, um einen Kommentar schreiben zu können.

Jetzt anmelden

Mehr zum Thema jQuery
Für euer CMS oder eure Web-App: Mit dem jQuery-Plugin ContentBuilderJS werden Inhalte einfach zusammengeklickt
Für euer CMS oder eure Web-App: Mit dem jQuery-Plugin ContentBuilderJS werden Inhalte einfach zusammengeklickt

ContentBuilderJS ist ein jQuery-Plugin, mit dem sich Webseiten aus vorgefertigten Blöcken einfach zusammenklicken lassen. Die Inhalte der jeweiligen Blöcke lassen sich anschließend direkt Inline … » weiterlesen

FocusPoint: jQuery-Plugin für fokales Cropping
FocusPoint: jQuery-Plugin für fokales Cropping

Der Einsatz von Bildern im Responsive Webdesign bringt einige Herausforderungen mit sich. FocusPoint hilft dabei, den wichtigsten Bildausschnitt immer im Vordergrund zu halten. Wir stellen das … » weiterlesen

Hat $.animate() ausgedient? So nutzt du den Performance-Boost von velocity.js
Hat $.animate() ausgedient? So nutzt du den Performance-Boost von velocity.js

Performance von Bibliotheken ist alles. Sie beeinflusst nicht nur direkt das Anwendererlebnis, sondern auch, wie der Entwickler mit der Bibliothek arbeiten kann. jQuery ist wohl die beliebteste … » weiterlesen

Kennst Du schon unser t3n Magazin?

t3n-Newsletter t3n-Newsletter
Top-Themen der Woche für Web-Pioniere
Jetzt kostenlos
anmelden
Diesen Hinweis verbergen