JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div id="wrapper"></div>
JavaScript
$(function() {
$(function(){$('rect').click(function(){alert($(this).index())})});
var paper = Raphael(0, 0, 1200, 1200);
//create and randomize all rectangles
var cubesmixed = [];
var cubes;
for (var i = 0; i < 149; i++) {
cubes = paper.rect(Math.floor(Math.random() * 2000), Math.floor(Math.random() * 2000), 0, 0);
cubes.animate({
width: 25,
height: 25
}, 500, "bounce");
cubesmixed.push(cubes);
}
cubesmixed.forEach(function(cube){
cube.click(function(){
console.log("Cube clicked: " + cube.id);
});
});
var t = paper.text(50, 50, "Mario");
var t2 = paper.text(50, 150, "Link");
t.attr({
'font-family': 'Verdana'
});
t2.attr({
'font-family': 'Helvetica'
});
//give attr to rects
//for (var i = 0; i < 147; i++) { cubesmixed[i].attr({ fill: '#c22000'}); }
t.hover(function() {
console.log(cubesmixed);
t.animate({
transform: 't40,0r-90t-0,0'
}, 600, 'bounce');
cubesmixed[0].animate({
x: '400',
y: '225',
fill: '#000'
}, 1500, "bounce");
cubesmixed[145].animate({
x: '425',
y: '225',
fill: '#000'
}, 1500, "bounce");
cubesmixed[146].animate({
x: '375',
y: '225',
fill: '#000'
}, 1500, "bounce");
cubesmixed[1].animate({
x: '250',
y: '100',
fill: '#c22000'
}, 1500, "bounce");
cubesmixed[2].animate({
x: '275',
y: '100',
fill: '#c22000'
}, 1500, "bounce");
cubesmixed[3].animate({
x: '300',
y: '100',
fill: '#c22000'
}, 1500, "bounce");
cubesmixed[4].animate({
x: '325',
y: '100',
fill: '#c22000'
}, 1500, "bounce");
cubesmixed[5].animate({
x: '350',
y: '100',
fill: '#c22000'
}, 1500, "bounce");
cubesmixed[6].animate({
x: '225',
y: '125',
fill: '#c22000'
}, 1500, "bounce");
cubesmixed[7].animate({
x: '250',
...