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

Опубликовано: 19 ноября, 2018 в категории: Полезное на сайт

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

Скрипт новогодней гирлянды для хедера.

Вот так она будет выглядеть: Посмотреть пример.

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

<!--Гирлянда на сайт css -->
<style type="text/css">
#garland {
position:absolute;
top:0;left:0;
background-image:url('https://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('https://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 елка - новогодние украшения для сайта елка - новогоднее украшение елка 5 новогодняя елка на сайт
Таким нехитрым способом, установив новогодние украшения для сайта, вы придадите ему праздничный вид, а посетителям хорошее настроение! Удачи!

техподдержка хостинга spaceweb

Понравился сайт? Поделись!

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

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

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

Заказать сайт под ключ или услугу


Заказ сайта под ключ. Создание, редизайн и настройка сайтов! Оставьте телефон, я перезвоню!