Снеговик на форуме

Снеговик на форуме 1.0.0

Нет прав для скачивания
Совместимость с XenForo
  1. 1.0
  2. 1.1
  3. 1.2
  4. 1.3
  5. 1.4
  6. 1.5
Создаём новогоднюю атмосферу на форуме.
Добавим падающий снежок и снеговика в сугробе в нижней части экрана, который при клике на него, будет полностью показываться.
snowmen.gif
Маленькое отступление, рекомендую делать все изменения через ТМС (модификацию шаблонов), но здесь для простоты, будет описан способ с правкой шаблонов.

И так приступим, загружаем содержимое из каталога upload.
Затем открываем шаблон page_container_js_body и в самый низ добавляем.
Код:
// Подключаем падающий снежок
<script type="text/javascript" src="js/snowmen/jQuery.snow.min.js"></script>
//  Конец подключения падающего снежка
//  Настройки падающего снега и показа снеговика при клике
<script>
$(window).load(function(){
$(document).ready( function(){
    $.fn.snow({
        minSize: 5,
        maxSize: 25,
        newOn: 350,
        flakeColor: '#FFF'
    });
 
    $('.snowman').click(function() {
        $(this).toggleClass('expanded');
    });
});
});
</script>
<div class="snowBackground"></div>
<div class="snowman"></div>
Дальше открываем шаблон EXTRA.css.
И добавляем такой код.
Код:
 .snowBackground {
    background: transparent url(styles/snowmen/snow-bg.png) bottom left repeat-x;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 40px;
    z-index: 99;
}
   
.snowman {
    width: 187px;
    height: 108px;
    background: url(styles/snowmen/snowman.png) 0 0 no-repeat;
    position: fixed;
    bottom: 0;
    right: 50px;
    z-index: 9;
    transition: all 500ms ease-in-out;
    cursor: pointer;
}

.snowman.expanded {
    background-position: 0;
    height: 235px;
}
Если у Вас уже подключён сторонний падающий снег, то
для вывода снеговика достаточно добавить код в EXTRA.css, приведённый выше.
И в шаблон page_container_js_body в самый низ добавить такой код.
Код:
//  Показ снеговика при клике
<script>
$(window).load(function(){
$(document).ready( function(){
 
    $('.snowman').click(function() {
        $(this).toggleClass('expanded');
    });
});
});
</script>
<div class="snowBackground"></div>
<div class="snowman"></div>
snowmen.png
snowmen_w.png
Автор
Mirovinger
Скачивания
25
Просмотры
530
Первый выпуск
Обновление
Оценка
0.00 звёзд 0 оценок

Другие ресурсы пользователя Mirovinger

Поделиться ресурсом

Назад
Сверху Снизу