jhenmei/parallax effects script.js at master · maimailu/jhenmei · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
(function () {
        const locomotiveScroll = new LocomotiveScroll({
    lenisOptions: {
        wrapper: window,
        content: document.documentElement,
        lerp: 0.1,
        duration: 1.2,
        orientation: 'vertical',
        gestureOrientation: 'vertical',
        smoothWheel: true,
        smoothTouch: false,
        wheelMultiplier: 1,
        touchMultiplier: 2,
        normalizeWheel: true,
        easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),
    },
});
    })();


var winScrollTop = 0;
$.fn.is_on_screen = function(){
    var win = $(window);
    var viewport = {
        top : win.scrollTop(),
        left : win.scrollLeft()
    };
    viewport.bottom = viewport.top + win.height();

    var bounds = this.offset();
    bounds.bottom = bounds.top + this.outerHeight();

    return (!(viewport.bottom < bounds.top || viewport.top > bounds.bottom));
};

function parallax() {
  var scrolled = $(window).scrollTop();
  $('.parallax-section ').each(function(){
    if ($(this).is_on_screen()) {
      var firstTop = $(this).offset().top;
      var $span = $(this).find("img");
      var moveTop = (firstTop - winScrollTop) * 0.3; // speed
      $span.css("transform", "translate3d(0, " + -moveTop + "px, 0)");
      $span.css("will-change", "transform");
    }
  });
}

$(window).scroll(function(e){
  winScrollTop = $(this).scrollTop();
  parallax();
});