# Bilder einfliegen lassen



## arraybreak (23. August 2012)

Abend zusammen,

besteht die Möglichkeit mit Javascript oder jQuery mehrere Bilder von rechts, links, unten, oben einfliegen zu lassen und sie zu einem Bild bilden? Möglichst dass die Bilder vorher nichts sichtbar sind.

Gruß arraybreak


----------



## Aragon0 (24. August 2012)

Mit CSS3:
http://www.w3schools.com/css3/css3_animations.asp
Beachte aber, dass CSS3 auf IE8 nicht unterstützt wird!


----------



## arraybreak (25. August 2012)

Aragon0 hat gesagt.:


> Beachte aber, dass CSS3 auf IE8 nicht unterstützt wird!




das ist natürlich nicht gut  Gibts den hier keine Alternative wie Javascript oder jQuery?


----------



## Aragon0 (25. August 2012)

Du kannst mit javascript überprüfen, ob der Browser die CSS3 Animations unterstützt und falls nicht auf eine Backup-Lösung zurückgreifen. Wie das allerdings mit jQuery oder Javascript funktioniert, weiss ich nicht genau.


----------



## arraybreak (25. August 2012)

Hast du vielleicht auch kurze Info wie man das überprüfen kann?


----------



## tombe (27. August 2012)

Also wenn die "Flugbahn der Bilder nicht zu kompliziert ist, könntest du es so vielleicht lösen:


```
<script language="javascript" type="text/javascript">
var job = window.setInterval("move()", 500);

function move() {

step = 5;

document.getElementById("bild1").style.left = parseInt(document.getElementById("bild1").style.left) + step;
document.getElementById("bild2").style.left = parseInt(document.getElementById("bild2").style.left) + step;
document.getElementById("bild3").style.left = parseInt(document.getElementById("bild3").style.left) - step;
document.getElementById("bild4").style.left = parseInt(document.getElementById("bild4").style.left) - step;

if (parseInt(document.getElementById("bild1").style.left) >= 100) {
	window.clearInterval(job);
}

}
</script>

<div id="bild1" style="position:absolute; left: -50; top: 50; height: 50; width: 50; border-style: solid;"></div>
<div id="bild2" style="position:absolute; left: -80; top: 100; height: 50; width: 50; border-style: solid;"></div>
<div id="bild3" style="position:absolute; left: 500; top: 50; height: 50; width: 50; border-style: solid;"></div>
<div id="bild4" style="position:absolute; left: 300; top: 100; height: 50; width: 50; border-style: solid;"></div>
```

Die "top"- und "left"-Werte sowie die Bedingung für den Abbruch noch anpassen und es könnte eine Lösung sein!?


----------



## arraybreak (27. August 2012)

Danke dir Tombe für deine direkte Hilfe, ich habe mir aber schon selber ein script konstruiert zu dem ich noch eine Frage habe.

Es soll so ablaufen: Grafiken werden eine nach anderen eingeblendet, warten paar Sekunden und fahren dann nach links ein, was sie auch machen, nun will ich, dass die Grafiken beim einfahren um ca. 50% kleiner werden und auch so bleiben. Wie kann ich das anstellen?

Hier mein Code:

```
$(window).load(function() {		
	$('.top-demo img').hide();
			  });
			  
	  $(window).bind('load', function() {
		   var i = 1;
		   var imgs = jQuery('.top-demo img').length;
		   var int = setInterval(function() {
			   //console.log(i); check to make sure interval properly stops
			   if(i >= imgs) clearInterval(int);
			   jQuery('.top-demo img:hidden').eq(0).fadeIn(500);
			   i++;
		   }, 500);
		   
		   
$(document).ready(function() {
  $("#bild1").animate({ pause: 500}, 4000).animate({left:"0px", top:"50px"}, 800);
  $("#bild2").animate({ pause: 500}, 4000).animate({left:"0px", top:"50px"}, 800);
  $("#bild3").animate({ pause: 500}, 4000).animate({left:"0px", top:"350px"}, 800);
  $("#bild4").animate({ pause: 500}, 4000).animate({left:"0px", top:"425px"}, 800);
               
});

});
```


----------

