» »

Раскачивающийся снеговик в шапке сайта


Это новогодний скрипт uCoz, который заключается раскачивающийся снеговик в шапке. Он будет с левой стороны и не какой функций мешать не будет. Так как есть много кодов, которые устанавливаешь и они потом мешают к примеру горизонтальному меню и категориям на которые перейти нужно. Но этот исключение, как на светлом и на темном сайте он будет смотреться в новогодний дни, как красиво так и уместно на вашем сайте.

Установка:

Верх сайта и в самый его низ.

Код
<style>  
a.sg_tab { float: left; margin: -325px 0 0 100px}  
a.sg_tab img { -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; transition: all 1s ease-in-out; -moz-transform:rotate(0deg); -webkit-transform:rotate(0deg); -o-transform:rotate(0deg); -ms-transform:rotate(0deg); transform:rotate(0deg); }  
a.sg_tab.right_tab img { -moz-transform:rotate(-7deg); -webkit-transform:rotate(-7deg); -o-transform:rotate(-7deg); -ms-transform:rotate(-7deg); transform:rotate(-7deg); }  
a.sg_tab:hover img { -moz-transform:rotate(-15deg); -webkit-transform:rotate(-15deg); -o-transform:rotate(-15deg); -ms-transform:rotate(-15deg); transform:rotate(-15deg); }  
a.sg_tab.right_tab:hover img { -moz-transform:rotate(10deg); -webkit-transform:rotate(10deg); -o-transform:rotate(10deg); -ms-transform:rotate(10deg); transform:rotate(10deg); }  
</style>  

<a class="sg_tab right_tab" href="/"><img src="http://zornet.ru/Fresa/Stunget/how-to-draw.png" ></a>  
<script>  
  /*раскачивание снеговика*/  
$(document).ready(function() {  
  function swing(){  
  $('.sg_tab').toggleClass('right_tab');  
  setTimeout(swing, 1000);  
  }  
  swing();  
});  
</script>


Стили прописаны в самом коде и все вместе нужно прописывать.
10.12.2015 Просмотров: 504 Комментарий: (10)

Поделиться в социальных сетях

Материал разместил

Комментарий: 10
Kvint
Kvint 10.12.2015 00:221
0
Но явно на темной шапке он смотреться намного лучше будет, чем на светлом фоне.
Kosten
Kosten 10.12.2015 01:514
0
Если светлое, значит должно быть на темном, но здесь светлого не так уж много. Да и вообще посмотрите размер изображение и можете поставить свое, что то как логотип сайта оригинальном исполнение.
Kostik-malek
Kostik-malek 10.12.2015 01:536
0
А здесь просто нужено, чтоб было заметно и не надоедало.
Kosten
Kosten 10.12.2015 02:027
0
Вот думаю самое главное, чтоб красиво смотрелось и не чего так сильно не бросалось в глаза.
ZruBkul
ZruBkul 10.12.2015 00:252
0
Как раз под скрипт снег, который только в шапке, этот код подойдет. И вот сам уже какая то оригинальность, и не как у всех, здесь во всем снеговик виновен, за не погоду.
Kosten
Kosten 10.12.2015 00:303
0
Напоминает брелок в машине, так же раскачиваеться.
Kostik-malek
Kostik-malek 10.12.2015 01:525
0
Вот и погремушки нашлись под новогодние праздники, а что он болтаеться, так можно сказать, снеговика повесили, чисто черный юмор.
Kosten
Kosten 10.12.2015 02:038
0
Но здесь не чего не поделаешь, один раз в год приходиться быль сбивать с кодов иди заливать их на сайт.
JoniDen
JoniDen 11.12.2015 01:069
0
Найди скелет в формате PNG, и замени его вместо снеговика и будет тебе счастье.
XemorDio
XemorDio 13.12.2015 09:4810
0
Ну блин, Kosten, источник не трудно указать. Сайт сам знаешь.
avatar