Fadingeffekt für Headerbilder mit CSS-Sprite

nielsv · 13.11.2011

Hallo Community,

ich habe ein kleines Problem und bin nach einigen Versuchen nicht wirklich weiter gekommen.

Ich möchte in einem Header mehrere Hintergrundbilder ineinander faden lassen.
Das habe ich bisher immer mit dem jQuery-Plugin CrossSlide () gemacht. Funktioniert alles wunderbar.

Jetzt bin ich dabei die Geschwindigkeit der Seite zu optimieren und es stört mich das ich zb. bei sieben Bildern auch sieben GET-Requests habe.

Anstatt die sieben Bilder einzeln zu laden möchte ich das ganze in eine Bilddatei packen und als Sprite umsetzen.

Alles was ich dazu gefunden habe basiert auf irgendwelchen Slideeffekten in Kombination mit Transparenz öä. aber ich konnte nichts finden was schön ineinander fadet.

kommt dem was ich haben möchte am nächsten.. was mich dort stört ist das die Bilder nicht wirklich ineinander übergehen sondern dazwischen immer weiß eingeblendet wird.

Ich habe mich auch mit dem jQuery Plugin Spritely versucht, das einzigste was ich da hinbekommen habe war das die Bilder ohne fading nacheinander angezeigt werden.

Hat jemand einde Idee wie ich das ganze umsetzen kann?

sokie · 13.11.2011

AW: Fadingeffekt für Headerbilder mit CSS-Sprite

In dem Fall ist das Plugin nicht das geeignete. erwartet werden ja zumidest ein Objekt, dass die verschiedenen urls zu deinen Bildern enthält, die du verwendest.
Andere plugins wie zB jQuery Cycle (cyclelite etc) arbeiten dagegen direkt mit einer liste aus deinem html. da könntest du zB deine container in einer Liste zusammenfassen, und dein Hintergrundbild als Sprite in jedem der inneren Container unterschiedlich anordnen (übrigens ganz ähnlich wie in dem zweiten Beispiel).
http://jquery.malsup.com/cycle/

nielsv · 13.11.2011

AW: Fadingeffekt für Headerbilder mit CSS-Sprite

Hallo sokie,

vielen Dank für den Tipp, genau das was ich wollte. Ich habe das Problem folgendermaßen gelöst:

HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Unbenanntes Dokument</title>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<style>
    .slideshow { height: 250px; width: 900; margin: auto }

    .slideshow div {
    width: 900px;
    height: 250px;
    background: url('header-sprite.jpg') 0 0;
    }
    
    #bild1 {background-position: 0px 0px;}
    #bild2 {background-position: -900px 0px;}
    #bild3 {background-position: -1800px 0px;}    
    #bild4 {background-position: -2700px 0px;}
    #bild5 {background-position: -3600px 0px;}
    #bild6 {background-position: -4500px 0px;}    
    #bild7 {background-position: -5400px 0px;}                
    
            
</style>

<script type="text/javascript">
$(document).ready(function() {
    $('.slideshow').cycle({
        fx: 'fade'
    });
});
</script>
</head>
<body>

<div class="slideshow">
    <div id="bild1"></div>
    <div id="bild2"></div>
    <div id="bild3"></div>
    <div id="bild4"></div>
    <div id="bild5"></div>
    <div id="bild6"></div> 
    <div id="bild7"></div>             
</div>


</body>
</html>

Myhar · 14.11.2011

AW: Fadingeffekt für Headerbilder mit CSS-Sprite

Sehr schön, wenn das Problem gelöst wurde.
Jedoch bietet diese Lösung noch sehr viel Optimierungsbedarf. Ein <img> Tag braucht immer ein src Attribut und ein alt Attribut, welches die Bilder beschreibt. Alternativ ist ein leeres alt Attribut besser als gar kein alt Attribut.
Auch das CSS lässt sich optimieren, du kannst die Klasse sprite weglassen und mittels #slideshow img auf alle img Elemente im div mit der ID slideshow zugreifen.

L. G.

nielsv · 21.11.2011

AW: Fadingeffekt für Headerbilder mit CSS-Sprite

Hallo Myhar,

du hast natürlich recht, das Problem mit ALT und SRC-Attribut ist folgendes... gebe ich zb. das Spritebild als SRC an wird es in die 900x250 Pixel "gequetscht"... gebe ich einen ALT-Text ein erscheint dieser oben links in der Ecke... ich habe die Attribute jetzt einfach mal leer gelassen das der Validator keine Fehler schmeisst.

Myhar · 21.11.2011

AW: Fadingeffekt für Headerbilder mit CSS-Sprite

Hallo,

natürlich erscheint bei deiner Vorgehensweise der ALT Text, da der angezeigt wird, wenn keine Bilder unterstützt werden oder das angegebene Bild nicht gefunden wird. Wenn du kein Bild angibst, dann wird also logischerweise der ALT Text angezeigt.
Ich würde dir raten, auf die <img> Elemente zu verzichten und semantisch bedeutungslose <div> Elemente zu verwenden, da deine Bilder nur dekorativer Natur sind (außer dein Plugin funktioniert nur mit div Elementen, dann ist der Hinweis natürlich hinfällig)

L. G.

nielsv · 21.11.2011

AW: Fadingeffekt für Headerbilder mit CSS-Sprite

Danke Myhar,

habe es gerade getestet und statt IMG-Elementen DIVs verwendet. Funzt mit dem Plugin einwandfrei.