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

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

HIT

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

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

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

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