Ein fliegender Twitter-Vogel für die Website
13.05.2010, 17:18
img/softwareimg/
Vor zwei Jahren wusste kaum jemand, was "Twitter" sein sollte und heute twittert fast jeder Blogger und News-Dienst, den ich kenne. Auf vielen Websites ist irgendwo ein Follow-me-Button zu finden, oder wenigstens ein Tweet-this, wodurch man nebenbei immer irgendwie auf Twitter aufmerksam gemacht wird.
Aber diese Buttons und Vogel-Grafiken haben eines gemeinsam: Es handelt sich meistens und eine simple statische Grafik, welche mit einem Link versehen ist. Diese Vögel kleben immer fix auf der Website rum, sie fliegen nicht, wie es ein Vogel eigentlich tun könnte.
Vor einiger Zeit hatte ich dann mal auf einer Website einen animierten Twitter-Vogel gesehen, der auf einer vorgegebenen Bahn in die Seite flog und sich dann mittendrin hinsetzte. Wenn man auf ihn klickte, kam man auf den Twitter-Account des Betreibers. Allerdings war es nicht sonderlich professionell gemacht. Es war nur ein statisches Vogel-Bild, das im "Gleitflug" per JavaScript geradeaus über die Seite bewegt wurde. Eine Woche später war die Spielerei übrigens nicht mehr aufzufinden.
So bin ich dann auf die Idee gekommen, selber einen interaktiven Twitter-Vogel als Open-Source-Software zu kreieren und finde das Resultat bis jetzt nicht schlecht.
Beim Aufruf der Webseite fliegt der Vogel von oben in die Seite hinein und sucht sich einen zufälligen Ort im sichtbaren Bereich aus, bei dem er sich niederlassen kann. Wobei der Ort nicht ganz zufällig ausgewählt wird: Es handelt sich stets um ein existierendes HTML-Element wie ein Bild, eine Tabelle oder ein Div-Container. Schliesslich setzt sich ein realer Vogel auch auf ein Element des Baumes (=Ast) ab und nicht irgendwo mitten in der Luft.
Wenn man mit dem Cursor über den Vogel fährt, werden ein "tweet-this"- und "Follow-me"-Link angezeigt. Der Vogel selbst verweist wie der "Follow-me"-Link auf den Twitter-Account.
Falls der Benutzer wegscrollt und der Vogel somit aus dem sichtbaren Bereich verschwindet, versucht er sofort wieder in den sichtbaren Bereich zu fliegen.
Auch wenn sich der Vogel tendenziell neben den Inhalt setzt, kann es vorkommen, dass er den Text oder eine Grafik verdeckt. In diesem Falle kann man mit dem Cursor vor ihm "herumfuchteln" um ihn zu "verscheuchen", worauf er sich an einem anderen Ort ein neues Plätzchen sucht.
Die ganze Hintergrundgeschichte findet in einer JavaScript-Datei statt, welche wie folgt eingebunden wird, idealerweise vor dem Ende des <body>-Tags:
Mit der Funktion trippleflapInit() wird der Vogel in die Startvorbereitungen geschickt. Um dem Browser eine kurze Verschnaufpause nach dem Rendern zu gönnen, wird der eigentliche Start erst nach einer viertel Sekunde ausgeführt. Dann werden die benötigten HTML-Elemente erstellt und die Grafik geladen. Der Vogel bekommt nun die Erlaubnis zum Abflug.
Die Buttons und die einzelnen Frames der Animation finden in einer einzigen Datei Platz und werden entsprechend als (animierte) CSS-Sprites eingebunden. Dadurch verringert sich die Anzahl der Requests auf zwei, nämlich die JavaScript-Datei und die Grafik-Datei mit den Sprites.
Wie heisst diese Applikation nun überhaupt? So fantasievoll wie ich während der Software-Entwicklung immer bin, hatte ich die erste Test-Datei "flapflapflap" genannt. Wie man unschwer erkennen kann, ist das eine Anlehnung an das Geräusch, welches ein Vogel mit seinen Flügeln macht. Allerdings fasse ich solche "Begriffe" dann gerne in einer kürzeren Form zusammen, womit schlussendlich der Name TripleFlap entstanden ist.
Und unter dieser Bezeichnung veröffentliche ich nun die Version 1.0 mit dem Vermerk "beta" als Open-Source.
Das Script kann kostenlos im Softwarebereich heruntergeladen werden.
Update vom 26.07.2010: TripleFlap 1.1 mit Tweet-Anzeige
Vor zwei Jahren wusste kaum jemand, was "Twitter" sein sollte und heute twittert fast jeder Blogger und News-Dienst, den ich kenne. Auf vielen Websites ist irgendwo ein Follow-me-Button zu finden, oder wenigstens ein Tweet-this, wodurch man nebenbei immer irgendwie auf Twitter aufmerksam gemacht wird.Aber diese Buttons und Vogel-Grafiken haben eines gemeinsam: Es handelt sich meistens und eine simple statische Grafik, welche mit einem Link versehen ist. Diese Vögel kleben immer fix auf der Website rum, sie fliegen nicht, wie es ein Vogel eigentlich tun könnte.
Vor einiger Zeit hatte ich dann mal auf einer Website einen animierten Twitter-Vogel gesehen, der auf einer vorgegebenen Bahn in die Seite flog und sich dann mittendrin hinsetzte. Wenn man auf ihn klickte, kam man auf den Twitter-Account des Betreibers. Allerdings war es nicht sonderlich professionell gemacht. Es war nur ein statisches Vogel-Bild, das im "Gleitflug" per JavaScript geradeaus über die Seite bewegt wurde. Eine Woche später war die Spielerei übrigens nicht mehr aufzufinden.
So bin ich dann auf die Idee gekommen, selber einen interaktiven Twitter-Vogel als Open-Source-Software zu kreieren und finde das Resultat bis jetzt nicht schlecht.Beim Aufruf der Webseite fliegt der Vogel von oben in die Seite hinein und sucht sich einen zufälligen Ort im sichtbaren Bereich aus, bei dem er sich niederlassen kann. Wobei der Ort nicht ganz zufällig ausgewählt wird: Es handelt sich stets um ein existierendes HTML-Element wie ein Bild, eine Tabelle oder ein Div-Container. Schliesslich setzt sich ein realer Vogel auch auf ein Element des Baumes (=Ast) ab und nicht irgendwo mitten in der Luft.
Wenn man mit dem Cursor über den Vogel fährt, werden ein "tweet-this"- und "Follow-me"-Link angezeigt. Der Vogel selbst verweist wie der "Follow-me"-Link auf den Twitter-Account.Falls der Benutzer wegscrollt und der Vogel somit aus dem sichtbaren Bereich verschwindet, versucht er sofort wieder in den sichtbaren Bereich zu fliegen.
Auch wenn sich der Vogel tendenziell neben den Inhalt setzt, kann es vorkommen, dass er den Text oder eine Grafik verdeckt. In diesem Falle kann man mit dem Cursor vor ihm "herumfuchteln" um ihn zu "verscheuchen", worauf er sich an einem anderen Ort ein neues Plätzchen sucht.
Die ganze Hintergrundgeschichte findet in einer JavaScript-Datei statt, welche wie folgt eingebunden wird, idealerweise vor dem Ende des <body>-Tags:
<script type="text/javascript" src="/tripleflap/tripleflap.js"></script>
<script type="text/javascript">
var twitterAccount = "http://twitter.com/account";
var tweetThisText = "Titel und http://diese.tld/url";
tripleflapInit();
</script>Die Variable twitterAccount enthält die URL des Twitter-Accounts. In tweetThisText steht der Statustext, welcher getweetet werden soll. Den Statustext kann man dadurch beispielsweise mittels PHP generieren. Dasselbe wäre auch mit dem Account bei mehreren Autoren möglich. Beide Variablen können allerdings auch direkt in der externen JavaScript-Datei definiert werden. Wenn man die tweetThisText nicht angibt, werden automatisch der Seitentitel und die URL zusammengesetzt und als Statustext verwendet. In der JavaScript-Datei selbst können ebenfalls noch andere Einstellungen wie die URL der Grafik oder die Animationsgeschwindigkeit vorgenommen werden. Mit der Funktion trippleflapInit() wird der Vogel in die Startvorbereitungen geschickt. Um dem Browser eine kurze Verschnaufpause nach dem Rendern zu gönnen, wird der eigentliche Start erst nach einer viertel Sekunde ausgeführt. Dann werden die benötigten HTML-Elemente erstellt und die Grafik geladen. Der Vogel bekommt nun die Erlaubnis zum Abflug.Die Buttons und die einzelnen Frames der Animation finden in einer einzigen Datei Platz und werden entsprechend als (animierte) CSS-Sprites eingebunden. Dadurch verringert sich die Anzahl der Requests auf zwei, nämlich die JavaScript-Datei und die Grafik-Datei mit den Sprites.
Wie heisst diese Applikation nun überhaupt? So fantasievoll wie ich während der Software-Entwicklung immer bin, hatte ich die erste Test-Datei "flapflapflap" genannt. Wie man unschwer erkennen kann, ist das eine Anlehnung an das Geräusch, welches ein Vogel mit seinen Flügeln macht. Allerdings fasse ich solche "Begriffe" dann gerne in einer kürzeren Form zusammen, womit schlussendlich der Name TripleFlap entstanden ist.
Und unter dieser Bezeichnung veröffentliche ich nun die Version 1.0 mit dem Vermerk "beta" als Open-Source.
Das Script kann kostenlos im Softwarebereich heruntergeladen werden.
Update vom 26.07.2010: TripleFlap 1.1 mit Tweet-Anzeige
Beste Grüße Ralph
Ich persönlich hätte nur noch gerne einen irgendwie gearteten Hinweis für die User, dass sie den Vogel mit Wedeln verscheuchen können. Das ist so noch nicht intuitiv genug (meiner Meinung nach).
Und was du auch bedenken solltest, dass es für Smartphones nicht so einfach ist, den Hover-Effekt zu erzielen und den Vogel zu verscheuchen.
Aber ansonsten weiter so! :)
Gruß, Benni
Wenn mal Zeit ist (haha) tausche ich den aus.
Wenn man die Fenstergröße nach dem Init verändert, kriegt man den Vogel doch dazu sich "unrealistisch" zu verhalten (= sitzt in der Luft) ;)
Grüße, Paul
Was noch toll wäre, wenn der Vogel schneller reagieren würde. Ich meine wenn ich ganz nach unten scrolle fliegt der Vogel nach unten - gehe ich aber in der Zwischenzeit nach oben, fliegt der Vogel trotzdem erst mal nach ganz unten um dann den Rückflug anzutreten. Vielleicht könnte man da noch was ändern? Kenn mich leider mit sowas überhaupt nicht aus, für die gesamte Technik hinter meinen Blog ist mein Mann verantwortlich, daher weiß ich nicht genau was möglich ist und was nicht. ;)
Von mir einfach: Danke für den Vogel!
danke für das vögelchen! coole idee!
LG
Wahnsinns Idee. Habe vorhin versucht das ganze ersmal aufm PC auszuprobieren. Du hast das aber so "blöd" programmiert, dass ich den Ordner ers nach C:\ kopieren musste.
Kannst du das source Attribut nicht in src="tripleflap/tripleflap.js"> ändern?
(Als Testversion)
Ich weis, dass das viel aufwendiger ist, weil man den Ordner dann ganz oft hochladen müsste. Aber als Download zum lokalen programmieren wäre das viel besser.
LG Felix