Елочные шарики, которые двигаются при наведении на них мышкой и издают звук.
Новая версия 2.1!
Специально для pcvector.net.
Почему урок называется «Новогодняя мотня» ?! Украшение было взято со страницы входа в почту Яндекса, а находчивый программист в исходном коде сделал комментарий для этой гирлянды вот так и повелось .
- Работает в Edge, Chrome, Firefox, Opera.
- IE11 и ниже не поддерживаются.
HTML
Вот этот код вставляем после тега body:
CSS
В CSS стилях возможно придется слегка вам подправить значения ширины, margin, top, чтобы выровнять расположение новогоднеё мотни на страничке.
JS
В архиве со скриптом теперь есть папка audio со всеми нотками в mp3 формате.
Пути до аудио файлов в скрипте скорее всего потребуется поменять на абсолютные.
Для этого в файле script.js ищем строчку:
Как украсить сайт к новому году – создаем новогодний сайт
var path = ‘audio/’;
И корректируем в зависимости от расположения папки audio на сайте.
Например,
var path = ‘/bitrix/templates/demo/audio/’;
Звука может не быть, если в консоли возникает ошибка:
No ‘Access-Control-Allow-Origin’ header is present on the requested resource.
Значит у вас снова что-то не правильно прописано в переменной path
Не пишите там http://или http://www. это приводит к такой ошибке если на сайте не разрешены кроссдоменные запросы. У вас папка аудио лежит на вашем домене, поэтому используйте просто слеш в начале / и далее путь до папки audio (как показано выше в примере)
Почему нужно использовать новую версию мотни 2.1 и почему перестал работать звук в старой версии ?
Звук в старой версии работал на технологии flash, который в скором времени будет упразднен и шаги в эту сторону идут полным ходом.
Компания Adobe полностью прекратит поддержку и распространение технологии Flash Player в конце 2020 года.
Google отказалась от автозапуска Flash-элементов в браузере Chrome в конце 2016 года. О готовности отказаться от Flash также заявили Microsoft и Mozilla.
upd: v.2.1 Убрана зависимость от jQuery, добавлена поддержка клавиатуры на двух раскладках (en, ru) (thanks БобрДобр).
Источник: pcvector.net
Html код новогоднего украшения на сайт
главная » Украшения для сайта
- Украшения для сайта
- 9-05-2021, 05:29
- 2 709
- admin
Новогодние украшения для сайта — скрипты, HTML и картинки
- Украшения для сайта
- 12-12-2020, 20:13
- 896
- admin
- Украшения для сайта
- 9-12-2020, 21:31
- 1 043
- admin
- Украшения для сайта
- 1-12-2020, 21:18
- 1 977
- admin
- Украшения для сайта
- 1-12-2020, 21:17
- 1 286
- admin
- Украшения для сайта
- 27-12-2019, 19:39
- 1 068
- admin
- Украшения для сайта
- 24-12-2019, 21:29
- 1 144
- admin
- Украшения для сайта
- 23-12-2019, 21:51
- 977
- admin
- Украшения для сайта
- 23-12-2019, 20:58
- 1 711
- admin
- Украшения для сайта
- 23-12-2019, 20:37
- 1 487
- admin
- Украшения для сайта
- 23-12-2019, 20:20
- 1 541
- admin
- Украшения для сайта
- 21-12-2019, 23:01
- 1 794
- admin
- Украшения для сайта
- 21-12-2019, 20:59
- 3
- 975
- admin
- Украшения для сайта
- 21-12-2019, 20:26
- 1 238
- admin
- Украшения для сайта
- 13-12-2019, 21:58
- 860
- admin
- Украшения для сайта
- 13-12-2019, 20:52
- 614
- admin
- Украшения для сайта
- 13-12-2019, 20:27
- 914
- admin
- Украшения для сайта
- 12-12-2019, 08:15
- 625
- admin
- Украшения для сайта
- 9-12-2019, 21:24
- 1 239
- admin
- Украшения для сайта
- 7-12-2019, 22:47
- 579
- admin
Источник: for-web.ru
Новогодние украшения для сайта
Новый Год не за горами. Осталось чуть больше месяца. Самое время подумать о новогоднем украшении для сайта, чтобы ваш ресурс выглядел по новогоднему празднично. Новогодние украшения для сайта поднимут настроение и вызовут улыбки у ваших посетителей.
Новогодняя гирлянда в хедере сайта, падающий снег или красивая. нарядная елочка в сайдбаре будет далеко не лишней в предпраздничные новогодние дни и с успехом украсит ваш ресурс.
Предлагаю Вам пару-тройку таких новогодних украшений для сайта:
Скрипт новогодней гирлянды для хедера.
После установки скрипта в шапке вашего сайта появится вот такая гирлянда как на картинке, только мигающая. Как она будет выглядеть, посмотрите на примере: Посмотреть пример скрипта новогодней гирлянды.
Для установки вставьте первую часть кода (стили 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 .garland_2 .garland_3 .garland_4 function garland() < nums = document.getElementById(‘nums_1’).innerHTML if(nums == 1) if(nums == 2) if(nums == 3) if(nums == 4) > setInterval(function(), 600)
Вторую часть кода вставьте сразу после тега :
Падающий снег выполнен на чистом css.
Если у вас сайт с темным фоном, можно установить эффект падающего снега. Он будет смотреться вот так, чтобы посмотреть пример, кликните по ссылке или картинке ниже: Пример скрипта падающий снег Подходит только для сайтов с темным фоном.
Для установки просто вставьте код стилей перед закрывающемся тегом :
Новогодние картинки анимашки
Для тех кто не хочет заморачиваться со вставкой кода можно украсить свой сайт картинками анимашками. Например анимашками гирлянд или елочек . Вставьте их себе на сайт как обычные картинки.
Можете скачать картинку (кликнуть правой кнопкой по ней и выбрать в контекстном меню — «сохранить как»), закинуть ее в папку с изображениями на вашем сайте , прописать правильно путь к картинке и вставить в необходимое место на сайте, если сайт html. Или вставить картинку через редактор, если сайт на Вордпресс, Джумла или другой cms.
Можете и не скачивать, а просто прописать URL изображения (кликнуть правой кнопкой по картинке и выбрать в констекстном меню — «открыть картинку в новой вкладке») и скопировать URL в адресной строке.
Вот такая гирлянда
и еще гирлянда
и еще
А дальше идут елочки
Плагин WordPress с Новогодним украшением
Для тех, у кого сайт на CMS WordPress существует очень хороший и легкий новогодний плагин. Вы можете установить этот простой плагин новогоднего украшения вашего сайта.
Новогодний плагин WordPress Дед Мороз с поздравлением
И еще один новогодний плагин для тех, у кого сайт на вордпресс. Выезжающая боковая панель с дедом Морозом и Вашими поздравлениями.
Таким нехитрым способом, установив новогодние украшения для сайта, вы придадите ему праздничный вид, а посетителям хорошее настроение! Удачи!
Источник: sitespectr.ru