Украшение сайта на праздники

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

В данной статье будет собираться материал по теме: Украшение сайта на праздники.

Снег на Новый год

Тестировал различные плагины создающие снег на сайте. Порекомендовать могу Snow Storm. Самым большим преимуществами является лаконичность эффекта снега (не мешает) + изменение движения снега от положения мыши (интерактивность).

Приколы на 1 апреля

1 апреля не является важным праздником, но можно пошутить над коллегами и посетителями.

1. Наклонить сайт (в зависимости от смелости от 1 до 5 градусов, при большем количестве градусов сайт будет уже не читаемым). Для этого нужно body задать свойство: transform: rotate(2deg);
2. Сделать сайт черно-белым. Нужно body задать свойство -webkit-filter: grayscale(1); (сепия -webkit-filter: sepia(1);, смещение цветов -webkit-filter: hue-rotate(90deg);)
3. Поставить какую-нибудь текстуру: разбитый экран, замерзшее окно, помехи и т.п. Добавляем псевдокласс для body:

body:before {
    background-image: url(путь к необходимому изображению);
    position: fixed;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    content: " ";
    z-index: 999;
    background-size: cover;
}

Эффект блеска

Создаем эффект блеска возле надписи или объекта. Надпись и «блески» должны быть обернуты общим div’оv.

<div class="star star-1"></div>
<div class="star star-2"></div>
<div class="star star-3"></div>
<div class="star star-4"></div>

Скрипт

$(function () {
	    setInterval(function () {
		    $('.star-1').fadeOut(150).delay(2000).fadeIn(300).fadeOut(150).delay(1254);
	        $('.star-2').fadeOut(300).fadeIn(120).fadeOut(120).delay(1920);
	        $('.star-3').fadeOut(150).delay(1200).fadeIn(300).fadeOut(150).delay(800);
	        $('.star-4').fadeOut(700).fadeIn(300).fadeOut(160).delay(1350);
	    }, 1);
});

CSS

.star {
  position: absolute;
  background: url(https://dl.dropbox.com/u/1488103/julie-logo-sparkle.png) no-repeat;
  background-size: contain;
  overflow: hidden;
}
.star.star-1 {
  width: 50px;
  height: 34px;
  top: 110px;
  left: 97px;
}
.star.star-2 {
  width: 83px;
  height: 77px;
  top: 18px;
  left: 224px;
}
.star.star-3 {
  width: 74px;
  height: 70px;
  top: 115px;
  left: 172px;
}
.star.star-4 {
  width: 68px;
  height: 70px;
  top: 46px;
  left: 162px;
}

Helloween

Подбавить мрачности атмосферы поможет затемнение краев сайта

html:before {
    content: "";
    position: absolute;
    z-index: 9;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    box-shadow: inset 0px 0px 150px #000;
	pointer-events: none;
}

Только необходимо учесть z-index body и других слоев.

[site-socialshare]