jQuery

【jQuery】サイト上にCSS3アニメーションとjQueryの桜の花びらが舞うjQuery Sakura

September 15, 2016
jQuery Sakura

jQuery Sakuraはサイトに風に揺られた桜の花びらを実装するCSS3アニメーションとjQuery。

CSS&JS

<!-- In your HTML head -->
<link type="text/css" rel="stylesheet" media="screen" href="jquery-sakura.min.css" />

<!-- End of your HTML body -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<script src="jquery-sakura.min.js"></script>
<script>
    // domReady
    $(function() {
        $('body').sakura();
    });

    // windowLoad
    $(window).load(function() {
        $('body').sakura();
    });
</script>

花びらの生成を無効

$('#stop_sakura').on('click', function() {
    $('body').sakura('stop');
});

Configuration

$(window).load(function() {
    $('body').sakura('start', {
        blowAnimations: [
            'blow-soft-left',
            ...
        ],                   // Horizontal movement animation names
        className: 'sakura', // Class name to use
        fallSpeed: 1,        // Factor for petal fall speed
        maxSize: 14,         // Maximum petal size
        minSize: 9,          // Minimum petal size
        newOn: 300,          // Interval after which a new petal is added
        swayAnimations: [    // Swaying animation names
            'sway-0',
            ...
        ]
    });
});

MITライセンス