Animierter Hintergrund mit CSS - Java

 

Schon länger war ich auf der Suche nach einer Lösung einen normalen Hintergrund zu animieren, sprich bewegte Bilder. Das dies mit GIF Funktioniert ist klar, aber nicht in diesen Umfang und einer guter Qualität.

Einfach anzupassen, einfach Bilder bearbeiten, CSS Datei anpassen wen nötig. Wichtig ist das ihr die scripe einbindet, sollte man es für eine bestehende Website benötigen.

Ihr findet in dem Paket alle wichtigen Informationen, eine CSS datei, eine Index.html das ein Beispiel darstellen soll. Man kann auch die Positionen und die geschwindigkeit ändern, z.B.

    <script type="text/javascript">
        $(function(){
       
          $('#background').css({backgroundPosition: '0px 0px'});
       
           
            $('#background').animate({
                backgroundPosition:"(-10000px -0px)"
            }, 480000, 'linear');
           
        });
    </script>

Für schnellere Animation z.B. den Wert 10000 auf 15000 ändern. Einfach etwas rumprobieren.

DOWNLOAD

Viel Erfolg.

 

Anleitung genau genommen...

Nachdem das Snippet wohl wirklich gut angekommen ist musste ich feststellen das mein Email Postfach fast überqualmte. Anscheinend ist es nicht so einfach, also werde ich euch gerne auf die Sprünge helfen.

What to do?

Als aller erstes sollte man das Paket oben Downloaden, entpacken und die .html Datei in einen Explorer ziehen. Nun seht es euch genau an, was passiert hier?

Im endefekt sind es in diesem Beispiel genau 3 Bilder, .png Bilder um genau zu sein. Die Bilder findet Ihr ja "img" Ordner.

Was genau passiert?

Durch das javascript wird die Position im kurzen Tackt geändert, somit verschiebt sich die Position und der Hintergrund wird verschoben.

Wenn man sich die index.html ansieht wird man schnell feststellen durch was es gesteuert wird.

1.) Im Header Bereich

 

<link rel="stylesheet" type="text/css" href="css/style.css" />

  

<script src="js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="js/jquery.backgroundPosition.js" type="text/javascript"></script>

<script type="text/javascript">

$(function(){

 $('#midground').css({backgroundPosition: '0px 0px'});

 $('#foreground').css({backgroundPosition: '0px 0px'});

 $('#background').css({backgroundPosition: '0px 0px'});

$('#midground').animate({

backgroundPosition:"(-10000px -2000px)"

}, 240000, 'linear');

$('#foreground').animate({

backgroundPosition:"(-10000px 0px)"

}, 400000, 'linear');

$('#background').animate({

backgroundPosition:"(-10000px -2000px)"

}, 480000, 'linear');

});

</script>

 

als erster wird eine style.css eingebunden, somit sollte man auch bei seinen Projekt den "css" mit Hochladen. Als nächstes kommen die .js Dateien, einmal die Bibliotheke für jQuery und einmal das backgroundposition Script. Ebenfalls den Ordner "js" also beachten.

Darunter könnt ihr dann das Snippet sehen. Da wir 3 Bilder haben stehen folgende Bezeichnungen da.

  • midground
  • foreground
  • background

Das wars mal mit dem header und dem Snippet.

<body>

Wichtig nun ist das man die divs einbindet die man auch verwenden möchte. In der Beispieldatei also 

  • midground
  • foreground
  • background

Hier ist nur zu beachten das die divs nicht das bestehende Layout verändern, notfalls muss man sie richtig "verschachteln". 

Das schwierigste im Ironie Munde gesagt ist nun die Hintergrundbilder zu bearbeiten die im "img" Ordner vorhanden sind.

Einfach bearbeiten - und wichtig dabei ist das Ihr eure Bilder unter .png speichert. Man sollte dann noch den Bewegungsgrad der Bilder anpassen möchte man z.B. nicht das der Hintergrund linear verfährt.

Sollte es euch aufgefallen sein, ganz oben auf meiner Seite flitzt ein "rosa" Balken hin und her. So einfach geht´s.

Also nochmal zum mitschneiden. Man benötigt NUR die 3 header Zeilen wie oben geschrieben und im Body bereich die div´s. 

Dir hat meine Anleitung gefallen und dir Zeit gespart? Ganz oben gibt´s eine Kaffeekasse mit der man mit Paypal etc. etwas einwerfen kann.

Das Snippet ist übrigends von http://css-tricks.com