【jQuery】サイト上にCSS3アニメーションとjQueryの桜の花びらが舞う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ライセンス

 
jQuery Sakura

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

  • LATEST
  • RELATED
  • POPULAR