3
Хорошо, поэтому я пытаюсь перенести сайт parallax в Wordpress, и он до сих пор не дал мне ничего, кроме головных болей. Теперь я, наконец, все это работаю над настольными браузерами, но в мобильных браузерах он создает всевозможные проблемы. Если кто-то может сказать мне, как отключить эту часть моего скрипта (который использует Stellar и iScroll) от отображения в мобильных браузерах, или еще лучше, возможно, вы видите, почему у меня так много проблем. В любом случае я был бы чрезвычайно благодарен за какой-либо совет, поскольку jQuery/Javascript довольно чуждо мне. ТИА!Как отключить эту часть моего javascript на мобильных устройствах?
//*************************************************************************** STELLER JS SCROLL
var STELLARJS = {
init: function() {
var self = this;
jQuery(function(){
//self.$sections = $('div.section').each(function(index){
//$(this).data('sectionIndex', index);
//});
//self.handleEvents();
//self.debugOffsets.init();
//self.debugOffsetParents.init();
self.initParallax();
});
},
initParallax: function() {
var isHomePage = jQuery('body').hasClass('home'),
$main = jQuery('div.main');
if (isHomePage) {
//$main.width($main.width() + $(window).width() - 1000);
}
//if ($.browser.msie) {
// $('body').removeAttr('data-stellar-background-ratio').append('<div class="ie-bg" />');
//}
if (isMobileWebkit) {
iScrollInstance = new iScroll('scroller');
jQuery('#wrapper').stellar({
parallaxBackgrounds:false,
scrollProperty: 'transform',
positionProperty: 'customPositionTransform',
hideDistantElements: false,
horizontalScrolling: false,
verticalOffset: verticalOffset
});
console.log('isMobileWebkit'+iScrollInstance);
} else {
console.log('is not MobileWebkit');
jQuery(window).stellar({
/*
scrollProperty: 'scroll',
positionProperty: 'position',
horizontalScrolling: true,
verticalScrolling: true,
horizontalOffset: 0,
verticalOffset: 0,
responsive: false,
parallaxBackgrounds: true,
parallaxElements: true,
hideDistantElements: true,
hideElement: function($elem) { $elem.hide(); },
showElement: function($elem) { $elem.show(); }
*/
positionProperty: 'customPositionTransform',
horizontalScrolling: false,
verticalOffset: verticalOffset,
horizontalOffset: 0,
verticalScrolling: true,
hideDistantElements: false,
});
}
},
handleEvents: function() {
var self = this,
//Debounce function from Underscore.js
debounce = function(func, wait) {
console.log('debounce');
var timeout;
return function() {
var context = this, args = arguments;
var later = function() {
timeout = null;
func.apply(context, args);
};
clearTimeout(timeout);
timeout = setTimeout(later, wait);
}
},
handleScroll = function() {
console.log('handleScroll');
var scrollLeft = $(window).scrollLeft(),
sectionIndex = Math.round((scrollLeft - 40)/self.$sections.first().outerWidth()),
$activeSection = self.$sections.eq(sectionIndex);
if ($activeSection.length === 0) {
$activeSection = self.$sections.last();
}
if ($activeSection.length === 0) return;
jQuery(window).unbind('scroll.stellarsite');
if (scrollLeft === 0) {
jQuery(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500));
} else {
jQuery('html,body').animate({
scrollLeft: $activeSection.offset().left - 40
}, 600, 'easeInOutExpo', function() {
setTimeout(function(){
jQuery(window).unbind('scroll.stellarsite').bind('scroll.stellarsite', debounce(handleScroll, 500));
}, 10);
});
}
jQuery(window).bind('mousewheel', function(){
jQuery('html,body').stop(true, true);
});
jQuery(document).bind('keydown', function(e){
var key = e.which;
if (key === 37 || key === 39) {
$('html,body').stop(true, true);
}
});
};
if (window.location.href.indexOf('#show-offset-parents-default') === -1) {
jQuery(window).bind('scroll.stellarsite', debounce(handleScroll, 500));
}
},
debugOffsets: {
init: function() {
this.$debug = jQuery('#debugOffsets');
//if (window.location.href.indexOf('#show-offsets') > -1) {
this.show();
//}
},
show: function() {
this.$debug.fadeIn();
jQuery('body').addClass('debugOffsets');
jQuery('h2').append('<div class="debug-h2-label">Offset Parent (All parallax elements align when this meets the offsets)</div>');
},
hide: function() {
this.debug.fadeOut;
jQuery('body').removeClass('debugOffsets');
}
},
debugOffsetParents: {
init: function() {
this.$debug = jQuery('#debugOffsets');
this.$debug.fadeIn();
console.log('show');
jQuery('body').addClass('debugOffsetParents');
jQuery('h2').append('<div class="debug-h2-label">New Offset Parent (All parallax elements align when this meets the offsets)</div>');
jQuery('h2').each(function(){
jQuery(this).find('div.constellation:last').append('<div class="debug-constellation-label">Default Offset Parents</div>');
});
jQuery('body').addClass('debug');
}
}
};
код кажется излишне сложным, stellar.js очень прост в использовании и инициализации. просто проверяйте мобильные устройства (обнюхивание пользовательского агента или ширину экрана или и то, и другое) и не запускайте '.stellar()' ни на что, если ваши условия для мобильных устройств будут удовлетворены. – Ennui
Я полностью согласен. К сожалению, я не был тем, кто закодировал этот сайт, мне только что было поручено преобразовать его в тему Wordpress. – APAD1
использовать Modernizr для обнаружения мобильного телефона – LorDex