Fade In gallery animation
CSS
.box {
cursor: pointer;
width: 330px;
height: 215px;
background: url(http://images.sodahead.com/polls/000383217/polls_491px_Heart_left_highlight_jon_01.svg_5534_280472_answer_1_xlarge.png);
background-size: cover;
text-align: center;
padding: 90px 50px;
}
JavaScript
var animateBoxes = function () {
var arrmes = ["В этом запросе для каждой модели ПК определяется их количество и средняя стоимость. Все строки с одинаковыми значениями model (номер модели) образуют группу, и на выходе SELECT вычисляются количество значений и средняя цена для каждой группы. Результатом выполнения запроса будет следующая таблица","В этом запросе для каждой модели ПК определяется их количество и средняя стоимость. Все строки с одинаковыми значениями model (номер модели) образуют группу, и на выходе SELECT вычисляются количество значений и средняя цена для каждой группы. Результатом выполнения запроса будет следующая таблица дела?","пока","думаешь, я робот?","возможно, ты прав","я новый интеллект"];
var MAX_BOXES = 8;
var numBoxes = 0;
var boxIdList = [];
var timer = null;
var ANIMATE_SPEED = 500;
var boxIds = 0;
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function get_mess() {
return arrmes[getRandomInt(0,arrmes.length-1)];
}
var onMouseEnter = function (e) {
window.clearTimeout(timer);
timer = null;
var el = e.currentTarget || e.srcElement;
var box = $(el);
};
var onMouseLeave = function (e) {
removeOldestBox();
start();
};
// Adds the box and animates in/out
var addBox = function () {
var makeBox = function () {
var newBox = $('<div class="box" id="box' + boxIds + '"/>').text(get_mess());
return newBox;
};
var newBox = makeBox();
var boxSize = newBox.width();
var posx = (Math.random() * ($(document).width() - 430)).toFixed();
var posy = (Math.random() * ($(document).height() - 390)).toFixed();
newBox.css({
'position': 'absolute',
'left': posx + 'px',
'top': posy + 'px',
'display': 'none'
}).appendTo('body').fadeIn(ANIMATE_SPEED...