0

I am coming into this as a bit of a philistine so bear with me..

There are parallax scrolling effect and smooth scrolling on my page.

http://codepen.io/QLCee/pen/BWRMzd

Here is the I am trying to make http://anagram.paris/team

My parallax scrolling effect is delayed after mouse scroll. While I mouse scroll, and page and image moves smoothly down. Page stops moving, but image still move for few millisecond

Is there anything more I could try?

Here is the code for smooth scroll

$(function(){
var $window = $(window);
var scrollTime = 1;
var scrollDistance = 200;

$window.on("mousewheel DOMMouseScroll", function(event){

    event.preventDefault(); 

    var delta = event.originalEvent.wheelDelta/120 || -event.originalEvent.detail/3;
    var scrollTop = $window.scrollTop();
    var finalScroll = scrollTop - parseInt(delta*scrollDistance);

    TweenMax.to($window, scrollTime, {
        scrollTo : { y: finalScroll, autoKill:true },
            ease: Power1.easeOut,
            overwrite: 5                            
        });
    });
});

This for PARALLAX

(function(){
 var parallax = document.querySelectorAll(".parallax"), 
speed = 0.5;

window.onscroll = function(){
[].slice.call(parallax).forEach(function(el,i){

  var windowYOffset = window.pageYOffset,
      elBackgrounPos = "50% " + (windowYOffset * speed) + "px";

  el.style.backgroundPosition = elBackgrounPos;

        });
    };
})();

Thank you

QMO Lee
  • 3
  • 3
  • Step one: don't use scroll smoothing or anything else that modifies how the user's mouse interacts with the page, no one likes it and it will actively drive people away from your site. – Etheryte Mar 19 '17 at 19:28
  • http://anagram.paris/team　heres the one I am trying to make... – QMO Lee Mar 22 '17 at 17:04

0 Answers0