[JavaScript] Hintergrund wie bei Google

everniZe · 10. Juni 2010

Hintergrund wie bei Google

Hallo,

viele von euch werden ja schon die neue Google Seite gesehen haben.

Meine Frage:
weiß jemand wie das geht? Eine JPG Datei so automatisch über die ganze Seite skalieren zu lassen und mit Fade in rein zu laden?

Wäre top wenn mir jemand den code dafür geben könnte

Danke für jede Hilfe!

Anzeige

powernator · 10. Juni 2010

AW: Hintergrund wie bei Google

Vielleicht über einen div-Layer (fade in ist da einfach mit einem Framework möglich)?

Nanobyte · 10. Juni 2010

AW: Hintergrund wie bei Google

So geht das z.b. Das Bild wird allerdings gestreckt und Verzerrt, aber das lässt sich mit Javascript Problemlos ändern.

Demo

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"/>

 <meta name="language" content="Deutsch" />
 <meta name="content-language" content="de"/>
 
 <!-- Inline Stylesheet -->
 <style type="text/css">
 #background { display: none; }
 #background, #overlay {
 position: absolute;
 top: 0; left: 0;
 width: 100%;
 height: 100%;
 z-index: -60;
 }
 #overlay { z-index: -50; }
 
 #wrapper { z-index: 10!important; width: 600px; margin: 50px auto 0; }
 </style>
 
 <!-- Extern Javascript -->
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
 
 <!-- Inline Javascript -->
 <script type="text/javascript">
 var i = new Image();
 i.src = 'example.jpg';
 
 
 $(function(){
 $('<img src="example.jpg" id="background"/>').appendTo('body').fadeIn(1200);
 $('<div id="overlay"/>').appendTo('body');
 });
 </script>

 <title>Website title</title>
 </head>

 <body>
 
 <div id="wrapper">
 <h2>Headline</h2>
 </div>
 
 </body>

</html>

onip · 10. Juni 2010

AW: Hintergrund wie bei Google

finde das mit den hintergund auch gut.
daher bin ich von igoogle zu standard umgestiegen

hier meine lösung mit MooTools

@Nanobyte
hoffe du hast nix dagegen, dass ich dein bild genommen hab.

Murdoc · 10. Juni 2010

AW: Hintergrund wie bei Google

soll ich noch ne protoype-version coden (mit/ohne sau) oder reicht das so?

~ erledigt -> closed

Nützliche Suchen

[JavaScript] Hintergrund wie bei Google

Videos zum Themenbereich