I have page with ten step sections first top to last bottom with text slide left side and image slide with right side on screen after scroll second section scroll to third section so on… the same function applied on mobile device but that function not good for mobile device, I need to stop slide function in mobile device I have added complete script which is applied, thanks in advance.
jQuery(document).ready(function($){
//change this value if you want to change the speed of the scale effect
var scaleSpeed = 0.3,
//change this value if you want to set a different initial opacity for the .cd-half-block
boxShadowOpacityInitialValue = 0.7,
animating = false;
//check the media query
var MQ = window.getComputedStyle(document.querySelector('body'), '::before').getPropertyValue('content').replace(/"/g, "").replace(/'/g, "");
$(window).on('resize', function(){
MQ = window.getComputedStyle(document.querySelector('body'), '::before').getPropertyValue('content').replace(/"/g, "").replace(/'/g, "");
});
//bind the animation to the window scroll event
triggerAnimation();
$(window).on('scroll', function(){
triggerAnimation();
});
//move to next/previous section
$('.cd-vertical-nav .cd-prev').on('click', function(){
prevSection();
});
$('.cd-vertical-nav .cd-next').on('click', function(){
nextSection();
});
$(document).keydown(function(event){
if( event.which=='35' ) {
prevSection();
event.preventDefault();
} else if( event.which=='45' ) {
nextSection();
event.preventDefault();
}
});
function triggerAnimation(){
if(MQ == 'mobile') {
//if on desktop screen - animate sections
(!window.requestAnimationFrame) ? animateSection() : window.requestAnimationFrame(animateSection);
}
else {
//on mobile - remove the style added by jQuery
$('.cd-section').find('.cd-block').removeAttr('style').find('.cd-half-block').removeAttr('style');
}
//update navigation arrows visibility
checkNavigation();
}
function animateSection () {
var scrollTop = $(window).scrollTop(),
windowHeight = $(window).height(),
windowWidth = $(window).width();
$('.cd-section').each(function(){
var actualBlock = $(this),
offset = scrollTop - actualBlock.offset().top,
scale = 1,
translate = windowWidth/1+'px',
opacity,
boxShadowOpacity;
if( offset >= -windowHeight && offset <= 0 ) {
//move the two .cd-half-block toward the center - no scale/opacity effect
scale = 1,
opacity = 1,
translate = (windowWidth * 0.5 * (- offset/windowHeight)).toFixed(0)+'px';
} else if( offset > 0 && offset <= windowHeight ) {
//the two .cd-half-block are in the center - scale the .cd-block element and reduce the opacity
translate = 0+'px',
scale = (1 - ( offset * scaleSpeed/windowHeight)).toFixed(5),
opacity = ( 1 - ( offset/windowHeight) ).toFixed(5);
} else if( offset < -windowHeight ) {
//section not yet visible
scale = 1,
translate = windowWidth/2+'px',
opacity = 1;
} else {
//section not visible anymore
opacity = 0;
}
boxShadowOpacity = parseInt(translate.replace('px', ''))*boxShadowOpacityInitialValue/20;
//translate/scale section blocks
scaleBlock(actualBlock.find('.cd-block'), scale, opacity);
var directionFirstChild = ( actualBlock.is(':nth-of-type(even)') ) ? '-': '+';
var directionSecondChild = ( actualBlock.is(':nth-of-type(even)') ) ? '+': '-';
if(actualBlock.find('.cd-half-block')) {
translateBlock(actualBlock.find('.cd-half-block').eq(0), directionFirstChild+translate, boxShadowOpacity);
translateBlock(actualBlock.find('.cd-half-block').eq(1), directionSecondChild+translate, boxShadowOpacity);
}
//this is used to navigate through the sections
( offset >= 0 && offset < windowHeight ) ? actualBlock.addClass('is-visible') : actualBlock.removeClass('is-visible');
});
}
function translateBlock(elem, value, shadow) {
var position = Math.ceil(Math.abs(value.replace('px', '')));
if( position >= $(window).width()/2 ) {
shadow = 0;
} else if ( position > 1 ) {
shadow = boxShadowOpacityInitialValue;
}
elem.css({
'-moz-transform': 'translateX(' + value + ')',
'-webkit-transform': 'translateX(' + value + ')',
'-ms-transform': 'translateX(' + value + ')',
'-o-transform': 'translateX(' + value + ')',
'transform': 'translateX(' + value + ')'
});
}
function scaleBlock(elem, value, opac) {
elem.css({
'-moz-transform': 'scale(' + value + ')',
'-webkit-transform': 'scale(' + value + ')',
'-ms-transform': 'scale(' + value + ')',
'-o-transform': 'scale(' + value + ')',
'transform': 'scale(' + value + ')',
'opacity': opac
});
}
function nextSection() {
if (!animating) {
if ($('.cd-section.is-visible').next().length > 0) smoothScroll($('.cd-section.is-visible').next());
}
}
function prevSection() {
if (!animating) {
var prevSection = $('.cd-section.is-visible');
if(prevSection.length > 0 && $(window).scrollTop() != prevSection.offset().top) {
smoothScroll(prevSection);
} else if(prevSection.prev().length > 0 && $(window).scrollTop() == prevSection.offset().top) {
smoothScroll(prevSection.prev('.cd-section'));
}
}
}
function checkNavigation() {
( $(window).scrollTop() < $(window).height()/2 ) ? $('.cd-vertical-nav .cd-prev').addClass('inactive') : $('.cd-vertical-nav .cd-prev').removeClass('inactive');
( $(window).scrollTop() < $(window).height()/2 ) ? $('.cd-vertical-nav .cd-next').addClass('active') : $('.cd-vertical-nav .cd-next').removeClass('active');
}
function smoothScroll(target) {
animating = true;
$('body,html').animate({'scrollTop': target.offset().top}, 500, function(){ animating = false; });
}
});