Pixi.js Effet de distortion au scroll

Bonjour à tous et à toutes,

J'essaye de réaliser un slideshow avec un effet de distortion suivant le click haut / bas ou le scroll haut / bas (et si possible augmenter ou diminuer l'effet et le slide suivant la hauteur du scroll).

Un peu comme sur ce site:
http://taotajima.jp

Pour cela j'ai repris un slideshow existant que j'essaye de modifier dans un codepen:
https://codepen.io/nwx/pen/Rdgmjj?editors=1010

Peut être faudrai t'il utiliser ce bout de code pour le scroll haut / bas ?

 this.render();
        window.addEventListener("resize", this.resize.bind(this), false);
        document.addEventListener('DOMMouseScroll', this.handleScroll.bind(this), false); // for Firefox
        document.addEventListener('mousewheel', this.handleScroll.bind(this), false);
        document.addEventListener("touchstart", this.onTouchStart.bind(this), false);
        document.addEventListener("touchmove", this.onTouchMove.bind(this), false);
        TweenLite.to(this, 1, {
            yRoller: (window.innerWidth / 2),
            ease: "easeOutCubic",
            delay: 0.25,
            onStart: function () { return _this.resize(null); },
            onComplete: function () {
                _this.introTweening = false;
            }
        });
    }
    Application.prototype.onTouchStart = function (event) {
        event.preventDefault();
        this.touchStartY = event.touches[0].pageY;
    };
    Application.prototype.onTouchMove = function (event) {
        event.preventDefault();
        this.wheelSpeed = (event.touches[0].pageY - this.touchStartY);
        if (this.wheelSpeed > 0)
            this.direction = 1;
        else if (this.wheelSpeed < 0)
            this.direction = -1;
        this.touchStartY = event.touches[0].pageY;
    };
    Application.prototype.handleScroll = function (event) {
        var normalized;
        if (event.wheelDelta) {
            normalized = (event.wheelDelta % 120 - 0) == -0 ? event.wheelDelta / 120 : event.wheelDelta / 12;
        }
        else {
            var rawAmmount = event.deltaY ? event.deltaY : event.detail;
            normalized = -(rawAmmount % 3 ? rawAmmount * 10 : rawAmmount / 3);
        }
        this.wheelSpeed = (normalized * 2);
        if (this.wheelSpeed > 0)
            this.direction = 1;
        else if (this.wheelSpeed < 0)
            this.direction = -1;
    };

Pouvez vous m'aider, me faire un exemple fonctionnel ou m'indiquer la marche a suivre pour pouvoir le réaliser ?

Je vous remercie d'avance pour votre aide précieuse

Julien,
Modifié par newger (10 Mar 2019 - 18:34)