4 динамических новогодних украшения для любого ресурса
Приближается Новый Год и рождественские каникулы. В воздухе витает ощущения праздника: люди покупают новогодние украшения, вешают гирлянды и вырезают снежинки, создавая праздничное настроение и добавляя ярких красок в окружающее пространство. Виртуальная реальность стала частью нашей повседневной жизни и тоже требует украшения.
Предлагаю несколько простых и эффектных решений, которые оживят ваш сайт, ресурс или блог, добавят ему красок и новогоднего настроения. Вы увидите, что украсить свой сайт не сложно — необходимо желание, немного внимания и усидчивости.
Снег
Распространенное новогоднее украшение ресурсов, ведь зима в северных широтах всегда ассоциируется со снегом.
Пример реализован с помощью CSS, поэтому будет отображаться во всех браузерах вне зависимости от его настроек. Вот как это работает.
Создаем три изображения со снежинками в формате в формате png. Фон делаем прозрачным. Это кадры нашей будущей анимации, от количества снежинок зависит плотность снегопада, поэтому делать много снежинок не стоит. Сделайте снежинки разного размера — это создаст ощущение перспективы, т.е. снегопад будет трехмерным.
Изображения: (реальный размер 400х400 px):
В background-image все используемые изображения перечислим через запятую. Сделаем фон , на который вставим изображения и анимируем их свойством animation.
body {
background-color: #000;
background-image: url('http://pve.su/example/sn2.png'), url('http://pve.su/example/sn3.png'), url('http://pve.su/example/sn1.png');
animation: snow 15s linear infinite;
}
15s — время анимации. Настроим кадры:
@keyframes snow {
0% {
background-position: 0px 0px, 0px 0px, 0px 0px;
}
100% {
background-position: 500px 1000px, 400px 400px, 200px 200px;
}
}
Ничего сложного, несколько картинок и немного кода и вуаля — снегопад на сайте вам обеспечен. Какого вида будут снежинки и как они будут двигаться — зависит от вашей фантазии.
Гирлянда
Еще одно распространенное новогоднее украшение — повесим его к себе на сайт. В примере используется JS.
Выведем саму гирлянду. Обратите внимание — изображение внешнее. Вы можете взять своё, не забывая корректировать нужный вам размер по высоте по логике кода.
#gir {
position:fixed;
top:0;
left:0;
background-image:url('http://lh5.googleusercontent.com/-obNunPiVVd4/VJOuk2f29_I/AAAAAAAAE3Y/SOoFIrFTTkk/s800/gerljanda1.png');
height:36px;
width:100%;
overflow:hidden;
z-index:99
}
#nums_1 {padding:100px}
.gir_1 {background-position: 0 0}
.gir_2 {background-position: 0 -36px}
.gir_3 {background-position: 0 -72px}
position:fixed прикрепит гирлянду к верхнему краю окна и не даст ей двигаться вместе c контентом. Небольшой скрипт и гирлянда приобретает мигание.
function gir() {
nums = document.getElementById('nums_1').innerHTML
if(nums == 1) {document.getElementById('gir').className='gir_1';document.getElementById('nums_1').innerHTML='2'}
if(nums == 2) {document.getElementById('gir').className='gir_2';document.getElementById('nums_1').innerHTML='3'}
if(nums == 3) {document.getElementById('gir').className='gir_3';document.getElementById('nums_1').innerHTML='1'}
}
setInterval(function(){gir()}, 500)
Скорость мигания лампочек задается параметром в setInterval.
Таймер обратного отсчета.
Популярный скрипт «Сколько времени осталось до Нового года». Вот один из вариантов его реализации на JS
Формат — дни, часы, минуты, секунды. Внешний вид можно настроить с помощью css под стили и цвет вашего сайта. Реализован исключительно на JS, поэтому если скрипты отключены — работать не будет.
Новогоднее украшение от Яндекса
Как-то перед новым годом в Яндекс красиво оформили вход в почту и украшение стало очень популярным. Не могу не поделиться такой красотой.
Используется transform со свойством rotate. При наведении курсора на шарики гирлянды они начинают покачиваться и издавать мелодичные звуки. К сожалению, возможности JSFiddle не позволяют загрузить внешний файл, поэтому выкладываю его в облако. (Файл со звуком ny2012.swf, 215 КБ)
И если в прошлой статье рассматривались скелеты, основанные на CSS, то теперь вы видите вполне реальное применение этих возможностей.
Результат со звуком можно посмотреть здесь.
В JSFiddle выложен весь код. Не пугайтесь, что его достаточно много, ничего сложного там нет — использование CSS для описания классов и реализации анимации.
При установке на сайт, не забудьте подключить:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="swfobject.min.js"></script>
<script type="text/javascript" src="newyear.js"></script>
Либо же используйте развернутый скрипт как в JSFiddle.
Удачи! Пусть ваш ресурс выглядит по-новогоднему ярко.
А научиться рисовать хорошие сайты можно на факультете веб-дизайна GeekBrains.