Топ-100 Новогодние украшения для сайта ~ Полезное на сайт ~ Сделай сайт

Новогодние украшения для сайта

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

Для установки вставьте первую часть кода (стили css) перед закрывающемся тегом </head>:

<!—Гирлянда на сайт css —>
<style type=»text/css»>
#garland {position:absolute;top:0;left:0;background-image:url(‘http://sitespectr.ru/test/girlyanda/christmas-lights.png’);height:36px;width:100%;overflow:hidden;z-index:99}
.garland_1 {background-position: 0 0}
.garland_2 {background-position: 0 -36px}
.garland_3 {background-position: 0 -72px}
.garland_4 {background-position: 0 -108px}
</style>
<!—Гирлянда на сайт javascript —>
<script type=»text/javascript»>
function garland() {
nums = document.getElementById(‘nums_1’).innerHTML
if(nums == 1) {document.getElementById(‘garland’).className=’garland_1′;document.getElementById(‘nums_1′).innerHTML=’2’}
if(nums == 2) {document.getElementById(‘garland’).className=’garland_2′;document.getElementById(‘nums_1′).innerHTML=’3’}
if(nums == 3) {document.getElementById(‘garland’).className=’garland_3′;document.getElementById(‘nums_1′).innerHTML=’4’}
if(nums == 4) {document.getElementById(‘garland’).className=’garland_4′;document.getElementById(‘nums_1′).innerHTML=’1’}
}
setInterval(function(){garland()}, 600)
</script>

Вторую часть кода вставьте сразу после тега <body>:

<!—Гирлянда на сайт html —>
<div id=»garland» class=»garland_4″>
<div id=»nums_1″>1</div>
</div>

Падающий снег выполнен на чистом css. Он будет смотреться вот так: Падающий снег

Для установки просто вставьте код стилей перед закрывающемся тегом </head>:

<style>
* {
margin: 0;
padding: 0;
}

body {
background-image: url(‘http://sitespectr.ru/test/sneg/img/snow.png’), url(‘http://sitespectr.ru/test/sneg/img/snow3.png’), url(‘http://sitespectr.ru/test/sneg/img/snow2.png’);

-webkit-animation: snow 20s linear infinite;
-moz-animation: snow 20s linear infinite;
-ms-animation: snow 20s linear infinite;
animation: snow 20s linear infinite;
}

@keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-moz-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}

@-webkit-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
50% {background-color:#b4cfe0;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px; background-color:#6b92b9;}
}

@-ms-keyframes snow {
0% {background-position: 0px 0px, 0px 0px, 0px 0px;}
100% {background-position: 500px 1000px, 400px 400px, 300px 300px;}
}
</style>

Для тех кто не хочет заморачиваться со вставкой кода можно украсить свой сайт картинками анимашками. Например анимашками гирлянд или елочек . Вставьте их себе на сайт как обычные картинки.
<img src=»путь к файлу/image.gif»>
Можете скачать картинку (кликнуть правой кнопкой по ней и выбрать в контекстном меню — «сохранить как»), закинуть ее в папку с изображениями на вашем сайте , прописать правильно путь к картинке и вставить в необходимое место на сайте, если сайт html. Или вставить картинку через редактор, если сайт на Вордпресс,  Джумла или другой cms.
Можете и не скачивать, а просто прописать URL изображения (кликнуть правой кнопкой по картинке и выбрать в констекстном меню — «открыть картинку в новой вкладке») и скопировать URL в адресной строке.

новогодние украшения для сайта

Чтобы посмотреть эффект картинки — кликните по ней и увидите как она будет смотреться на вашем сайте,

гирлянда
и еще гирлянда
гирлянда 2
и еще
гирлянда 3
А дальше идут елочки
новогодняя елочка елка 2 едка 3 елка 4 елка 5 новогодняя елка на сайт
Таким нехитрым способом, установив новогодние украшения для сайта, вы придадите ему праздничный вид, а посетителям хорошее настроение! Удачи!


Рубрики: Полезное на сайт Тэги:
Понравилась статья? Поделись!
        

Всего комментариев: 0

Оставить комментарий

Ваш email не будет опубликован.