4 динамических новогодних украшения для любого ресурса

Эффектные новогодние украшения для вашего сайта
15 декабря 2015182424Наталья Игнатова54411030

Приближается Новый Год и рождественские каникулы. В воздухе витает ощущения праздника: люди покупают новогодние украшения, вешают гирлянды и вырезают снежинки, создавая праздничное настроение и добавляя ярких красок в окружающее пространство. Виртуальная реальность стала частью нашей повседневной жизни и тоже требует украшения.
Предлагаю несколько простых и эффектных решений, которые оживят ваш сайт, ресурс или блог, добавят ему красок и новогоднего настроения. Вы увидите, что украсить свой сайт не сложно — необходимо желание, немного внимания и усидчивости.

Снег

Распространенное новогоднее украшение ресурсов, ведь зима в северных широтах всегда ассоциируется со снегом.
Пример реализован с помощью 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.

Удачи! Пусть ваш ресурс выглядит по-новогоднему ярко.

А научиться делать хорошие сайты можно на профессии «Веб-разработчик».