1. Приветствуем Вас на неофициальном форуме технической поддержки XenForo на русском языке. XenForo - новый и перспективный форумный движок от бывших создателей vBulletin.

Parallax Background

Тема в разделе "Модификации шаблонов", создана пользователем adder, 22 ноя 2013.

Загрузка
  1. adder

    adder Местный

    Регистрация:
    08.10.10
    Сообщения:
    1.163
    Симпатии:
    840
    Версия XF:
    1.3.4
    Автор: silence
    Ссылка на официальном форуме:
    HTML:
    http://xenforo.com/community/resources/parallax-background.2566/
    Демо:
    HTML:
    https://XenoGamers.org/
    Очень простой способ придать Вашему сайту Parallax эффект.

    Просто вставьте данный код:
    Код:
    /* Firefox super responsive scroll (c) Keith Clark - MIT Licensed */
    (function(e){var t=e.documentElement;if("MozAppearance"in t.style){var n=t.clientWidth;t.style.overflow="scroll";n-=t.clientWidth;t.style.overflow="";var r=e.createEvent("UIEvent");r.initEvent("scroll",true,true);function i(){e.dispatchEvent(r)}e.addEventListener("mousedown",function(r){if(r.clientX>t.clientWidth-n){e.addEventListener("mousemove",i,false);e.addEventListener("mouseup",function(){e.removeEventListener("mouseup",arguments.callee,false);e.removeEventListener("mousemove",i,false)},false)}},false);e.addEventListener("DOMMouseScroll",function(e){if(!e.ctrlKey&&!e.shiftKey){t.scrollTop+=e.detail*16;i.call(this,e);e.preventDefault()}},false)}})(document);
    
    $(window).scroll(function (e) {
      parallax();
    });
    
    function parallax() {
      var scrolled = $(window).scrollTop();
      $('#XenForo').css('background-position', '0px ' + -(scrolled * 0.2) + 'px');
    }
    Там, где JS включён. (Автор добавил данный код в шаблон 'page_container_js_body' перед '</script>')

    Данный скрипт работает только в том случае, если у Вас задний фон установлен в 'HTML' и в 'Прочее' есть данный код:
    HTML:
    background-attachment: fixed;
    c965b5aa187a2e05ca53f3f516ebf0cc.png
     
    Romchik® и Mirovinger нравится это.
  2. aligon7

    aligon7 Местный

    Регистрация:
    22.12.12
    Сообщения:
    983
    Симпатии:
    62
    Версия XF:
    1.4.7
    Извините, чёт я не очень понял, про что это и что такое Parallax эффект?
    В wiki не лез
     
  3. lepagrn

    lepagrn Местный

    Регистрация:
    06.03.13
    Сообщения:
    62
    Симпатии:
    23
    Версия XF:
    1.2.5
    яркий пример сайт танков.
     
  4. aligon7

    aligon7 Местный

    Регистрация:
    22.12.12
    Сообщения:
    983
    Симпатии:
    62
    Версия XF:
    1.4.7
    Ой, а я не знаю. Можно пример и объяснить, в чём прикол
     
  5. lepagrn

    lepagrn Местный

    Регистрация:
    06.03.13
    Сообщения:
    62
    Симпатии:
    23
    Версия XF:
    1.2.5
    Задний фон сдвигается не одновременно с центром.
     
  6. aligon7

    aligon7 Местный

    Регистрация:
    22.12.12
    Сообщения:
    983
    Симпатии:
    62
    Версия XF:
    1.4.7
    во блин, это как? дайте в личку урл примера
     
  7. lepagrn

    lepagrn Местный

    Регистрация:
    06.03.13
    Сообщения:
    62
    Симпатии:
    23
    Версия XF:
    1.2.5
    в первом сообщении есть ссылка на демо
     
  8. avasil89

    avasil89 Пользователь

    Регистрация:
    18.01.13
    Сообщения:
    3
    Симпатии:
    0
    Версия XF:
    1.2.4
    Фон остается на месте, двигается только контент, тоесть сам форум. Фон остается на месте.
     
  9. adder

    adder Местный

    Регистрация:
    08.10.10
    Сообщения:
    1.163
    Симпатии:
    840
    Версия XF:
    1.3.4
    @avasil89 Вы ошибаетесь. Просто с демо сайта убран этот скрипт.
     
  10. Dossbot

    Dossbot Пользователь

    Регистрация:
    28.02.14
    Сообщения:
    1
    Симпатии:
    0
    Версия XF:
    1.2.5
    Фон тоже движется только на 50% медленее.
     

Поделиться этой страницей