mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Sa 27.04.2024 13:17 Benutzername: Passwort: Auto-Login

Thema: Animierter Hintergrundfarben Wechsel (jQuery?) vom 28.05.2011


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Animierter Hintergrundfarben Wechsel (jQuery?)
Seite: Zurück  1, 2
Autor Nachricht
choise

Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht: Männlich
Verfasst So 29.05.2011 12:57
Titel

Antworten mit Zitat Zum Seitenanfang

wundert mich sowieso wie das ganze bei dir funktionieren kann, da du alle animates der verschiedenen farben gleichzeitig abfeuerst.

ich würde das in etwa so machen:

Code:
$(function(){
    animateBackground();
});


function animateBackground(currentColor) {
    if(!currentColor) currentColor = 0;
   
    var $body      = $('body');
    var colors     = new Array('#45BCD2','#A7E752','#DD4832');
    var color;
   
    if(colors.length <= currentColor) {
        color = colors[0];
        currentColor = 0;
    } else {
        color = colors[currentColor];
    }
   
    $body.animate({backgroundColor: color}, 5000, false, function(){
        currentColor++;
        animateBackground(currentColor);
    });
   
}

http://jsfiddle.net/TY6Aj/3/


Zuletzt bearbeitet von choise am So 29.05.2011 13:42, insgesamt 4-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Account gelöscht
Threadersteller


Ort: -
Alter: -
Verfasst So 29.05.2011 13:35
Titel

Antworten mit Zitat Zum Seitenanfang

choise hat geschrieben:

Code:
$(function(){
    animateBackground();
});


function animateBackground(currentColor) {
    if(!currentColor) currentColor = 0;
   
    var $body      = $('body');
    var colors     = new Array('#45BCD2','#A7E752','#DD4832');
    var color;
   
    if(colors.length <= currentColor) {
        color = colors[0];
        currentColor = 0;
    } else {
        color = colors[currentColor];
    }
   
    $body.animate({backgroundColor: color}, 5000, false, function(){
        currentColor++;
        animateBackground(currentColor);
    });
   
}
]


Dein Code sieht ja super aus. Und ist sicherlich besser als meiner.
Allerdings blick ich da nicht ganz durch.
Der die Funktion die du gepostet hast und die auf http://jsfiddle.net/TY6Aj/3/ unterscheiden sich geringfügig voneinander.
Bei der einen fehlt die Endlosschleife bei der anderen fehlen die Pausen.
Hab mir jetzt aus beiden was zusammengebastelt.
Klappt jetzt wie gewünscht.
Großes Dankeschön!

Code:
jQuery(function(){
    animateBackground();
});

Code:
function animateBackground(currentColor) {
    if(!currentColor) currentColor = 0;
   
    var $body      = jQuery('body');
    var colors     = new Array('#8B406B','#45BCD2','#A7E752','#DD4832');
    var color;
   
    if(colors.length <= currentColor) {
        color = colors[0];
        currentColor = 0;
    } else {
        color = colors[currentColor];
    }
   
    $body.delay(15000).animate({backgroundColor: color}, 2500, false, function(){
        animateBackground(currentColor+1);
    });
}


Und ja, ich will meinen Besucher das antun. Ich empfinde das nicht als störend oder unruhig mit den Pausen und den fließenden Übergängen. Passt ins Konzept.

Könnt euch ja selbst überzeugen: effectbox.net
 
Anzeige
Anzeige
choise

Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht: Männlich
Verfasst So 29.05.2011 13:42
Titel

Antworten mit Zitat Zum Seitenanfang

sorry hatte falsch verlinkt.

http://jsfiddle.net/TY6Aj/3/ das ist die version.

// ach ja , pausen hatte ich keine drin, aber hast du ja schon erledigt.


Zuletzt bearbeitet von choise am So 29.05.2011 13:43, insgesamt 1-mal bearbeitet
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
choise

Dabei seit: 01.02.2007
Ort: Würzburg
Alter: 35
Geschlecht: Männlich
Verfasst So 29.05.2011 16:52
Titel

Antworten mit Zitat Zum Seitenanfang

hier nochmal ein kleines update, was etwas mehr sinn ergibt und den delay erst nach dem ersten fade einbaut. somit startet der fade direkt nach dem seiten laden.

Code:
$(function(){
   
    var colors = new Array('#45BCD2','#A7E752','#DD4832');
    // set colors and wait between colors for 15 seconds
    animateBackground(colors, 15000);

});


function animateBackground(colors, delay, currentColor) {
   
    var $body      = $('body');
    currentColor   = (!currentColor || colors.length <= currentColor) ? 0 : currentColor;
    delay          = (!delay) ? 1500 : delay;
    var color      = colors[currentColor];
   
    $body.animate({backgroundColor: color}, 5000, false, function(){
        window.setTimeout(function() { animateBackground(colors, delay, currentColor+1); }, delay);
    });
   
}

http://jsfiddle.net/TY6Aj/6/
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
 
Ähnliche Themen Animierter Titel
Animierter Hintergrund für ppt
animierter Flashbanner
Animierter Punkt. Fernsehformat?
aus animierter Powerpointpräsentaton ein PDF erstellen
animierter farbverlauf in flash
Neues Thema eröffnen   Neue Antwort erstellen Seite: Zurück  1, 2
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.