3 мега крутых новогодних эффектов на ваш блог


Всем доброго времени ⛄
Давно мы не виделись на страницах блога, но думаю что в ближайшее время это будет происходить намного чаще. Я буду очень стараться, ведь мысли и идеи есть. Пора!


яркая гирлянда с котиком

Сегодня я хочу поделиться небольшим туториалом по внедрению новогодних эффектов для сайта. Они простенькие, стильные и главное - не будут мешать вашим читателям и не надоедят вам. Погнали!

Красивая гирлянда для новогоднего настроения

Смотрите какая гирлянда в верху страницы у Вас выйдет:

яркая гирлянда

Возможно Вы уже видели ее на нескольких сайтов. Гирлянда не моя уж точно. Нашел на одном популярном англоязычному форуме и немного доработал. Теперь вот делюсь с вами и если вы хотите установить себе на сайт ее, то нужно сделать пару шагов.


Во-вторых, вам теперь нужно в шаблон темы блога/сайта включить следующие строчки кода:

<style type="text/css">
#garland {position:absolute;top:0;left:0;background-image:url('ipny.png');height:36px;width:100%;overflow:hidden;z-index:99}
#nums_1 {padding:100px}
.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>

<div id="garland" class="garland_4"><div id="nums_1">1</div></div>
<script type="text/javascript">
function garland() {
nums = document.getElementById('nums_1').innerHTML
if(nums == 1) {document.getElementById('garland').className='garland_1';document.getElementByI&#8203;d('nums_1').innerHTML='2'}
if(nums == 2) {document.getElementById('garland').className='garland_2';document.getElementByI&#8203;d('nums_1').innerHTML='3'}
if(nums == 3) {document.getElementById('garland').className='garland_3';document.getElementByI&#8203;d('nums_1').innerHTML='4'}
if(nums == 4) {document.getElementById('garland').className='garland_4';document.getElementByI&#8203;d('nums_1').innerHTML='1'}
}
setInterval(function(){garland()}, 600)
</script>

И вот и всё. Главное не затупить с адресом на картинку. Сделайте ее абсолютной (например, https://vashsite.ua/img/ipny.png).

Падающий снег, который не надоедает

Снег для веб сайта

Здесь еще проще, так как автор скрипта Скотт Шиллера (Scott Schiller) предлагает нам просто добавить одну строчку кода в ваш шаблон. И снег пойдеееет!

<script type="text/javascript" src="snowstorm.js"></script>

Скачать скрипт для своего хостинга можно c Google Drive или воспользоваться ссылкой с моего файлохранилища и вставить абсолютную ссылку: http://nwo.ucoz.ua/js/snowstorm.js. Вот и всё. Снегопад на сайте есть, теперь нужно в реальной жизни дождаться.

Читайте также: Создаем страницу-поздравление с Новым годом 2017!

Кстати, можно два этих эффекта объединить и получить примерно вот такое:

Снег и гирлянда на новый год

Чтобы было сразу два в одном: вставьте код первого новогоднего эффекта и сразу же код второго. И рождественские эффекты на сайт у вас будут готовы 😎

Бонус: Гирлянда-антистресс

антистрессовая гирлянда

Не мог не поделиться с Вами прикольной... ну можно сказать и игрой. Это не лопать пузырьки, но тем не менее прикольно. Автор, опять таки, Скотт Шиллер. Спасибо ему за эти праздничные эффекты! Разбивать лампочки можно здесь.

До встречи, друзья 😉

За заглавную фотографию, которая прибавила к настроению +100, спасибо пользователю max678 с сайта Pikabu.

Ах да, друзья, чуть не забыл! Я недавно завел личный канал в Telegram, где делюсь своими наблюдениями и мнением о важном. Не блогерством единым живем. Буду рад каждому ;)


Комментарии

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

Популярное

Установка и настройка модема Huawei HG532e (+ мини-обзор)

Виджет профиля Instagram на ваш сайт/блог

Страница обратной связи для блогов на платформе Blogger \ Blogspot.com