Новый год - прекрасный праздник! Самое время украсить свой сайт новогодней атрибутикой.
И так преступим. Для начала нам нужны сами снежинки, так что качаем/рисуем изображения снежинок с прозрачным фоном и добавляем на сайт.
Также добавляем css оформление:
Теперь приступаем к коду, собственно:
Спасибо за внимание.
1 | <img class="snow" src="sneg.gif" /> |
1 2 3 4 5 6 | img.snow{ width:25px; height:25px; z-index:10; position:absolute;} |
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 | /* Используем jQuery процедуру - .ready(function) */$(document).ready(function() { for (var i=0; i<10; i++) { /* Создадим 10 снежинок */ $(document.body).append("<img class='snow' src='sneg.gif' />"); } $(".snow").each(function() { $(this).css({ /* Зададим снежинкам случайную позицию на сайте */ "top" : generateTop(this) + "px", "left" : generateLeft(this) + "px" }); }); /* Создаем таймер, который будет вызывать функцию moveSnow каждые 10 миллисекунд т.е. 100 раз в секунду */ setInterval(moveSnow, 10);});function moveSnow() { $(".snow").each(function() { /*Все снежинки будем двигать на 4 пикселя вниз, и по синусоиде влево и вправо*/ var thisTop = parseInt($(this).css("top")) + 2 + Math.random() * 2; var thisLeft = parseInt($(this).css("left")) + 5 * Math.sin(thisTop / 100); /* Применяем высчитанную новую позицию снежинке */ $(this).css({ "top" : thisTop+"px", "left" : thisLeft+"px" }); /* Проверяем на вылет за пределы документа по высоте */ if (thisTop > $(document).height() - $(this).height()) { $(this).css("top", -$(this).height() + "px"); } /* Проверяем на вылет за пределы документа по ширине */ if ((thisLeft > $(document).width() - $(this).width() - 10) || (thisLeft < 0)) { $(this).css("left", generateLeft(this) + "px"); } });}function generateLeft(snow) { return Math.random() * ($(document).width() - $(snow).width());}function generateTop(snow) { return Math.random() * ($(document).height() - $(snow).height() );} |