Autor |
Nachricht |
Account gelöscht
Threadersteller
Ort: -
Alter: -
|
Verfasst Sa 28.05.2011 21:03
Titel Animierter Hintergrundfarben Wechsel (jQuery?) |
|
|
Hallo Forum.
Eine Webseite soll die CSS-Eigenschaft "background-color" für den "body" in einer Endlosschleife wechseln.
Der Übergang zwischen den verschiedenen Farben (insgesamt 3) soll fließend sein, als animiert.
Das wäre wohl am besten mit jQuery zu realisieren.
Ich habe es schon mit verschiedenen Tutorials zum Thema versucht, allerdings ohne Erfolg.
Mitunter habe ich also nichtmal einen Ansatz.
Ich hoffe, ihr könnt mir da weiterhelfen.
Danke.
|
|
|
|
|
easteregg
Dabei seit: 15.02.2003
Ort: Deutschland
Alter: 36
Geschlecht:
|
Verfasst Sa 28.05.2011 21:21
Titel
|
|
|
Ansätze wären Color bzw. Color-Animation.
Und wenn es nicht zwingend über background-color gehen muss, wäre eine Javascript-freie Lösung der Einsatz eines animierten .gif Bildes.
Zuletzt bearbeitet von easteregg am Sa 28.05.2011 21:23, insgesamt 1-mal bearbeitet
|
|
|
|
|
Anzeige
|
|
|
Account gelöscht
Threadersteller
Ort: -
Alter: -
|
Verfasst Sa 28.05.2011 21:52
Titel
|
|
|
Danke für die Antwort.
Mit ersterem Plugin habe ich mich schon beschäftigt.
Wegen der Bugfixes ist da wohl das andere vorzuziehen.
Also hab ich's mit dem noch mal versucht, und siehe da, es klappt.
Code: | jQuery(document).ready(function() {
jQuery('body').animate({backgroundColor: '#45BCD2'}, 5000 )
jQuery('body').animate({backgroundColor: '#A7E752'}, 5000 )
jQuery('body').animate({backgroundColor: '#DD4832'}, 5000 )
}); |
Nur wie bekomme ich jetzt 1) jeweils Pausen dazwischen und 2) die Funktion in eine Endlosschleife?
|
|
|
|
|
easteregg
Dabei seit: 15.02.2003
Ort: Deutschland
Alter: 36
Geschlecht:
|
Verfasst Sa 28.05.2011 22:07
Titel
|
|
|
1) .delay()
2) Deinen jetzigen Code als benannte Funktion bauen, und die Funktion am Ende in sich selbst aufrufen Beispiel mit dem Prinzip).
|
|
|
|
|
Account gelöscht
Threadersteller
Ort: -
Alter: -
|
Verfasst Sa 28.05.2011 22:32
Titel
|
|
|
Danke, delay() klappt super. Wieder was gelernt.
Aber die Schelife will nicht so ganz:
Code: | jQuery(document).ready(function() {
function colorCarousel() {
jQuery('body').delay(5000).animate({backgroundColor: '#8B406B'}, 5000 )
jQuery('body').delay(5000).animate({backgroundColor: '#45BCD2'}, 5000 )
jQuery('body').delay(5000).animate({backgroundColor: '#A7E752'}, 5000 )
jQuery('body').delay(5000).animate({backgroundColor: '#DD4832'}, 5000 )
colorCarousel();
}
}); |
Es passiert gar nichts mehr...
Was mache ich falsch?
|
|
|
|
|
easteregg
Dabei seit: 15.02.2003
Ort: Deutschland
Alter: 36
Geschlecht:
|
Verfasst Sa 28.05.2011 22:41
Titel
|
|
|
Hätte jetzt das colorCarousel eher außerhalb der document.ready-Funktion erzeugt und in der document.ready dann auch einfach per colorCarousel(); aufgerufen.
|
|
|
|
|
Account gelöscht
Threadersteller
Ort: -
Alter: -
|
Verfasst Sa 28.05.2011 22:53
Titel
|
|
|
Jetzt meldet mir Safari etwas von einem langsamen Skript.
Wenn ich das dann jedoch anhalte (der Auswahlmöglichkeit entsprechend), dann funktioniert alles wie gewünscht.
Merkwürdig...
|
|
|
|
|
CanTK
Dabei seit: 23.02.2010
Ort: -
Alter: -
Geschlecht: -
|
Verfasst So 29.05.2011 08:02
Titel
|
|
|
Willst du das deinen Besuchern echt antuen ?
Gruß Can
|
|
|
|
|
|
|
|
Ähnliche Themen |
Animierter Hintergrund für ppt
animierter Flashbanner
Animierter Titel
Animierter Punkt. Fernsehformat?
aus animierter Powerpointpräsentaton ein PDF erstellen
animierter farbverlauf in flash
|
|