Добавил на сайт плагин 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');
}
});
Я предполагаю, что если по нажатию на вкладки будет происходить повторная инициализация скрипта(как при обновлении страницы), будет всё ОК, но как это сделать, к сожалению, не могу сообразить.