jQuery

Tutorial: Color changing liquid effect with jQuery

Posted in Development, Tutorial, Webdevelopment, jQuery on October 4th, 2010 by admin – 2 Comments

This tutorial is on how to archieve a color changing liquid effect (like this one) with jQuery. It’s actually quite easy to implement, altough there is a small trap. It’s made with plain CSS2 and will run in every modern browser (note: I don’t consider IE6 as a “modern browser”).

LayersThe trick is to use three layers: The first is the symbol or the text, with the essential parts left transparent, the second is a gray layer with a transparent wave at the bottom an the last is a solid CSS-background-color. With some jQuery-magic to animate the second layer you can create an effect of wavy liquid.
read more »

marekventur.de geupdadet

Posted in Development, Webdevelopment, jQuery on October 3rd, 2010 by admin – 1 Comment

Screenshot marekventur.de

Nachdem meine erste Version für marekventur.de ziemlich überladen war (und irgendwann durch ein falschen “rm -R” ins Daten-Nirvana ging) war bis letzte Woche noch eine schnell erstellte 30-Minuten Seite online. Nun hab ich mir mal die Zeit genommen, ein bisschen zu basteln und habe eine neue Version online gestellt.

Über das technische werde ich später noch ein wenig bloggen, bis dahin muss es reichen in den Raum zu werfen, dass die Seite auf CSS2 und jQuery basiert und im IE6 richtig schön gegen die Wand fährt…

Btw: Es gibt jetzt auch kein de.marekventur.de bzw. en.marekventur.de, sondern die Second-Level-Domain ist jetzt standartmäßig englisch – die Zahl derer, die die Halbsätze auf so einer Seite nicht verstehen geht wohl so ziemlich gegen null.

jQuery animation easing

Posted in Development, Webdevelopment, jQuery on September 30th, 2010 by admin – Be the first to comment

“Animation easing” makes animating with jQuery much nicer. Instead of just changing an attribute linearly from x to y you can use build-in easing-functions to make make your animation acelerate, bounce and much more – they often look more convincing this way (at least I think so).

To get a glance at the graphs of the functions you can have a look here. You can find everything on how to use them in the jQuery manual.

SWFUpload mit jQuery

Posted in Development, Resourcen, Webdevelopment, jQuery on September 28th, 2010 by admin – Be the first to comment

Eine der letzten konzeptionellen Daseinsberechtigungen für Flash: Fileupload mit Fortschrittsanzeige.

Wer -wie ich- keine Ahnung von Flashprogrammierung an sich hat, für den bietet sich SWFUpload an. Das “offizielle” Javascript ist ziemlich unschön, umso besser also dass sich schon jemand die Arbeit gemacht hat, ein jQuery-Plugin dafür zu schreiben.

Hier könnt ihr es in Action erleben.

Webprojekt RapidLetter.de – Abgabe

Posted in DHBW, Webdevelopment, jQuery on July 29th, 2010 by admin – Be the first to comment

Unser Webprojekt an der DHBW-Mannheim ist fertig und wurde heute unseren Dozenten übergeben. Und da ich mit unserem Ergebnis ganz zufrieden bin hier ein wenig mehr dazu:

Worum ging es? Wir hatten uns das Ziel gesetzt einen Briefgenerator zu schreiben, mit dessen Hilfe man innerhalb von Minuten einen fertigen Brief erstellen kann. Aufgehübscht mit ein wenig jQuery, CSS3, HTML5 und ausgestattet mit einer eigenen Benutzerverwaltung könnt ihr das Ergebnis unserer Arbeit unter http://www.rapidletter.de betrachten.

By the way: Weitere Projekt-Abschlussergebnisse gibt es hier und hier.