Для профессионального веб-дизайнера работа над оформлением сайта не заканчивается с его созданием. Веб-сайт требует постоянных доработок, изменений оформления. Смена сезонов или наступление праздников — это ещё один повод для того, чтобы привлечь внимание посетителей сайта.

Новогоднее оформление сайта

Новогоднее оформление сайта

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

Для того, чтобы украсить сайт по-новогоднему, вы можете добавить:

  • анимированные гирлянды и падающие снежинки;
  • еловые веточки;
  • северных оленей;
  • снеговиков;
  • снежинки;
  • ёлочные игрушки и украшения;
  • новогодние ёлки;
  • санту, деда мороза;
  • рождественские носки и шапки и др.

Новогодние плагины WordPress

Одним из способов установки новогодней анимации на ваш сайт является применение плагинов. Вы можете выбрать тот плагин, который совместим с вашей версией WordPress. Установка занимает несколько минут, а в результате и у вас, и у посетителей сайта появится новогоднее настроение:

  • Let It Snow — анимация падающего снега.
  • WP Super Snow — вы можете настроить скорость анимации и размер падающих снежинок.
  • Snow, Balloons and more.
  • Xmas Lights.
  • Christmas Ball on Branch.
  • Fireworks.
  • New Year Countdown.
  • POWr Holiday Countdown.
  • Merry Christmas Everyone.
  • Holiday Message.
  • Christmas Message.
  • WP-Christmas.

Как вставить анимацию с падающими снежинками на ваш сайт?

Вставьте код, размещённый ниже, в раздел footer.php в редакторе сайта, в самом конце перед </body>:

70
71
72
73
74
75
76
77
78
79
80
81
<SCRIPT type=«text/javascript»>
var snowmax=35
var snowcolor=new Array(«#aaaacc»,«#ddddff»,«#ccccdd»,«#f3f3f3»,«#f0ffff»)
var snowtype=new Array(«Times»,«Arial»,«Times»,«Verdana»)
var snowletter=«*»
var sinkspeed=0.6
var snowmaxsize=40
var snowminsize=20
var snowingzone=1
var snow=new Array()
var marginbottom
var marginright
var timer
var i_snow=0
var x_mv=new Array();
var crds=new Array();
var lftrght=new Array();
var browserinfos=navigator.userAgent
var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
var ns6=document.getElementById&&!document.all
var opera=browserinfos.match(/Opera/)
var browserok=ie5||ns6||opera
function randommaker(range) {
rand=Math.floor(range*Math.random())
return rand
}
function initsnow() {
if (ie5 || opera) {
marginbottom = document.body.scrollHeight
marginright = document.body.clientWidth15
}
else if (ns6) {
marginbottom = document.body.scrollHeight
marginright = window.innerWidth15
}
var snowsizerange=snowmaxsizesnowminsize
for (i=0;i<=snowmax;i++) {
crds[i] = 0;
lftrght[i] = Math.random()*15;
x_mv[i] = 0.03 + Math.random()/10;
snow[i]=document.getElementById(«s»+i)
snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
snow[i].size=randommaker(snowsizerange)+snowminsize
snow[i].style.fontSize=snow[i].size+‘px’;
snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
snow[i].style.zIndex=1000
snow[i].sink=sinkspeed*snow[i].size/5
if (snowingzone==1) {snow[i].posx=randommaker(marginrightsnow[i].size)}
if (snowingzone==2) {snow[i].posx=randommaker(marginright/2snow[i].size)}
if (snowingzone==3) {snow[i].posx=randommaker(marginright/2snow[i].size)+marginright/4}
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2snow[i].size)+marginright/2}
snow[i].posy=randommaker(2*marginbottommarginbottom2*snow[i].size)
snow[i].style.left=snow[i].posx+‘px’;
snow[i].style.top=snow[i].posy+‘px’;
}
movesnow()
}
function movesnow() {
for (i=0;i<=snowmax;i++) {
crds[i] += x_mv[i];
snow[i].posy+=snow[i].sink
snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i])+‘px’;
snow[i].style.top=snow[i].posy+‘px’;
if (snow[i].posy>=marginbottom2*snow[i].size || parseInt(snow[i].style.left)>(marginright3*lftrght[i])){
if (snowingzone==1) {snow[i].posx=randommaker(marginrightsnow[i].size)}
if (snowingzone==2) {snow[i].posx=randommaker(marginright/2snow[i].size)}
if (snowingzone==3) {snow[i].posx=randommaker(marginright/2snow[i].size)+marginright/4}
if (snowingzone==4) {snow[i].posx=randommaker(marginright/2snow[i].size)+marginright/2}
snow[i].posy=0
}
}
var timer=setTimeout(«movesnow()»,50)
}
for (i=0;i<=snowmax;i++) {
document.write(«<span id=’s»+i+»‘ style=’position:absolute;top:-«+snowmaxsize+»‘>»+snowletter+»</span>«)
}
if (browserok) {
window.onload=initsnow
}
</SCRIPT>

Как установить на сайт анимированную гирлянду?

Веб-разработчики предлагают разные решения. Некоторые предлагают поместить код в корень сайта, а потом вставить несколько строк скрипта в редактор. Здесь мы предложим более простой вариант — сразу зайти в редактор (если ваш сайт на WordPress) и скопировать код, размещённый ниже в раздел боковая колонка:

<div class=»b-page_newyear»> <div class=»b-page__content»> <!— новогодняя мотня newyear.html —> <i class=»b-head-decor»> <i class=»b-head-decor__inner b-head-decor__inner_n1″> <div class=»b-ball b-ball_n1 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n2 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n3 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n4 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n5 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n6 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n7 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n8 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n9 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i1″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i2″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i3″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i4″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i5″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i6″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> </i> <i class=»b-head-decor__inner b-head-decor__inner_n2″> <div class=»b-ball b-ball_n1 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n2 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n3 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n4 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n5 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n6 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n7 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n8 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n9 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i1″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i2″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i3″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i4″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i5″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i6″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> </i> <i class=»b-head-decor__inner b-head-decor__inner_n3″> <div class=»b-ball b-ball_n1 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n2 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n3 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n4 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n5 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n6 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n7 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n8 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n9 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i1″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i2″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i3″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i4″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i5″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i6″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> </i> <i class=»b-head-decor__inner b-head-decor__inner_n4″> <div class=»b-ball b-ball_n1 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n2 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n3 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n4 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n5 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n6 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n7 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n8 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n9 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i1″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i2″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i3″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i4″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i5″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i6″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> </i> <i class=»b-head-decor__inner b-head-decor__inner_n5″> <div class=»b-ball b-ball_n1 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n2 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n3 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n4 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n5 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n6 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n7 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n8 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n9 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i1″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i2″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i3″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i4″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i5″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i6″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> </i> <i class=»b-head-decor__inner b-head-decor__inner_n6″> <div class=»b-ball b-ball_n1 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n2 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n3 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n4 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n5 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n6 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n7 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n8 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n9 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i1″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i2″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i3″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i4″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i5″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i6″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> </i> <i class=»b-head-decor__inner b-head-decor__inner_n7″> <div class=»b-ball b-ball_n1 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n2 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n3 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n4 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n5 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n6 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n7 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n8 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_n9 b-ball_bounce»><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i1″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i2″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i3″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i4″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i5″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> <div class=»b-ball b-ball_i6″><div class=»b-ball__right»></div><div class=»b-ball__i»></div></div> </i> </i> </div> </div> <script src=»http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js» type=»text/javascript»></script> <script src=»http://megascripts.ru/demo/new_year_motnya/swfobject.min.js» type=»text/javascript»></script> <script src=»http://megascripts.ru/demo/new_year_motnya/newyear.js» type=»text/javascript»></script><link href=»http://megascripts.ru/demo/new_year_motnya/style.css» rel=»stylesheet» />

Если вы владелец сайта с хорошей посещаемостью, который вы намерены продвигать, стоит потратить небольшую сумму денег на его праздничное оформление. Для того, чтобы сэкономить, выберите клипарт сами и найдите фрилансера, который быстро и недорого сделает работу. Вы получите больше клиентов, и ваш сайт будет выигрывать по стилю перед сайтами ваших конкурентов.

Written by sergei