На праздники, большие и не очень, в зависимости от деятельности компании, необходимо украшать сайт. Это нравится посетителям и владельцам сайтов). Но в этом деле главное не перегнуть палку, чтобы не повредить функциональности сайта и не ухудшить юзабилити.
В данной статье будет собираться материал по теме: Украшение сайта на праздники.
Снег на Новый год
Тестировал различные плагины создающие снег на сайте. Порекомендовать могу 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 и других слоев.
