@AlexWD

Как реинициализировать parallax эффект при смене табов?

Добавил на сайт плагин parallax: Ссылка на плагин

Использую я его в Tab'ах (вкладках) на странице. При смене вкладок картинка, которая используется в параллаксе, не меняется. Я так понимаю это происходит потому что изначально при загрузке страницы они инициализируются в блоках, которые по умолчанию display: none, а когда при смене табов блок становится активным display: block, ничего не происходит.

Вывод parallax картинки:
<div class="tabs__service-img-p" data-image-src="/html/img/service-img-1.png" data-parallax="scroll"></div>


Табы работают так:
var url = location.href.split('#')[1],
    el = $('.tabs-block-service .content .item[data-id="' + url + '"]');
if (el.length > 0 && el.closest('.tabs-block-service').length > 0) {
  var parent = el.closest('.tabs-block-service');
  parent.find('.item.--active').removeClass('--active');
  parent.find('.tabs .item[href="#' + url + '"]').addClass('--active');
  parent.find('.content .item[data-id="' + url + '"]').addClass('--active');
}

$('.tabs-block-service .tabs').on('click', '.item', function () {
  if (!$(this).hasClass('--active')) {
    var _parent = $(this).closest('.tabs-block-service'),
        id = $(this).attr('href').split('#')[1];
    _parent.find('.item.--active').removeClass('--active');
    _parent.find('.content .item[data-id="' + id + '"]').addClass('--active');
    $(this).addClass('--active');
  }
});


Я предполагаю, что если по нажатию на вкладки будет происходить повторная инициализация скрипта(как при обновлении страницы), будет всё ОК, но как это сделать, к сожалению, не могу сообразить.
  • Вопрос задан
  • 50 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы