jQuery Tutorial: mitskalierende Hintergrundbilder

André Tutorials, Webentwicklung 4 Kommentare

jQuery Tutorial: mitskalierende Hintergrundbilder

Flash ist nicht erst seit der Einführung von HTML5 und dessen neuem Videotag, welches h.264 abspielen kann auf dem absteigenden Ast. Flash ist properitär, die Suchmaschinen haben ihre Probleme, sehr Ressourcenfressend (zumindest auf dem Mac) und läuft zudem weder auf dem iPhone, noch auf dem iPad von Apple. Vorteil von Flash war immer das es sehr dynamisch ist und schöne Effekte kreiert werden können.

Doch diese Grenzen heben sich langsam dank jQuery und anderen Frameworks auf. Sie bringen viele Animationstechniken mit, die Scrollbare Inhalte, Farbübergänge oder ähnliches bewerkstelligen können. In einigen vorherigen Tutorials habe ich schon die jQuery Tools beschrieben und was für schöne Sachen man damit anstellen kann.

Eine schöner Effekt war bzw. ist das mitskalieren eines großen Hintergrundbildes, wie z.B. auf der Website der Deutschen Post. Dies passt sich automatisch der Browser- bzw. Auflösungsgröße des jeweiligen Users an. Zusätzlich ein paar schöne halb-transparente Text boxen und eine schöne Website ist fertig gestaltet.

Umsetzung

Doch wie macht man das? Eigentlich ganz einfach. Wir benötigen dafür jQuery (aktuell in Version 1.4.2) und fragen via Eventabfrage ab ob der User die Browsergröße verändert. Wenn dies geschieht, wird einem (möglichst gut aufgelöstem) Bild auf der Seite mitgeteilt das es seine größe verändern soll – und zwar auf die des Browser-Viewports.

Hört sich erst einmal ganz einfach an – und das ist es im Prinzip auch, soweit man natürlich schon etwas mit JavaScript bzw. jQuery gearbeitet hat.

CSS

body{margin:0px;}
#background{position:fixed; top:0; left:0; z-index:0;}
#ausgabe{background:black; padding:10px 15px; margin:10px; border:1px solid #cecece; color:white; opacity:0.8; position:absolute; top:140; z-index:10; font-size:12px; width:500px;}

HTML

<body>
     <img src="bg.jpg" alt="Background-Image" id="background" />
     <div id="ausgabe">Ein Layer über dem Hintergrundbild</div>
</body>

Wir legen eine kleine HTML Datei an, welche nur das Bild zur Skalierung und eine halbtransparente Ebene mit dem Content beinhält.

JavaScript

$(document).ready(function(){
    var width  = $(window).width();
    $("#background").width(width);
    $(window).resize(function(){
        width  = $(window).width();
        $("#background").width(width);
    });
})

Wenn das Dokument fertig geladen ist, wird die größe des Browser-Viewports an die Variable width weitergegeben und die ID Background (das Bild) in der Breite an das Fenster angepasst. Die höhe skaliert sich automatisch mit. Das gleiche soll natürlich auch passieren wenn sich die Fenstergröße ändert. Dafür fragen wir das Event resize in Verbindung mit dem Browserfenster (window) ab. Sollte sich hier etwas tun wird das Event ausgelöst und ebenfalls die Breite angepasst.

Also insgesamt ein leichtes diesen Effekt zu nutzen. Optimal z.B. für Seiten im Vintage Style.

Tags: , , , , ,

Über den Autor

André Teich arbeitet als Webentwickler und Webdesigner bei der Firma Tintometer in Dortmund. Die Fachgebiete sind die Webentwicklung mit PHP, JavaScript, MySQL, CSS und die Designarbeiten mit der Adobe Creative Suite.

Dieser Artikel wurde am 03. Mai 2010 von André geschrieben. André hat bereits 35 Artikel auf Chukki.de geschrieben.

Website: http://www.AndreTeich.de

Ähnliche Beiträge

4 Kommentare zu "jQuery Tutorial: mitskalierende Hintergrundbilder"

Tweets die jQuery Tutorial: Fullscreen Bild – mitskalierend | Chukki.de erwähnt -- Topsy.com schrieb am 4. Mai um 09:34 Uhr:

[...] Dieser Eintrag wurde auf Twitter von André Teich, DJ Hennion erwähnt. DJ Hennion sagte: Neuer Beitrag auf Chukki.de – mitskalierende Hintergrundbilder mit #jQuery http://bit.ly/9wbhFG #fb #webentwicklung #webdevelopment #j… [...]

Thorwald schrieb am 29. Juli um 11:14 Uhr:

Klingt erstmal ganz gut.
EIn Test ergibt aber ein negatives Ergebnis.
Wenn ich alles richtig gemacht habe, wird das Bild zwar skaliert, aber wenn ich ein Bild im Querformat habe und das Browserfenster höher ziehe als breit, dann ist der Rest unten weiß. Also das Bild wird nur über die Breite und nicht über die Höhe mitskaliert.

Vielleicht kannst du das ja noch nachliefern :)

http://buildinternet.com/2009/02/supersized-full-screen-backgroundslideshow-jquery-plugin/

Thorwald schrieb am 29. Juli um 11:15 Uhr:

Nachtrag:

Probleme müsste es hier z.B. vor allem beim iPad und iPhone geben… und gerade dafür nimmst du schließlich jquery statt Flash ;)

André schrieb am 29. Juli um 13:07 Uhr:

Ich werd es mir nochmal anschauen und dann nochmal was dazu schreiben. Vielen Dank für den Hinweis

Kommentar schreiben: