Bewegtes Hintergrundbild

11/27/2011 01:16 FizzeBu#1
Hoi,
ich will ein Design erstellen mit einem bewegten Hintergrundbild, und auf der Suche nach etwas passendem bin ich über diese Seite: [Only registered and activated users can see links. Click Here To Register...] gestolpert.
Das ist genau was ich will, aber ich verstehe nicht was was ist. Ich kann den Code der für den Hintergrund verwendet wird nicht finden, kann mir jemand die Stelle zeigen oder die Funktion die ich dafür brauche? Wäre echt super. Ich habe auch keine Dokumentation gefunden, wenn jemand einen Link hätte wäre ich sehr demjenigen sehr verbunden.
Hoffe jemand weiß Bescheid. :)
11/27/2011 12:40 sava#2
Hintergrund Bild animiert? Ansich nicht!

Das einzige was vorstellbar ist, dass du ein img tag machst und das in den Hintergrund legst mit z-index, das Bild kannste dann ja auch einfacher animieren.
11/27/2011 18:44 FizzeBu#3
Guck dir mal die Seite an, dann verstehst du was ich meine, da ist der Hintergrund animiert. ;)
11/28/2011 14:44 sava#4
Das einzige Hintergrundbild was dort "animiert" ist, ist nur "animiert" weil die Rakete nach aussen fliegt und sich der Hintergrund von alleine mit verschiebt (wiederholt)...
11/28/2011 17:21 Heberg#5
Ganz einfach !

Wenn du in "Div" schreibst, gibst du dem div, der dein Hintergrund ist, eine ID.
Diese wirst du denn im CSS ein Animiertes Hintergrund Bild zuweisen.

HTML Code:
Das, was im HTML steht :
<div id="container"></div>

Das, was im CSS steht :

#container {
width: 1250px;
height: 1000px;
[COLOR="Red"]background-image: url(Bilder/Animation.gif);[/COLOR]
}
MfG
Heberg
11/28/2011 18:15 NotEnoughForYou#6
Quote:
Originally Posted by Heberg View Post
Ganz einfach !

Wenn du in "Div" schreibst, gibst du dem div, der dein Hintergrund ist, eine ID.
Diese wirst du denn im CSS ein Animiertes Hintergrund Bild zuweisen.

HTML Code:
Das, was im HTML steht :
<div id="container"></div>

Das, was im CSS steht :

.container {
width: 1250px;
height: 1000px;
[COLOR="Red"]background-image: url(Bilder/Animation.gif);[/COLOR]
}
MfG
Heberg
du hast allerdings ne Klasse in deiner CSS stehen ...
11/28/2011 18:19 Heberg#7
Quote:
Originally Posted by NotEnoughForYou View Post
du hast allerdings ne Klasse in deiner CSS stehen ...
Fail, danke, habs korriegiert
11/28/2011 21:49 FizzeBu#8
Ich weiß schon wie man einen BG zuweist, ich benutze kein .gif, ich will doch einfach nur wissen wie dieses webkit Teil funktioniert. ;)
11/29/2011 09:12 sava#9
Also wenn du wissen willst was webkit ist: [Only registered and activated users can see links. Click Here To Register...] kurform: ist ne Browser Engine und spezielle webkit befehle im CSS werden auch nur in Browsern mit webkit angezeigt.
11/29/2011 21:22 FizzeBu#10
Ja, das weiß ich auch. ;o
Wie ich in meinem ersten Post auch gesagt habe will ich wissen was in diesem Code:
HTML Code:
<style type="text/css">

  #outerspace {
    position: relative;
    height: 400px;
    background: #0c0440 url(/images/outerspace.jpg);
  }
  div.rocket {
    position: absolute;
    bottom: 10px;
    left: 20px;
    -webkit-transition: all 3s ease-in;
    -moz-transition: all 3s ease-in;
    -o-transition: all 3s ease-in;
    -ms-transition: all 3s ease-in;
  }
  div.rocket img {
    -webkit-transition: all 2s ease-in-out;
    -moz-transition: all 2s ease-in-out;
    -o-transition: all 2s ease-in-out;
    -ms-transition: all 2s ease-in-out;
  }
  #outerspace:hover div.rocket {
    -webkit-transform: translate(540px,-200px);
    -moz-transform: translate(540px,-200px);
    -o-transform: translate(540px,-200px);
    -ms-transform: translate(540px,-200px);
  }
  #outerspace:hover div.rocket img {
    -webkit-transform: rotate(70deg);
    -moz-transform: rotate(70deg);
    -o-transform: rotate(70deg);
    -ms-transform: rotate(70deg);
  }

</style>
dafür sorgt dass sich der Hintergrund bewegt. Ich kenn mich mit Webdesign eigentlich ein bisschen aus, aber für diesen Code reichts halt nicht, darum erbitte ich Hilfe.
11/30/2011 09:00 sava#11
Schau dir "#outerspace" mal mim Firebug oder so an, da steht mehr drin als im Code beschrieben wird.

Code:
-webkit-transition:all 3s ease-in;
-moz-transition:all 3s ease-in;
-o-transition:all 3s ease-in;
-ms-transition:all 3s ease-in;
Das ist der Code den du benötigst ;)