Новогодние украшения для сайта
Новый Год не за горами. Осталось чуть больше месяца. Самое время подумать о новогоднем украшении для сайта, чтобы ваш ресурс выглядел по новогоднему празднично. Новогодние украшения для сайта поднимут настроение и вызовут улыбки у ваших посетителей.
Новогодняя гирлянда в хедере сайта, падающий снег или красивая. нарядная елочка в сайдбаре будет далеко не лишней в предпраздничные новогодние дни и с успехом украсит ваш ресурс.
Предлагаю Вам пару-тройку таких новогодних украшений для сайта:
Содержание статьи
Скрипт новогодней гирлянды для хедера.
После установки скрипта в шапке вашего сайта появится вот такая гирлянда как на картинке, только мигающая. Как она будет выглядеть, посмотрите на примере: Посмотреть пример скрипта новогодней гирлянды.
Для установки вставьте первую часть кода (стили 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/snow.png'), url('https://sitespectr.ru/test/sneg/img/snow3.png'), url('https://sitespectr.ru/test/sneg/img/snow2.png'); -webkit-animation: snow 10s linear infinite; -moz-animation: snow 10s linear infinite; -ms-animation: snow 10s linear infinite; animation: snow 10s linear infinite; } @keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 30% {background-position: 150px 200px, 100px 100px, 100px 100px;} 60% {background-position: 350px 600px, 250px 250px, 200px 200px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-moz-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 30% {background-position: 150px 200px, 100px 100px, 100px 100px;} 60% {background-position: 350px 600px, 250px 250px, 200px 200px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-webkit-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 30% {background-position: 150px 200px, 100px 100px, 100px 100px;} 60% {background-position: 350px 600px, 250px 250px, 200px 200px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } @-ms-keyframes snow { 0% {background-position: 0px 0px, 0px 0px, 0px 0px;} 30% {background-position: 150px 200px, 100px 100px, 100px 100px;} 60% {background-position: 350px 600px, 250px 250px, 200px 200px;} 100% {background-position: 500px 1000px, 400px 400px, 300px 300px;} } </style>
Новогодние картинки анимашки
Для тех кто не хочет заморачиваться со вставкой кода можно украсить свой сайт картинками анимашками. Например анимашками гирлянд или елочек . Вставьте их себе на сайт как обычные картинки.
<img src=»путь к файлу/image.gif»>
Можете скачать картинку (кликнуть правой кнопкой по ней и выбрать в контекстном меню — «сохранить как»), закинуть ее в папку с изображениями на вашем сайте , прописать правильно путь к картинке и вставить в необходимое место на сайте, если сайт html. Или вставить картинку через редактор, если сайт на Вордпресс, Джумла или другой cms.
Можете и не скачивать, а просто прописать URL изображения (кликнуть правой кнопкой по картинке и выбрать в констекстном меню — «открыть картинку в новой вкладке») и скопировать URL в адресной строке.
Вот такая гирлянда
и еще гирлянда
и еще
А дальше идут елочки
Плагин WordPress с Новогодним украшением
Для тех, у кого сайт на CMS WordPress существует очень хороший и легкий новогодний плагин. Вы можете установить этот простой плагин новогоднего украшения вашего сайта.
Новогодний плагин WordPress Дед Мороз с поздравлением
И еще один новогодний плагин для тех, у кого сайт на вордпресс. Выезжающая боковая панель с дедом Морозом и Вашими поздравлениями.
Таким нехитрым способом, установив новогодние украшения для сайта, вы придадите ему праздничный вид, а посетителям хорошее настроение! Удачи!
Хорошие идеи, последний вариант себе поставил)