/ Адаптивность / Украшение сайта на праздники

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

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

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

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

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

Поделиться в соц. сетях:

  • Комментарии
  • Вложения

Добавить комментарий

Пока нет комментариев. Будь первым!

Украшение сайта на праздники Украшение сайта на праздники
Обзор плагинов по созданию скидок
Рекомендации для васОбзор плагинов по созданию скидокOpttour.ru
Спасибо! Наш менеджер свяжется с Вами в течении 5 минут.