スクロールごとに、ボックスの位置がランダムの値を移動する
デモ
Masonry を使って、ボックスを絶対配置に
元々のCSSの top , left の値をそれぞれ保持しておいて、そこから乱数の値をプラス or マイナスさせる
ボックスがウィンドウの外に出ないように調整、など
$('.box').each(function(){
var top = parseInt($(this).css('top'));
var left = parseInt($(this).css('left'));
$(this).data('data-top',top);
$(this).data('data-left',left);
});
function random() {
$('.box').each(function(){
var top = parseInt($(this).css('top'));
var left = parseInt($(this).css('left'));
var randomTop = -25 + Math.floor( Math.random() * 100 );
var randomLeft = -25 + Math.floor( Math.random() * 100 );
if ( top - randomTop > 50 ) {
var defaultTop = $(this).data('data-top');
var top = defaultTop;
}
if ( left - randomLeft > 50 ) {
var defaultLeft = $(this).data('data-left');
var left = defaultLeft;
}
$(this).animate({'top': ( top + randomTop ) + 'px','left': ( left + randomLeft ) + 'px'},500,'easeInCubic');
});
}
random();
var timer = false;
$(window).scroll(function() {
if (timer !== false) {
clearTimeout(timer);
}
timer = setTimeout(function() {
random();
}, 200);
});
○参考