Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Subtile Animationen mit jQuery – so peppst du deine Seite auf

Die Zeiten des starren, unbeweglichen Webs sind vorbei. Heute erwarten die Nutzer von einer Seite Bewegung und Innovation. Sie wollen mit einer Internetseite interagieren. Wir zeigen, wie du mit ein paar jQuery-Animationen deine Seite aufpeppst.

Zunächst das Wichtigste: Für diese Beispiele brauchst du natürlich eine fertige Internetseite, auf der jQuery bereits eingebunden ist. Falls du jQuery noch nicht in deine Seite eingebunden hast, erfährst du hier, wie es geht. Außerdem sollte auf deiner Seite dieser Patch für jQuery eingebettet sein, dieser wird für das Rotieren und Skalieren von Elementen benutzt.

Beispiel 1: Das fliegende Icon

Ein relativ einfaches Beispiel für eine coole Animation, die deine Internetseite viel interessanter macht, ist das hereinfliegende Icon.

$(document).ready(function() {
$('#logo').css({
position: 'relative'
});
$('#logo').css({
position: 'absolute',
top: '300px',
left: '-1000px'
}).delay(2000).animate({
top: '0px',
left: '-15px',
rotate: '+=355deg'
}, 700, 'linear');
});

Durch diesen JS-Schnipsel fliegt das Icon zwei Sekunden, nachdem die Seite geladen wurde, von rechts aus an seine korrekte Position. Die Werte in den Zeilen 10-12 solltest du vielleicht anpassen, damit die Position und Rotation zu deinem Design passt.

Beispiel 2: Icon-Wechsel

Für diese Animation brauchst du zwei Versionen deines Icons. Zum einen natürlich das Icon selbst, zum anderen das Icon in veränderter Form aber mit den gleichen Maßen.

Beispielsweise gibt es bei einer Künstlerin die Möglichkeit, das Icon als Strichzeichnung umzusetzen. Das Konzept ist ähnlich wie Google-Doodles.

$(document).ready(function() {
$('#logo').hover(function() {
$(this).attr('src', 'http://pfad.zum.original/bild.jpg');
}, function() {
$(this).attr('src', 'http://pfad.zum.variierten/bild.jpg');
});
});

Wenn der Nutzer nun mit der Maus über das Icon fährt, verwandelt es sich wie durch Zauberhand in die Variation. Zwar entdecken diesen Effekt nur wenige Besucher der Seite, aber wer ihn entdeckt, freut sich dafür umso mehr über so viel Liebe zum Detail.

Beispiel 3: Auswechseln des ganzen Seiten-Inhaltes

Gerade auf Internetseiten, auf denen bei einem Klick auf einen Link der Inhalt der Zielseite dynamisch per AJAX nachgeladen wird, sollte man sich eine gute Animation für den Wechsel des Inhaltes überlegen.

Eine einfache Möglichkeit ist, den Inhalt einfach nach links hin wegzuschieben – ähnlich wie bei einer Slideshow.

$('#neuerContent, #alterContent').css({
'right': '0px',
'position': 'absolute'
});
$('#neuerContent').css('right', '-3000px');
$('#neuerContent').clearQueue().animate({
'right': '0px'
}, 500, 'linear');
$('#alterContent').clearQueue().animate({
'right': '3000px'
}, 500, 'linear');

So wird der alte Inhalt nach links geschoben und der neue Inhalt wird von rechts hereingeschoben.

Natürlich kann man seiner Fantasie hier auch freien Lauf lassen, wie zum Beispiel die Demo von impress.js eindrucksvoll zeigt. Daraus könnte man natürlich auch geniale Übergänge erstellen.

Beispiel 4: Bewegung im Hintergrund

Das letzte Beispiel zeigt, wie du zum Beispiel Wolken oder ähnliches im Hintergrund deiner Seite animierst. Dazu brauchst du ein Bild von einer Wolke, das du in den Hintergrund legst.

function animateCloud() {
$('#cloud').clearQueue().css({
'position': 'absolute',
'left': '-500px'
}).animate({
'left': '3000px'
}, 10000, 'linear', function() {
animateCloud();
});
$(document).ready(function() {
animateCloud();
});

Die Funktion animateCloud sorgt dafür, dass die Wolke einmal von links nach rechts über den Bildschirm wandert. Anschließend startet sie die Animation von vorne. Kombiniert man mehrere Wolken mit unterschiedlicher Optik auf unterschiedlicher Höhe und mit unterschiedlicher Geschwindigkeit, ergibt sich daraus eine interessante und außergewöhnliche Animation, die die Besucher zum Staunen bringen sollte.

Bitte beachte unsere Community-Richtlinien

17 Reaktionen
Michael

Natürlich muss jeder selber entscheiden, ob er es für sinnvoll erachtet, die gezeigten Beispiele anzuwenden. Oder eben eine andere Lösung einsetzt.

Was wirklich peinlich ist, ist sich als Pro darzustellen und eine dermaßen unter aller Sau optimierte Webseite zu haben (@antidigital):
YSlow Grade D (Performance score 63) mit 65 Requests und 1 MB Page size, etc.!
Das muss wohl ein "Hochlast portal" sein!

Antworten
andreas

vielleicht sollte man sich mal um das thema: backbutton in der t3n-app kümmern, als solche artikel zuveröffentlichen. es ist nämlich jämmerlich ständig auf die startseite zurück zukommen um anschliessend wieder alles durchscrollen zu müssen...selbst dies wäre keine innovation...impress.js hat allerdings was, wobei es die meisten hier doch wohl schon kennen....

Antworten
Till

@web, @antidigital:
Ich stimme Dir da zu, web! Im Sinne der Benutzerfreundlichkeit sollte JavaScript bzw. jQuery nur zum Einsatz kommen, wenn es keine saubere und stabile Lösung mittels HTML & CSS gibt. Und nebenbei wundere ich mich über dein Statement, antidigital: Nachdem ich dein Portfolio gesehen habe, hätte ich eigentlich erwartet, dass Du uns zustimmst.

Cheers!

Antworten
Simon

Anwendungsbeispiele ohne Demo-Link sind etwas nervig und vollkommen unüblich...

Antworten
web

Gerade "nich so web erfahrene user"n sollte gezeigt werden, wie man die entsprechenden Techniken sinnvoll einsetzen kann.
Außerdem sollte man doch nur mal an die Besucher denken, die kein Javascript aktiviert haben. Die haben von den Effekten plötzlich absolut nichts mehr.

Ich finde diesen Artikel auch absolut schade, der hätte echt nicht sein müssen. Schade wenns nur noch um Contentgenerierung geht, hauptsache um irgendwas auf der Seite zu haben.

Antworten
antidigital

ich finde den artikel super. gerade fuer nich so web erfahrene user ist das doch spitze. und was soll dieses gefasel mit nutzt kein jquery fuer das oder das! unsinn... ich baue hochlast portale und der unterschied ist kaum messbar ;) wuerde etwas mehr auf zb die datei groessen von icons und grafiken geachtet werden haette das einen 1000x groesseren effekt.

Antworten
Micha

kann mich da meinen vorpostern nur anschließen. in letzter zeit kommen immer häufiger artikel ohne informationsgehalt, schlecht recherchiert, oder schlecht aufbereitet. im heft ist es noch nicht so schlimm, aber da überlegt man sich schon zweimal ob sich das abo bzw. die zeit auf t3n noch lohnt. alle der beispiele, selbst das auswechseln des contents lässt sich mit css3 bewerkstelligen. schade.

Antworten
Till

Also jetzt mal ohne Spaß:

BitteBitteBitte T3n-Redaktion: Stellt mal eure Tassen ab und macht eure Arbeit. Dieser Artikel ist nicht hilfreich.

- Wie erwähnt: Das Beispiel mit dem Hover-Effekt per JS. -> Schonmal was von Sprites gehört?
- Keine Demonstrationen oder Screenshots der vorgestellten Codes? -> Hab gehört diese "Druck"-Taste soll da hilfreich sein. Findet man wohl irgendwo auf dieser "Tastatur"... was immer das ist :S
-Recherchiert doch bitte ordentlich, wenn ihr nicht so recht wisst, worum es geht. Da soll dieses neuartige "Internet" hilfreich sein. Ich glaub zwar nicht, dass sich das durchsetzt, aber wer weiß.

Und außerdem bin ich der Meinung, dass Karthago zerstört werden sollte.

Cheers!

Antworten
Marc

Ich kann mich meinen Vorrednern nur anschließen. Ich halte js und dazu noch ein ganzes Framework wie jQuery für den falschen Anlass für solche Spielereien. Man kann das viel einfacher mit CSS3 machen, dass dazu dann auch noch einen schönen Fallback hat, wenn man sich nicht alzu blöd anstellt. Ich habe mit CSS3 Transformationen privat mehrere Art Directed Blogging Artikel umgesetzt. Da darf man solche Spielereien ja auch mal ausprobieren. ;-)

http://marctv.de/blog/2012/06/11/battlestar-galactica/

http://marctv.de/blog/2010/07/09/red-dead-redemption/

Antworten
El Gringo

Der eine hats - der andere hat'se net alle :(

Antworten
Michael

Ok. Mir reichts. Lese jetzt seit ca. 3 Monaten hier auf T3N mit, aber bei solchen Artikeln (die leider immer öfter hier auftauchen) kommt es mir einfach hoch.
Was soll dieser nichtssagende, mit schlechtem Code geschriebener und (fast) ohne Beispiele ausgelieferte Artikel? WAS?
Der Artikel hat bei mir das Fass zum überlaufen gebracht.
T3N du bist für mich gestorben.
Ciao Amigo!

Antworten
christian.dinse

Es sollte in der Tat DEFINITIV vermieden werden, für solch simple Dinge wie "Hover-Bildwechsel" Javascript zu bemühen, schlimmer noch: Menschen eventuell dazu bringen, ein eventuell bisher nicht eingesetztes JS-Framework in ihre Seite einzubinden, um obigen Effekt zu erzielen.

Da kämpfen wir als Designer und Coder seit Mitte der 90er Jahre gegen unnötige Geschichten wie Flash oder JS, für simple Bildwechsel, bekamen mit CSS 2.x endlich eine plattform-übergreifende, resourcen-schonende Möglichkeit und was passiert: Unbedarfte werden im 2012 zu Javascript gelenkt, nur weil Ladezeiten und Traffic heute keine Rolle mehr spielen? Grober Schnitzer und weit gefehlt. Sorry, t3n.

Antworten
Benjamin

@web: Genau das dachte ich auch; leider recht einseitig ausgefallener Artikel und die Hover-Pseudoklasse wäre in puncto Browser-Interpretierbarkeit um Längen besser.

Naja, und Demos wären schön gewesen :/ ... Vllt. lieber Stylesheet-Wechsel, Fading o.ä. als "Aufpepp"-Mittel vorstellen.

Antworten
web

Gerade über den Hover-Effekt bin ich sehr verwirrt. Warum muss dazu jQuery herhalten?
Man kann über CSS auch einfach das Hintergrundbild bei Hover ändern.

Antworten
web

Das ganze lässt sich wesentlich einfacher und "nativer" mit CSS3-Transitions umsetzen. Mittels modernizr könnte man noch einen Fallback mit jQuery-Animate für Nicht-Transition-fähige Browser bauen.
Schade, dass hier rein auf jQuery-Animate gesetzt wurde.

Antworten
Jürgen

Besonders schön auch die anschaulichen grafischen Beispiele des jeweiligen Scriptcodes_

Antworten
Steffen Bruchmann

Oh, ist es schon wieder 1998?

Antworten

Melde dich mit deinem t3n Account an oder fülle die unteren Felder aus.