Bilder einfliegen lassen

[arraybreak]

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]

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

 

[arraybreak]

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]

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]

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

 

[tombe]

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]

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);
               
});

});