I am currently working on a JavaScript script that will animate 10 images flying into a div, appearing side by side. The goal is to have each image fly in randomly with a unique transition.
At the moment, my script is almost complete as I've successfully implemented the random animation for the icons. However, all of them are using the same transition effect. How can I assign different transitions to each image, such as rotation, etc?
Here's the jQuery code I'm using:
var av_icons = ["/2015/06/icon1.png",
"/2015/06/icon2.png",
"/2015/06/icon3.png",
"/2015/06/icon4.png",
"/2015/06/icon5.png",
"/2015/06/icon6.png",
"/2015/06/icon7.png",
"/2015/06/icon8.png",
"/2015/06/icon9.png",
"/2015/06/icon10.png"
];
function shuffle(array) {
var currentIndex = array.length,
temporaryValue, randomIndex;
while (0 !== currentIndex) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
shuffle(av_icons);
$(".icon-slider").css("position", "relative");
var timeout = 0;
var left = 0;
var count = 0;
var top = 1000;
$.each(av_icons, function(index, value) {
if (left > 600) {
left = 0;
top = 1090;
}
timeout += 500;
left += 150;
count++;
$(".icon-slider").append("<img src='http://domain.com/wp-content/uploads" + value + "' height='80' width='90' class='av_icon_" + index + "' />");
$(".av_icon_" + index).css({
"position": "absolute",
"top": "-1000px",
"text-indent": "90px"
});
$(".av_icon_" + index).animate({
textIndent: 0,
top: "+=" + top,
left: "+=" + left,
step: function(now, fx) {
$(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
},
}, timeout, function() {});