Link to home
Start Free TrialLog in
Avatar of Robert Granlund
Robert GranlundFlag for United States of America

asked on

jQuery Scroll on Mobile devices

I have the following jQuery to add a smooth scroll to your browser window.  It works great.  However, on certain Mobile devices, like an iPad, it causes the scroll to go really slow.  Does anyone know of a fix, or what I should adjust in the code to compensate?

<script>
/*
 * Bones Scripts File
 * Author: Eddie Machado
 *
 * This file should contain any js scripts you want to add to the site.
 * Instead of calling it in the header or throwing it inside wp_head()
 * this file will be called automatically in the footer so as not to
 * slow the page load.
 *
 * There are a lot of example functions and tools in here. If you don't
 * need any of it, just remove it. They are meant to be helpers and are
 * not required. It's your world baby, you can do whatever you want.
*/


/*
 * Get Viewport Dimensions
 * returns object with viewport dimensions to match css in width and height properties
 * ( source: http://andylangton.co.uk/blog/development/get-viewport-size-width-and-height-javascript )
*/
function updateViewportDimensions() {
  var w=window,d=document,e=d.documentElement,g=d.getElementsByTagName('body')[0],x=w.innerWidth||e.clientWidth||g.clientWidth,y=w.innerHeight||e.clientHeight||g.clientHeight;
  return { width:x,height:y };
}
// setting the viewport width
var viewport = updateViewportDimensions();


/*
 * Throttle Resize-triggered Events
 * Wrap your actions in this function to throttle the frequency of firing them off, for better performance, esp. on mobile.
 * ( source: http://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed )
*/
var waitForFinalEvent = (function () {
  var timers = {};
  return function (callback, ms, uniqueId) {
    if (!uniqueId) { uniqueId = "Don't call this twice without a uniqueId"; }
    if (timers[uniqueId]) { clearTimeout (timers[uniqueId]); }
    timers[uniqueId] = setTimeout(callback, ms);
  };
})();

// how long to wait before deciding the resize has stopped, in ms. Around 50-100 should work ok.
var timeToWaitForLast = 100;


/*
 * Here's an example so you can see how we're using the above function
 *
 * This is commented out so it won't work, but you can copy it and
 * remove the comments.
 *
 *
 *
 * If we want to only do it on a certain page, we can setup checks so we do it
 * as efficient as possible.
 *
 * if( typeof is_home === "undefined" ) var is_home = $('body').hasClass('home');
 *
 * This once checks to see if you're on the home page based on the body class
 * We can then use that check to perform actions on the home page only
 *
 * When the window is resized, we perform this function
 * $(window).resize(function () {
 *
 *    // if we're on the home page, we wait the set amount (in function above) then fire the function
 *    if( is_home ) { waitForFinalEvent( function() {
 *
 *  // update the viewport, in case the window size has changed
 *  viewport = updateViewportDimensions();
 *
 *      // if we're above or equal to 768 fire this off
 *      if( viewport.width >= 768 ) {
 *        console.log('On home page and window sized to 768 width or more.');
 *      } else {
 *        // otherwise, let's do this instead
 *        console.log('Not on home page, or window sized to less than 768.');
 *      }
 *
 *    }, timeToWaitForLast, "your-function-identifier-string"); }
 * });
 *
 * Pretty cool huh? You can create functions like this to conditionally load
 * content and other stuff dependent on the viewport.
 * Remember that mobile devices and javascript aren't the best of friends.
 * Keep it light and always make sure the larger viewports are doing the heavy lifting.
 *
*/

/*
 * We're going to swap out the gravatars.
 * In the functions.php file, you can see we're not loading the gravatar
 * images on mobile to save bandwidth. Once we hit an acceptable viewport
 * then we can swap out those images since they are located in a data attribute.
*/
function loadGravatars() {
  // set the viewport using the function above
  viewport = updateViewportDimensions();
  // if the viewport is tablet or larger, we load in the gravatars
  if (viewport.width >= 768) {
  jQuery('.comment img[data-gravatar]').each(function(){
    jQuery(this).attr('src',jQuery(this).attr('data-gravatar'));
  });
  }
} // end function


/*
 * Put all your regular jQuery in here.
*/
jQuery(document).ready(function($) {

/* Footer Calendar */
var int = setInterval(function() {
    if ($('#footer-calendar').find('.picker__day').length > 0) {
        clearInterval(int);
        init_calendar();
    }
}, 100);

function init_calendar() {
    $('.picker__day').on("click", function(e) {
        $('#footer-calendar').addClass('calendarstart');
    });
}

////////////////////////////////////////GENERAL FUNCTIONS

// $(window).on('beforeunload', function() {
//     $(window).scrollTop(0); 
// });

$(window).on('load', function() {
    $(window).scrollTop(0); 
});

$('#homepage-section-3').css('margin-top', $(window).height() + 2700);
// Navigation
$('#menu-btn').on('click', function() {
  if ($('#mainNav').hasClass('visible')) {
    $('#mainNav').addClass('fade');
    $('#menu-btn').toggleClass('visible');
    $('body, html').toggleClass('open_menu');

    setTimeout(
    function() {
      $('#mainNav').removeClass('visible');
      $('#logo-white').toggleClass('visible');
      $('header').toggleClass('visible');
      
      $('#logo').toggleClass('invisible');
      $('#mainNav').removeClass('fade');
    }, 1000);
    
  }
  else {
    $('#mainNav').addClass('visible');
    $('#logo-white').toggleClass('visible');
    $('header').toggleClass('visible');
    $('#menu-btn').toggleClass('visible');
    $('body, html').toggleClass('open_menu');
    $('#logo').toggleClass('invisible');
  }
 
});
function customScroll(e) {
  
}
window.addEventListener("keydown", function(e) {
    // space and arrow keys
    var section3visible = $('body').hasClass('all-visible');
    //console.log(section3visible, 's3v');
    if([34, 35, 40].indexOf(e.keyCode) > -1 ) {
      e.preventDefault();
      window.scrollBy(0,30);
      //if (downCounter <= 25) {
        //downCounter++;
      //}
      
    }
    if([33, 36, 38].indexOf(e.keyCode) > -1 ) {
      e.preventDefault();
      window.scrollBy(0,-30);
      //if (downCounter > 0) {
        //downCounter--;
      //}
    }
}, false);
/*window.addEventListener('wheel', function(e) {
  e.preventDefault();
  wDelta = e.wheelDelta < 0 ? 'down' : 'up';
  if (wDelta == 'down') {
    window.scrollBy(0,30);
    if (downCounter <= 25) {
      downCounter++;
    }
  }
  else if (wDelta == 'up') {
    window.scrollBy(0,-30);
    if (downCounter > 0) {
      downCounter--;
    }
  }

}, false);
window.addEventListener('DOMMouseScroll', function(e) {
   e.preventDefault();
  wDelta = e.wheelDelta < 0 ? 'down' : 'up';
  if (wDelta == 'down') {
    window.scrollBy(0,30);
    if (downCounter <= 25) {
      downCounter++;
    }
  }
  else if (wDelta == 'up') {
    window.scrollBy(0,-30);
    if (downCounter > 0) {
      downCounter--;
    }
  }
}, false);*/
var scrollTimer, lastScrollFireTime = 0;
var prevScrollTop = 0;

$(window).on('scroll', function() {

    var minScrollTime = 250;
    var now = new Date().getTime();
    
    function processScroll() {
        if ($(window).scrollTop() >= prevScrollTop) {
          //console.log($(window).scrollTop(), scrollTop);
          //console.log('scroll down');
           if (downCounter <= 25) {
            downCounter++;
          }
        }
        else {
         // scrollDirection = "up";
          //ready = 0;
          //console.log('scroll up');
          if (downCounter >= 1) {
            downCounter--;
          }
        }
        prevScrollTop = $(window).scrollTop();
    }

    if (!scrollTimer) {
        if (now - lastScrollFireTime > (3 * minScrollTime)) {
            //processScroll();   // fire immediately on first scroll
            lastScrollFireTime = now;
        }
        scrollTimer = setTimeout(function() {
            scrollTimer = null;
            lastScrollFireTime = new Date().getTime();
            processScroll();
        }, minScrollTime);
    }
});


// window.addEventListener('DOMMouseScroll', function(e) {
//   e.preventDefault
// }, false);




// Helper function to get an element's exact position
function getPosition(el) {
  var xPos = 0;
  var yPos = 0;
 
  while (el) {
    if (el.tagName == "BODY") {
      // deal with browser quirks with body/window/document and page scroll
      var xScroll = el.scrollLeft || document.documentElement.scrollLeft;
      var yScroll = el.scrollTop || document.documentElement.scrollTop;
 
      xPos += (el.offsetLeft - xScroll + el.clientLeft);
      yPos += (el.offsetTop - yScroll + el.clientTop);
    } else {
      // for all other non-BODY elements
      xPos += (el.offsetLeft - el.scrollLeft + el.clientLeft);
      yPos += (el.offsetTop - el.scrollTop + el.clientTop);
    }
 
    el = el.offsetParent;
  }
  return {
    x: xPos,
    y: yPos
  };
}
 
// deal with the page getting resized or scrolled
window.addEventListener("scroll", updatePosition, false);
window.addEventListener("resize", updatePosition, false);


// $('#homepage-section-3').css('margin-top', $(window).height() + 300);
// $('#homepage-section-3').css('height', $(window).height());
var scrollTop = $(document).scrollTop();
updatePosition(); 
$('header').removeClass('white-logo');
$(window).on('load',function(){
  $('#loader').addClass('invisible');
})



   

var ready = 0;
var readyUp = 0;
var downCounter = 0;
var fired2 = false;
var fired3 = false;

function updatePosition() {
  // add your code to update the position when your browser
  // is resized or scrolled
  //console.log(scrollTop);
  var scrollDirection = "down";
  var section3bottom = -100;
  // Update scrollDirection
  //console.log($(window).scrollTop());
  //console.log(scrollTop);

  if ($(window).scrollTop() >= scrollTop) {
    scrollDirection = "down";
    readyUp = 0;
  }
  else {
    scrollDirection = "up";
    ready = 0;
  }

  //console.log(downCounter, scrollDirection);
  scrollTop = $(document).scrollTop();
  //scrollTop = $('body').scrollTop();
  
  //console.log(scrollDirection);

  //Fade in background after scrolling element to top of window
  var target = document.getElementById('homepage-section-3');
  var pos = getPosition(target);
  var anim1 = document.getElementById('canvas1');
  var anim1pos = getPosition(anim1);
  var anim2 = document.getElementById('canvas2');
  var anim2pos = getPosition(anim2);
  var anim3 = document.getElementById('canvas3');
  var anim3pos = getPosition(anim3);
  var redSection = document.getElementById('homepage-section-5');
  var redSectionPos = getPosition(redSection);
  //console.log(redSectionPos.y);
  //console.log(pos.y, $(window).height());
  if (pos.y < 0 && $(window).width() <= 768 || $(window).height() < 500) {
    $('#homepage-section-3 img').addClass('visible');
  }

  if (redSectionPos.y != 0 && redSectionPos.y < 200 && $(window).width() >= 768 || $(window).height() <= 500) {
    $('#customer1').addClass('visible');
    setTimeout(function() {
      $('#customer2').addClass('visible');
    }, 100);
    setTimeout(function() {
      $('#customer3').addClass('visible');
    }, 200);
    setTimeout(function() {
      $('#customer4').addClass('visible');
    }, 300);
    setTimeout(function() {
      $('#customer5').addClass('visible');
    }, 400);
    setTimeout(function() {
      $('#customer6').addClass('visible');
    }, 600);
    setTimeout(function() {
      $('#customer7').addClass('visible');
    }, 700);
    setTimeout(function() {
      $('#customer8').addClass('visible');
    }, 800);
  	setTimeout(function() {
        $('#customer9').addClass('visible');
      }, 900);
  	setTimeout(function() {
        $('#customer10').addClass('visible');
      }, 1100);
  	setTimeout(function() {
        $('#customer11').addClass('visible');
      }, 1200);
  	setTimeout(function() {
        $('#customer12').addClass('visible');
      }, 1300);
  	setTimeout(function() {
        $('#customer13').addClass('visible');
      }, 1400);
  	setTimeout(function() {
        $('#customer14').addClass('visible');
      }, 1600);
  	setTimeout(function() {
        $('#customer15').addClass('visible');
      }, 1700);
  	setTimeout(function() {
        $('#customer16').addClass('visible');
      }, 1800);
  	setTimeout(function() {
        $('#customer17').addClass('visible');
      }, 2000);
  	setTimeout(function() {
        $('#customer18').addClass('visible');
      }, 2100);
  	setTimeout(function() {
        $('#customer19').addClass('visible');
      }, 2200);
  	setTimeout(function() {
        $('#customer20').addClass('visible');
      }, 2300);
  	setTimeout(function() {
        $('#customer21').addClass('visible');
      }, 2500);
  	setTimeout(function() {
        $('#customer22').addClass('visible');
      }, 2600);
  	setTimeout(function() {
        $('#customer23').addClass('visible');
      }, 2700);
  	setTimeout(function() {
        $('#customer24').addClass('visible');
      }, 2800);
  	setTimeout(function() {
        $('#customer25').addClass('visible');
      }, 3000);
  	setTimeout(function() {
        $('#customer26').addClass('visible');
      }, 3100);
  	setTimeout(function() {
        $('#customer27').addClass('visible');
      }, 3200);
  	setTimeout(function() {
        $('#customer28').addClass('visible');
      }, 3300);
  	setTimeout(function() {
        $('#customer29').addClass('visible');
      }, 3400);
  	setTimeout(function() {
        $('#customer30').addClass('visible');
      }, 3600);
  	setTimeout(function() {
        $('#customer31').addClass('visible');
      }, 3700);
  	setTimeout(function() {
        $('#customer32').addClass('visible');
      }, 3900);
  }

  
  // Desktop Animations

  // Set Section 3 Top Margin based on window height && $(window).width() < 2200 || $(window).width() >= 2200

  if ($(window).width() <= 768 || $(window).height() <= 500 ) {
      $('#homepage-section-3').css('margin-top', 0);
      $('#homepage-section-3').css('height', 'auto');
      // $('#homepage-section-2').css('width', 'auto');
      // $('#homepage-section-2').css('height', 'auto');
      // if (anim1pos.y < 150) {
      //   animate1();
      // }
      // if (anim2pos.y < 150) {
      //   arrow();
      // }
      // if (anim3pos.y < 150) {
      //   animate3();
      // }
      var SVG1 = document.getElementById('gears-container');
      var SVG1pos = getPosition(SVG1);
      var SVG2 = document.getElementById('chart');
      var SVG2pos = getPosition(SVG2);
      var SVG3 = document.getElementById('hub');
      var SVG3pos = getPosition(SVG3);
      if (SVG1pos.y > 0 && SVG1pos.y < 200) {;
        $('#gears-container').addClass('animated');
        $('#gears-only').addClass('visible');
      }
      if (SVG2pos.y > 0 && SVG2pos.y < 200) {;
        $('#chart').addClass('animated');
         setTimeout(function() {
          $('#chart').addClass('animation-complete');
         }, 2500);
      }
      if (SVG3pos.y > 0 && SVG3pos.y < 200) {;
        $('#hub').addClass('animated');
        setTimeout(function() {
          $('#hub').addClass('animation-complete');
         }, 2000);
      }
      
  } 
  
  
  // Solution page
  if($("body").hasClass('page-template-page-solutions')){
  	setTimeout(function(){
  		$('.animation_1').addClass('animated');
  		$('#gears-only').addClass('visible');
  		}, 400);  
    setTimeout(function(){
      $('.animation_2').addClass('animated');
      }, 800);
    setTimeout(function(){
       $('.animation_3').addClass('animated');
      }, 1200); 
	}

  // Invoice Automation page
  if($("body").hasClass('page-template-page-solutions-sub1')){
    setTimeout(function(){
      $('.animation_1').addClass('animated');
      $('#gears-only').addClass('visible');
      }, 400);  
  }

  // Dynamic Discounting page
  if($("body").hasClass('page-template-page-solutions-sub2')){
    setTimeout(function(){
      $('.animation_2').addClass('animated');
      }, 400);  
  }

  // Supplier Central page
  if($("body").hasClass('page-template-page-solutions-sub3')){
    setTimeout(function(){
      $('.animation_3').addClass('animated');
      }, 400);  
  }
  
  // End

  if ($(window).width() > 768  && $(window).height() > 500) {
    $('.page-template-homepage').css('height', $(window).height() + 1900);
    
    if (fired2 == false) {
      $('#homepage-section-3').css('margin-top', $(window).height() + 900);
    }
    $('#homepage-section-3').css('height', $(window).height() + 200);
    var newHeight = $(window).height() - 120;
    //$('#homepage-section-2').css('height', newHeight);
    // Fade in Homepage Section 2 during scroll
    //console.log(scrollDirection);

    if (scrollDirection == "down" && scrollTop > 500) {
      // var newWidth = $(window).width() - 120;
      // $('#homepage-section-2').css('width', newWidth);
      // $('#homepage-section-2 .homepage-section-content').css('width', newWidth);
      // $('#homepage-section-2').addClass('visible');
      // $('#homepage-section-1').addClass('invisible');
      // setTimeout(
      //   function() {
      //     animate1();
      //     arrow();
      //     animate3();
      //   }, 3000);
      // setTimeout(
      // function() {
      //   $('.page-template-homepage').addClass('all-visible');
      // }, 3000);
    }
    //console.log('posy', pos.y, 'fired2', fired2);
    if (scrollDirection == "up" && pos.y > $(window).height() && pos.y != 0) {
      //  console.log('hit');
      if (fired2 == true) {
        $('#homepage-section-2').removeClass('visible');
        $('#homepage-section-2').css('width', 0);
        $('#homepage-section-1').removeClass('invisible');
        $('#homepage-section-3').css('margin-top', $(window).height() + 2500);
        $('.page-template-homepage').css('height', $(window).height() + 1900);
        window.scrollTo(0,600);
        setTimeout(
          function() {
            $('#intro-ticker h2').css('margin-top', -190);
            $('#homepage-section-3').css('margin-top', $(window).height() + 1500);
          }, 2000);
        
        fired2 = false;
      }
      else {
         
      }

    }

    var sectionThreeDisplay = $('#homepage-section-3').css('display');
    if($('body').hasClass('page-template-homepage')){
    var yOffset = $('#homepage-section-3').offset();
    //console.log(yOffset.top, '.',scrollTop);
    if (scrollDirection = "down" && scrollTop >= yOffset.top) {
     // console.log(yOffset.top, '.',scrollTop);
      $('body').addClass('static');
    }
    if (scrollDirection = "up" && scrollTop <= yOffset.top) {
     // console.log(yOffset.top, '.',scrollTop);
      $('body').removeClass('static');
    }
  }

    var SVGs = document.getElementById('homepage-section-4');
    var SVGpos = getPosition(SVGs);
    // only for solution page we have created this script



      if (SVGpos.y > 0 && SVGpos.y < 500) {;

          $('.hover_effect .animation_1').addClass('animated');
            setTimeout(function(){
               $('.hover_effect .animation_1').addClass('animation-complete');
            },1000)
        

        
        setTimeout(function() {
          $('.hover_effect .animation_2').addClass('animated');
           setTimeout(function(){
               $('.hover_effect .animation_2').addClass('animation-complete');
            },1000)
          
         }, 1000);
        
        setTimeout(function() {
          $('.hover_effect .animation_3').addClass('animated');
          
           setTimeout(function(){
               $('.hover_effect .animation_3').addClass('animation-complete');

            },1000)
         }, 2000);      


        // solution page animatin

         
      }




    $('.hover_effect .icon-circle').on('mouseover', function() {
      var icon = $(this);
      if (!(icon.hasClass('animation-complete'))) {
        icon.removeClass('animated');
        setTimeout(function() {
          icon.addClass('animated');
        }, 10);
      }
    });
  }
  
}
}); /* end of as page load scripts */

$ =  jQuery
if ($(window).width() > 768 ) {
  $(document).ready(function(){
    var ww  = $(window).width()
    var wh  = $(window).height()
    $('#homepage-section-2 .homepage-section-content').css({'width': ww -120});
  });
  $(window).on('load resize', function(){
    var ww  = $(window).width()
    var wh  = $(window).height()
    //$('#homepage-section-2').css({'height':wh-120});
    $('#homepage-section-2 .homepage-section-content').css({'width': ww -120});
  });
} 



// $('.icon-circle').mouseover(function() {
//   $(this).addClass('hover-effect').removeClass('animation-complete animated');
// })

// $('.icon-circle').mouseout(function() {
//   $(this).removeClass('hover-effect').addClass('animation-complete animated');
// })




/* 90% Automation Animation*/
if($('body').hasClass('page-template-homepage')){
var c = document.getElementById("canvas1");
var ctx = c.getContext("2d");
ctx.fillStyle = "#7d7d7d";
ctx.beginPath();
ctx.arc(75,75,70,0,2*Math.PI);
ctx.fill();
ctx.fillStyle = "#5d5d5d";
ctx.beginPath();
ctx.arc(75,75,57,0,2*Math.PI);
ctx.fill();
// requestAnimationFrame Shim
(function() {
  var requestAnimationFrame1 = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame1;
})();
 var canvas1 = document.getElementById('canvas1');
 var context1 = canvas1.getContext('2d');
 var x1 = canvas1.width / 2;
 var y1 = canvas1.height / 2;
 var radius1 = 63;
 var endPercent1 = 90;
 var curPerc1 = 0;
 var counterClockwise1 = false;
 var circ1 = Math.PI * 2;
 var quart1 = Math.PI / 2;

 context1.lineWidth = 13;
 context1.strokeStyle = '#d32128';
 context1['imageSmoothingEnabled'] = false;       /* standard */
    context1['mozImageSmoothingEnabled'] = false;    /* Firefox */
    context1['oImageSmoothingEnabled'] = false;      /* Opera */
    context1['imageSmoothingEnabled'] = false; /* Safari */
    context1['msImageSmoothingEnabled'] = false;     /* IE */



 function animate1(current) {
     //context.clearRect(0, 0, canvas.width, canvas.height);
     context1.beginPath();
     context1.arc(x1, y1, radius1, -(quart1), ((circ1) * current) - quart1, false);
     context1.stroke();
     curPerc1++;
     if (curPerc1 < endPercent1) {
         requestAnimationFrame(function () {
             animate1(curPerc1 / 100)
         });
     }
 }

 /* 3X Cost Savings Animation*/
var c = document.getElementById("canvas2");
var ctx2 = c.getContext("2d");
ctx2.fillStyle = "#7d7d7d";
ctx2.fillRect(50,26,50,40);
ctx2.fillRect(50,68,50,40);
ctx2.fillRect(50,110,50,40);

var cb = document.getElementById("canvas2b");
var ctx2b = cb.getContext("2d");



  (function() {
  var requestAnimationFrame2 = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame2;
})();

var y = 150;

function arrow() {
    if (y > 0) {
      ctx2b.fillStyle = "#d32128";
      ctx2b.clearRect(0, 0, 150, 150);
      ctx2b.beginPath();
      ctx2b.moveTo(75,y + 25);
      ctx2b.lineTo(50,y + 50);
      ctx2b.lineTo(68,y + 50);
      ctx2b.lineTo(68,y + 150);
      ctx2b.lineTo(82,y + 150);
      ctx2b.lineTo(82,y + 50);
      ctx2b.lineTo(100,y + 50);
      ctx2b.fill();
      //ctx2b.transform(1,0,0,1,0,-1);
      y = y-2;
      requestAnimationFrame(arrow);
    }
}





 /* 2% Annual Spend Animation*/
var c = document.getElementById("canvas3");
var ctx = c.getContext("2d");
ctx.fillStyle = "#7d7d7d";
ctx.beginPath();
ctx.arc(75,75,70,0,2*Math.PI);
ctx.fill();
ctx.fillStyle = "#5d5d5d";
ctx.beginPath();
ctx.arc(75,75,57,0,2*Math.PI);
ctx.fill();
// requestAnimationFrame Shim
(function() {
  var requestAnimationFrame3 = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
                              window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
  window.requestAnimationFrame = requestAnimationFrame3;
})();
 var canvas3 = document.getElementById('canvas3');
 var context3 = canvas3.getContext('2d');
 var x3 = canvas3.width / 2;
 var y3 = canvas3.height / 2;
 var radius3 = 63;
 var endPercent3 = 4;
 var curPerc3 = 0;
 var counterClockwise3 = false;
 var circ3 = Math.PI * 2;
 var quart3 = Math.PI / 2;

 context3.lineWidth = 13;
 context3.strokeStyle = '#d32128';
 context3['imageSmoothingEnabled'] = false;       /* standard */
    context3['mozImageSmoothingEnabled'] = false;    /* Firefox */
    context3['oImageSmoothingEnabled'] = false;      /* Opera */
    context3['imageSmoothingEnabled'] = false; /* Safari */
    context3['msImageSmoothingEnabled'] = false;     /* IE */



 function animate3(current) {
     //context.clearRect(0, 0, canvas.width, canvas.height);
     context3.beginPath();
     context3.arc(x3, y3, radius3, -(quart3), ((circ3) * current) - quart3, false);
     context3.stroke();
     curPerc3++;
     if (curPerc3 < endPercent3) {
         requestAnimationFrame(function () {
             animate3(curPerc3 / 100)
         });
     }
 }

}

// one time fade effect on scrolling/


$(window).on('load scroll', function(){
  
      

  if($('#homepage-section-2').hasClass('visible')){
 
  }
   var whc  = $(window).height() / 2;
   var scTop = $(window).scrollTop();

  // if(scTop > whc){
  //   $('#homepage-section-2').addClass('visible');
  //   $('#homepage-section-1').removeClass('visible');
    
  // }
  // else{
  //  $('#homepage-section-2').removeClass('visible');
  //  $('#homepage-section-1').addClass('visible'); 
  // }

  

  var intero = $('#intro-ticker h2');
  intero.css({'top':-scTop /2})

  if(scTop > 492){
    intero.css({'top':'-246px'})
     var window_w = $(window).width()
     var scTop2 = $(window).scrollTop() -492;
    $('#homepage-section-2').css({'width':scTop2*4}).addClass('visible');    
  }
  else{
    // intero.css({'top':'0'})
   $('#homepage-section-2').css({'width':'0'}).removeClass('visible');     
  }

});

$(document).ready(function(){

setTimeout(function(){ 

    setTimeout(function(){ 
      $('.total_solution_text').fadeOut();
    },500)

     setTimeout(function(){ 
      $('.seffect1').addClass('newm frist_item');
      $('.frame_round img').removeClass('shaking shakeme');
      $('.hilna').removeClass('hilna_remove');
      //second
         setTimeout(function(){ 
          $('.seffect2').addClass('newm frist_item');

        //third
        //second

           setTimeout(function(){ 
            $('.seffect3').addClass('newm frist_item');
            // inner effect
              setTimeout(function(){  

                $('.seffect3').addClass('solution-animated'); 
                setTimeout(function(){  $('.frame_round').fadeOut() 
                  setTimeout(function(){
                    $('.hide_text_block').fadeIn();
                  },300)
              },800);

            }, 100);

           }, 800);

         }, 800);
     }, 800);
 }, 1200);
 


  onended="videoEnded()"
    $('.v-slider').on('ended',function(){ 
         $(this).removeClass('active'); 
         $(this).next().addClass('active').trigger('play');
         if($(this).next().length==0) {
      $('.v-slider:first-child').addClass('active').trigger('play');
    }
     });

    if($(window).width() > 1023){   


      $('.hover_effect  .icon-circle').mouseover(function() {

        $(this).removeClass('animation-complete animated');
        setTimeout(function() {
              $('.hover_effect  #hub').addClass('animation-complete');
           }, 2000);
      })

      $('.hover_effect  .icon-circle').mouseout(function() {
        setTimeout(function() {
            $(this).addClass('animation-complete animated');
            }, 2000);
      })

    }

    if($(window).width() < 1023){   
        $('.icon_effect').addClass('animation-complete animated anuto_animate');
    }

    // cloud page icon style effect
      if($('body').hasClass('page-template-page-cloud')) {

        $('.cloud-svg-container:nth-of-type(1)').addClass('visible');
        console.log($('.cloud-svg-container:nth-of-type(1)').addClass('visible'));
        setTimeout(function() {
          $('.cloud-svg-container:nth-of-type(2)').addClass('visible');
        }, 2000);
        setTimeout(function() {
          $('.cloud-svg-container:nth-of-type(3)').addClass('visible');
        }, 3000);
        setTimeout(function() {
          $('.cloud-svg-container:nth-of-type(4)').addClass('visible');
        }, 4000);
        setTimeout(function() {
          $('.cloud-svg-container:nth-of-type(5)').addClass('visible');
        }, 5000);
        setTimeout(function() {
          $('.cloud-svg-container:nth-of-type(6)').addClass('visible');
        }, 6000);

      }

      // the better way slogn toggle
      $('.toggle_text i').on('click',function(){
        $(this).parent().find('span').toggleClass('slogn_show');
      })
 
      $('.page-template-page-solutions-sub1-php,.page-template-page-solutions-sub2-php,.page-template-page-solutions-sub3-php').addClass('solution_sub_page');
        // default hover animation add jquery
        jQuery('.animated').animated({
          animatedIn: 'animated-in',
          offset: 0.8,
          reverse: false,
          mobileDisabled: true
      });

          


});



var sections = $('section')
  , nav = $('header')
  , nav_height = nav.outerHeight();

$(window).on('scroll load', function () {
  var cur_pos = $(this).scrollTop();
  
  sections.each(function(e) {
    var top = $(this).offset().top ,
        bottom = top + $(this).outerHeight();
    if (cur_pos >= top && cur_pos <= bottom) {
      nav.find('a').removeClass('active1');
      sections.removeClass('active1');
      
      $(this).addClass('active1');
      nav.find('a[href="#'+$(this).attr('id')+'"]').addClass('active1');

      var head = $('header');

      if($('.white_header').hasClass('active1')){
        head.removeClass('new_header').addClass('white-logo');
      }

      if($('.black_header').hasClass('active1')){
        head.addClass('new_header').removeClass('white-logo');
      }

      if($('.default_header').hasClass('active1')){
        head.removeClass('white-logo new_header default_header');
      }

      if($('#mobile-section').hasClass('active1')){
        $('body').addClass('fix_mobile');
      }

      if($('#fixed-desable, #secondary-header, .parallax_parent').hasClass('active1')){
        $('body').removeClass('fix_mobile'); 
      }
      if($('#color_fade').hasClass('active1')){
        $('body').addClass('change_bg'); 
      }

      
      else{
       $('body').removeClass('change_bg');  
      }

      
      // if($('#color_fade').hasClass('active1')){

      // }


     
      


    }
    if (cur_pos >= top && cur_pos <= bottom) { 
      if($('.page-template-page-cloud #section-3').hasClass('active1')){ 
        $('body').addClass('fadeimg'); 
      }
      if($('.page-template-page-cloud .bottom-text').hasClass('active1')){ 
        $('body').removeClass('fadeimg'); 
      }
      if($('.page-template-page-cloud #section-2').hasClass('active1')){ 
        $('body').removeClass('fadeimg'); 
      } 
    }

    if($('.page-template-page-solutions .bottom-text').hasClass('active1')){ 
        $('body').addClass('fadeimg'); 
      } 
  


  });

     // home page offset set

     if($('body').hasClass('page-template-homepage-php')){ 
     var Wt = $(window).scrollTop();
     var ofT = $('.page-template-homepage-php #homepage-section-3').offset().top -  $(window).height() / 1.2;

     var autopage = ofT + $('.page-template-homepage-php #homepage-section-3').outerHeight();

     if(Wt > ofT && Wt < autopage ){
           $('.page-template-homepage-php #homepage-section-3').addClass('active1');
      }
      else{
        $('.page-template-homepage-php #homepage-section-3').removeClass('active1'); 
      }
    }


     if($('body').hasClass('solution_sub_page')){ 
     var Wt = $(window).scrollTop();
     var ofT = $('.advance_automation').offset().top - $(window).height() + $('.advance_automation').outerHeight();
     var autopage = ofT + $('.advance_automation').outerHeight();

     if(Wt > ofT && Wt < autopage ){
            setTimeout(function(){
              $('.delay_auto1').addClass('anuto_animate');
                setTimeout(function(){
                  $('.delay_auto2').addClass('anuto_animate')
                  setTimeout(function(){
                      $('.delay_auto3').addClass('anuto_animate')
                  },300)
                },300)
            },300)
         }
      }

      if($('body').hasClass('page-template-page-innovation-php')){ 
     var Wt = $(window).scrollTop();
     var ofT = $('.totalsol').offset().top - $(window).height() + $('.totalsol').outerHeight() /7.5 + 60;
     var autopage = ofT + $('.totalsol').outerHeight();

     if(Wt > ofT && Wt < autopage ){
           
        setTimeout(function(){
            $('.anmation-box').addClass('show_box');
            setTimeout(function(){
              $('.icon1').addClass('run_animatio');
              setTimeout(function(){
                $('.icon2').addClass('run_animatio');
                setTimeout(function(){
                  $('.icon3').addClass('run_animatio');
                  setTimeout(function(){
                    $('.icon4, .icon5, .icon6').addClass('run_animatio');
                    $('#spinning_circle').removeClass('shaking shakeme');
                      setTimeout(function(){
                        $('.soltion_text').addClass('run_animatio');
                          setTimeout(function(){
                            $('.logo_fade').addClass('run_animatio');
                            $('#spinning_circle').removeClass('shaking shakeme');
                          },2000);  
                      },500); 
                  },500);

                },500)
              },500)

            },500)

          },300);


         }
      }

});

//white header
$(document).ready(function(){
  // added js for icon hover issue resovled

  

  if($('#main > section:first-child').hasClass('white_header')){
    $('.header').addClass('white-logo');
  }
})
$('.cloud-svg-container').on({
        mouseenter: function() {
          $($(this).find('object')[0].contentDocument).children().find('path').css({fill: 'white'});
        },
        mouseleave: function() {
          $($(this).find('object')[0].contentDocument).children().find('path').css({fill: ''});
        }
      });

$(window).load(function() {
    $(".page-template-page-customer #section-2").addClass("visible-img") 
     
    $('.page-template-page-customer #homepage-section-5 img#customer1').addClass('visible');
    setTimeout(function() {
      $('.page-template-page-customer #homepage-section-5 img#customer2').addClass('visible');
    }, 100);
    setTimeout(function() {
      $('.page-template-page-customer #homepage-section-5 img#customer3').addClass('visible');
    }, 200);
    setTimeout(function() {
      $('.page-template-page-customer #homepage-section-5 img#customer4').addClass('visible');
    }, 300);
    setTimeout(function() {
      $('.page-template-page-customer #homepage-section-5 img#customer5').addClass('visible');
    }, 400);
    setTimeout(function() {
      $('.page-template-page-customer #homepage-section-5 img#customer6').addClass('visible');
    }, 600);
    setTimeout(function() {
      $('.page-template-page-customer #homepage-section-5 img#customer7').addClass('visible');
    }, 700);
    setTimeout(function() {
      $('.page-template-page-customer #homepage-section-5 img#customer8').addClass('visible');
    }, 800);
    setTimeout(function() {
        $('.page-template-page-customer #homepage-section-5 img#customer9').addClass('visible');
      }, 900);
    setTimeout(function() {
        $('.page-template-page-customer #homepage-section-5 img#customer10').addClass('visible');
      }, 1100);
    setTimeout(function() {
        $('.page-template-page-customer #homepage-section-5 img#customer11').addClass('visible');
      }, 1200);
    setTimeout(function() {
        $('.page-template-page-customer #homepage-section-5 img#customer12').addClass('visible');
      }, 1300);
    setTimeout(function() {
        $('.page-template-page-customer #homepage-section-5 img#customer13').addClass('visible');
      }, 1400);
    setTimeout(function() {
        $('.page-template-page-customer #homepage-section-5 img#customer14').addClass('visible');
      }, 1600);
    setTimeout(function() {
        $('.page-template-page-customer #homepage-section-5 img#customer15').addClass('visible');
      }, 1700);
    setTimeout(function() {
        $('.page-template-page-customer #homepage-section-5 img#customer16').addClass('visible');
      }, 1800);
    setTimeout(function() {
        $('.page-template-page-customer #homepage-section-5 img#customer17').addClass('visible');
      }, 2000);
    setTimeout(function() {
        $('.page-template-page-customer #homepage-section-5 img#customer18').addClass('visible');
      }, 2100);
    setTimeout(function() {
        $('.page-template-page-customer #homepage-section-5 img#customer19').addClass('visible');
      }, 2200);
    setTimeout(function() {
        $('.page-template-page-customer #homepage-section-5 img#customer20').addClass('visible');
      }, 2300);
    setTimeout(function() {
        $('.page-template-page-customer #homepage-section-5 img#customer21').addClass('visible');
      }, 2500);
    setTimeout(function() {
        $('.page-template-page-customer #homepage-section-5 img#customer22').addClass('visible');
      }, 2600);
    setTimeout(function() {
        $('.page-template-page-customer #homepage-section-5 img#customer23').addClass('visible');
      }, 2700);
    setTimeout(function() {
        $('.page-template-page-customer #homepage-section-5 img#customer24').addClass('visible');
      }, 2800);
    setTimeout(function() {
        $('.page-template-page-customer #homepage-section-5 img#customer25').addClass('visible');
      }, 3000);
    setTimeout(function() {
        $('.page-template-page-customer #homepage-section-5 img#customer26').addClass('visible');
      }, 3100);
    setTimeout(function() {
        $('.page-template-page-customer #homepage-section-5 img#customer27').addClass('visible');
      }, 3200);
    setTimeout(function() {
        $('.page-template-page-customer #homepage-section-5 img#customer28').addClass('visible');
      }, 3300);
    setTimeout(function() {
        $('.page-template-page-customer #homepage-section-5 img#customer29').addClass('visible');
      }, 3400);
    setTimeout(function() {
        $('.page-template-page-customer #homepage-section-5 img#customer30').addClass('visible');
      }, 3600);
    setTimeout(function() {
        $('.page-template-page-customer #homepage-section-5 img#customer31').addClass('visible');
      }, 3700);
    setTimeout(function() {
        $('.page-template-page-customer #homepage-section-5 img#customer32').addClass('visible');
      }, 3900);


     if($(window).width() < 1023){   
            $('.icon_effect').addClass('animation-complete animated anuto_animate');
            animate1();
            arrow();
            animate3();
      }
      if($(window).width() > 1023){   
        $(window).on('scroll', function(){
            console.log()
            if($(window).scrollTop() > 500){
              if($('.homepage-section-content').hasClass('scroll-canvas')){
                $('.canvas-last-block').addClass('arrow_effect');
                animate1();
                arrow();
                animate3();
                $('.homepage-section-content').removeClass('scroll-canvas');
              }
            }
        })
    }



});
$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});


    if (window.addEventListener) window.addEventListener('DOMMouseScroll', wheel, false);
window.onmousewheel = document.onmousewheel = wheel;

var time = 1000;
var distance = 300;

function wheel(event) {
    if (event.wheelDelta) delta = event.wheelDelta / 120;
    else if (event.detail) delta = -event.detail / 3;

    handle();
    if (event.preventDefault) event.preventDefault();
    event.returnValue = false;
}

function handle() {

    $('html, body').stop().animate({
        scrollTop: $(window).scrollTop() - (distance * delta)
    }, time);
}


$(document).keydown(function (e) {

    switch (e.which) {
        //up
        case 38:
            e.preventDefault();
            $('html, body').stop().animate({
                scrollTop: $(window).scrollTop() - distance
            }, time);
            break;

            //down
        case 40:
            e.preventDefault();
            $('html, body').stop().animate({
                scrollTop: $(window).scrollTop() + distance
            }, time);
            break;
    }
});

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of lenamtl
lenamtl
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial