要素を画面上に沢山降らせる

Ads

Result

jQuery

var etx = {
    init: function() {
        etx.callFontFlakes();
    },
    callFontFlakes: function() {
        window.setInterval(function() {
            etx.fontFlake();
        }, 10);
    },
    fontFlake: function() {
        // 数字とランダム処理
        var stageWidth = $(window).width();
        var stageHeight = $(window).height();
        var randomEntry = Math.ceil(Math.random() * stageWidth);
        var preRandomFontSize = Math.ceil(Math.random() * 40);
        var randomFontSize = preRandomFontSize + 10;
        var flakeName = 'flake-' + randomEntry;
        var grayScale = Math.ceil(Math.random() * 256);
        var hue = 'rgb(' + grayScale + ',' + grayScale + ',' + grayScale + ')';

        // 生成した要素を降らせる
        $('<div />', {
            text: randomEntry,
            id: flakeName,
        }).appendTo('body').addClass('fontFlake').css('left', randomEntry).css('font-size', randomFontSize).css('color', hue).animate({
            "top": "+=" + stageHeight,
            opacity: 0
        }, 5000, function() {
            $('#' + flakeName).remove();
        });
    }
};
$(document).ready(function() {
    etx.init();
});​

via

jQuery font flake / snow flake experiment

タイトルとURLをコピーしました