Восьмибитный снежок (8-BIT) на CSS3 и Javascript
Необычный восьмибитный снежок для вашего сайта
Для начала посмотрите ДЕМО
Установка:
1#: В самый низ вашего CSS вставьте:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
span.snow { display: block; height: 24px; position: fixed; width: 24px; -webkit-animation: drift 5s ease-in-out infinite; } span.snow.a { background-image: url(/img/snow-a.png); } span.snow.b { background-image: url(/img/snow-b.png); } span.snow.c { background-image: url(/img/snow-c.png); } span.snow.d { background-image: url(/img/snow-d.png); -webkit-animation: spin 5s infinite linear, drift 5s infinite ease-in-out; } @-webkit-keyframes drift { 0% { -webkit-transform: translatex(20px); } 50% { -webkit-transform: translatex(-20px); } 100% { -webkit-transform: translatex(20px); } } @-webkit-keyframes spin { 0% { -webkit-transform: rotate(0deg); } 50% { -webkit-transform: rotate(180deg); } 100% { -webkit-transform: rotate(360deg); } } |
2#: Следующий код поместите сразу после открывающего тега <body>:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<script> window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); }; })(); var canvas, ctx, height, width, flakes, flake_count, flake_size; function draw_frame() { for (var i = 0; i < flakes.length; i++) { var flake = flakes[i]; flake.y += flake.speed; if (flake.y > height) { flake.y = -flake_size } flake.style.top = flake.y.toString() + 'px' } } function animate() { requestAnimFrame(animate); draw_frame(); } var width, height, types, body, flakes; function init() { height = document.body.offsetHeight, width = document.body.offsetWidth, flakes = [], flake_count = 200, flake_size = 24; var types = ['a', 'a', 'a', 'a', 'b', 'c', 'd'], body = document.body; for (var i = 0; i < flake_count; i++) { var x = width * Math.random(); var y = height * Math.random(); var type = Math.floor(Math.random() * types.length); var flake = document.createElement('span'); flake.className = 'snow ' + types[type]; flake.style.left = x.toString() + 'px'; flake.style.top = y.toString() + 'px'; flake.style['-webkit-animation-duration'] = ((Math.random() * 15) + 5).toString() + 's'; flake.x = x; flake.y = y; flake.speed = (Math.random() + 0.15); body.appendChild(flake); flakes.push(flake); } animate(); } window.onload = function() { init(); }; </script> |
Осталось лишь залить все картинки из прикреплённого архива в папку img
Автор публикации
Я не понял вашего вопроса, но постараюсь на него ответить...
