Javascript

【Javascript】キャンバスとJavaScriptを使用して雪を降らせるSnowfall.js

October 4, 2016

Snowfall.jsはキャンバスとJavaScriptを使用して、雪を降らせるためのアニメーションJavaScriptプラグイン。

CSS

html, body{
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
}
html{
    overflow-x: hidden;
    overflow-y: hidden;
    background-color: #333;
}

HTML

<body>
<canvas id="canvas"></canvas>
</body>

JS

	<script src="js/snowfall.min.js"></script>
	<script>
		(function(window, document){
			document.addEventListener('DOMContentLoaded', function(){
				var snowfall = new Snowfall();
				snowfall.init({
					imgUrls: ['./img/snowflake_1.png', './img/snowflake_2.png', './img/snowflake_3.png'],
					imgScale: 0.25,
					canvas: document.querySelector('#canvas')
				}).start();
			}, false);
		})(window, document);
	</script>

Download