| Autor |
Nachricht |
smisonline2
Threadersteller
Dabei seit: 13.08.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 14.08.2012 16:07
Titel Jquery backgrounds faden? |
  |
|
Ich bin jetzt schon eine ganze Zeit auf der Suche nach einem Backgroudn Fader . Ich hatte mir das s.u. schon erstellt, aber faden die Bilder nicht, sondern sie wechseln einfach stumpf
Kennt da jemand ein gutes Script/Lösung für ?
| Code: | jQuery.preloadImages = function() {
for (var i = 0; i < arguments.length; i++) {
jQuery("<img>").attr("src", arguments[i]);
$('#container_footer').attr('preloadURL', arguments[0]);
}
}
$.preloadImages("images/tin/footer_0.png");
$.preloadImages("images/tin/footer_1.png");
$.preloadImages("images/tin/footer_2.png");
$.preloadImages("images/tin/footer_3.png");
$.preloadImages("images/tin/footer_4.png");
$.preloadImages("images/tin/footer_5.png");
function changeTin (i) {
var url = "url(images/tin/footer_"+ i +".png)";
$('#container_footer').css({ 'background-image': 'url(images/tin/footer_'+i+'.png)' },$('#container_footer').animate(1000));
} |
|
|
| |
  |
 |
gotoAndPlay
Dabei seit: 22.11.2006
Ort: -
Alter: 40
Geschlecht: 
|
|
| |
|
|
|
Anzeige
|
|
|
phihochzwei
Moderator
Dabei seit: 08.06.2006
Ort: Mülheim an der Ruhr
Alter: 46
Geschlecht:
|
Verfasst Di 14.08.2012 18:34
Titel
|
|
|
|
Wie wäre es mit fadeIn und fadeOut ?
|
|
| |
 |
|
smisonline2
Threadersteller
Dabei seit: 13.08.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 14.08.2012 18:43
Titel
|
|
|
| phihochzwei hat geschrieben: | | Wie wäre es mit fadeIn und fadeOut ? |
dann fadet er ja erstmal das alte weg:) Es soll ja ein nahtloser Übergang zustande kommen. Also das das erste Bild in das zweite und das zweite in das Dritte überfließt, nachdem man auf einen Knopf geklickt hat
|
|
| |
|
|
smisonline2
Threadersteller
Dabei seit: 13.08.2012
Ort: -
Alter: -
Geschlecht: -
|
Verfasst Di 14.08.2012 18:44
Titel background |
|
|
Hm, soweit ich das verstehe verschiebt man damit die Position. Ich habe aber ein auf der x AAchse repeateten background.
AUßerdem gibt es verschiedene bilder die ineinander fließen müssen.
|
|
| |
|
|
ChrisKam
Dabei seit: 01.07.2009
Ort: Hattingen
Alter: 38
Geschlecht:
|
Verfasst Di 14.08.2012 18:48
Titel
|
|
|
Also, mit fadein/fadeout usw. kann das nur funktionieren wenn Du
a) keine sonstigen Kind-Elemente innerhalb dieser Box hast (fadeIn() macht nichts anderes als die CSS-Eigenschaft "opacity" zu verändern, die sich auf das gesamte Element und alles in ihm bezieht).
b) das Neue Bild schon dahinter liegen hast, also müssten die Elemente absolut positioniert sein.
Eine entspr. Funktion zu schreiben sollte nicht sehr kompliziert sein.
Wenn Du auf Support in älteren Browser verzichten kannst, probier es einfach mit CSS3-transitions aus. Damit sollte es klappen ohne die Boxen irgendwie übereinander zu pappen.
edit: zu langsam 
edit2: Und im Übrigen - was isn das überhaupt für eine verschwurbelte Funktion da am Anfang
| Code: | jQuery.preloadImages = function() {
for (var i = 0; i < arguments.length; i++) {
jQuery("<img>").attr("src", arguments[i]);
$('#container_footer').attr('preloadURL', arguments[0]);
}
}
$.preloadImages("images/tin/footer_0.png");
$.preloadImages("images/tin/footer_1.png");
$.preloadImages("images/tin/footer_2.png");
$.preloadImages("images/tin/footer_3.png");
$.preloadImages("images/tin/footer_4.png");
$.preloadImages("images/tin/footer_5.png"); |
Geh' das nochmal Stück für Stück durch, so ganz viel Sinn ergibt das nicht 
Zuletzt bearbeitet von ChrisKam am Di 14.08.2012 18:52, insgesamt 2-mal bearbeitet
|
|
| |
|
|
phihochzwei
Moderator
Dabei seit: 08.06.2006
Ort: Mülheim an der Ruhr
Alter: 46
Geschlecht:
|
Verfasst Di 14.08.2012 18:49
Titel
|
|
|
|
Wieso faded der alte weg? du legst einfach den neuen über den alten, blendest den dann ein (den neuen) und wenn er fertig ist mit einblenden schmeisst du den alten weg.
|
|
| |
|
|
phihochzwei
Moderator
Dabei seit: 08.06.2006
Ort: Mülheim an der Ruhr
Alter: 46
Geschlecht:
|
Verfasst Di 14.08.2012 19:22
Titel
|
|
|
Mal Quick`n`Dirty
| Code: | (function(window){
var BackgroundFader = function(baseID, arr){
this.index = 0;
this.base = $("#" + baseID);
this.images = arr;
this.setBG();
}
var p = BackgroundFader.prototype;
p.base = undefined;
p.images = undefined;
p.index = undefined;
p.setBG = function(){
var that = this;
var img = this.images.shift();
var bg = $("<img />")
.attr("src", img)
.css("position", "absolute")
.css("zIndex", this.index)
.appendTo(this.base)
.hide()
.fadeIn(1000, function(){
that.removeChildren()
});
this.index++;
this.images.push(img);
setTimeout(function(){
that.setBG()
}, 2000)
}
p.removeChildren = function(){
var rem = this.base.children();
if(rem.length > 1){
$(rem[0]).remove();
}
}
window.BackgroundFader = BackgroundFader;
}(window)) |
Das packst Du in eine Datei, nennst die "BackgroundFader.js", lädst die in deine Seite. Dann erstellst Du dir ein leeres div mit namen "klaus" und machst dann in deinem DOM-Ready
| Code: | | var bg = new BackgroundFader("klaus", ["1.jpg","2.jpg","3.jpg","4.jpg","5.jpg"]); |
Fertig.
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
CSS: Positionierung von 2 backgrounds
Backgrounds ? wo finde ich sowas ?
Wo finde ich solche Backgrounds?
2x Backgrounds mit 100%, auch bei resize
Background - Stylishe Backgrounds...
Größenbestimmung des Backgrounds eines Links
|
|
Willkommen auf dem Portal für Mediengestalter
