Приятный расслабляющий снежок на CSS3 и jQuery
Очень приятный снежок, плавно появляющийся и так же плавно исчезающий
Для начала посмотрите ДЕМО
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 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 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 |
@-webkit-keyframes snowLeft { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3D(100px, 1500px, 0) rotate(250deg); } } @-webkit-keyframes snowRight { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; -webkit-transform: translate3D(-100px, 1500px, 0) rotate(-500deg); } } @-moz-keyframes snowLeft { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate3D(100px, 1500px, 0) rotate(250deg); } } @-moz-keyframes snowRight { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate3D(-100px, 1500px, 0) rotate(-500deg); } } @-ms-keyframes snowLeft { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate3D(100px, 1500px, 0) rotate(250deg); } } @-ms-keyframes snowRight { 0% { opacity: 0; } 50% { opacity: 1; } 100% { opacity: 0; -moz-transform: translate3D(-100px, 1500px, 0) rotate(-500deg); } } |
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 |
<script type="text/javascript"> var snowType = '*'; var snowParticles = 450; var snowSize = 30; for (i=0;i<=snowParticles;i++) { $('body').append('<div class="snow">'+snowType+'</div>'); } $('.snow').each(function() { var selectWind = Array('snowLeft','snowRight'); var wind = selectWind[Math.round(Math.random()*selectWind.length)]; var duration = (Math.random()*10)+20; var size = Math.round(Math.random()*snowSize)+8; var left = Math.round(Math.random()*100); var delay = Math.round(Math.random()*duration); var visibility = Math.round(Math.random()*10); $(this).css({ 'color':'rgba(255,255,255,.'+visibility+')', 'text-shadow':'0 0 10px rgba(255,255,255,.'+visibility+')', 'font-family':'"Times", serif', 'font-size':size, 'position':'fixed', 'z-index':'200', 'opacity':'0', '-webkit-animation':wind+' '+duration+'s infinite', '-webkit-animation-delay':delay+'s', '-moz-animation':wind+' '+duration+'s infinite', '-moz-animation-delay':delay+'s', '-ms-animation':wind+' '+duration+'s infinite', '-ms-animation-delay':delay+'s', 'left':left+'%', 'top':'0' }); }); </script> |
