window drag scroll and curtains.js

hankiao commented 4 years ago

helllo window drag scroll function demo https://www.designembraced.com/

my function

` Number.prototype.map = function(in_min, in_max, out_min, out_max) { return (this - in_min) * (out_max - out_min) / (in_max - in_min) + out_min; };

const scrollStrength = 1; const scrollDuration = 1; const scrollEasing = Power3.easeOut;

const jsScroll = document.querySelector("#content-scroll"); const jsScrollContainer = document.querySelector("#scroll-container");

const scrollbar = document.querySelector("#scroll-scrollbar"); const scrollbarThumb = document.querySelector("#scroll-scrollbar-thumb");

const scrollprogressbar = document.querySelector(".progress-bar"); const scrollprogressbarel = document.querySelector(".progress-bar__el");

let scrollbarThumbHeight; let maxDeltaY; let deltaY = 0;

let delta = { y: 0, x: 0 };

let mouseDown = false; let touchStart = false; let touchPosition;

var touchStartY = false; var _event = { y: 0, deltaY: 0 };

let HEIGHT;

let planes = []; let curtains; let planeElements;

function initCurtain() { curtains = new Curtains("canvas"); planeElements = document.querySelectorAll(".h-work-li-over");

planeElements.forEach((planeElement, index) => {
    let planeElementsParams = {
        vertexShaderID: "plane-vs",
        fragmentShaderID: "plane-fs",
        widthSegments: 20,
        heightSegments: 20,
        uniforms: {
            time: {
                name: "uTime",
                type: "1f",
                value: 0
            },
            multiplicator: {
                name: "uMultiplicator",
                type: "1f",
                value: 0
            },
            mousePosition: {
                name: "uMousePosition",
                type: "2f",
                value: [0, 0]
            },
            resolution: {
                name: "uResolution",
                type: "2f",
                value: [0, 0]
            },
            mouseMoveStrength: {
                name: "uMouseMoveStrength",
                type: "1f",
                value: 0
            }
        }
    };
    let plane = curtains.addPlane(planeElement, planeElementsParams);
    if (plane) {
        planes.push(plane);
        plane.uniforms.resolution.value = [
            window.devicePixelRatio * planeElement.clientWidth,
            window.devicePixelRatio * planeElement.clientHeight
        ];
        planeElement.addEventListener("click", event => {
            let x = event.offsetX / planeElement.clientWidth * 1 - 1;
            let y = -(event.offsetY / planeElement.clientHeight) * 1 + 1;
            console.log(x,y)
            let tl = new TimelineMax();
            tl.to(plane.uniforms.mouseMoveStrength, 1, {
                value: 3
            });
            tl.to(plane.uniforms.mouseMoveStrength, 1, {
                value: 0
            });
            TweenMax.to(plane.uniforms.mousePosition.value, 1, {
                "0": x,
                "1": y
            });
        });
        plane.onRender(() => {
            plane.uniforms.time.value += 0.015;
        });
    }
});

}

function init() { HEIGHT = jsScroll.offsetHeight; scrollbarThumbHeight = 100 - jsScrollContainer.offsetHeight / HEIGHT; maxDeltaY = -jsScrollContainer.offsetHeight + HEIGHT; isMobile = /Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test( navigator.userAgent ); isMobile ? document.body.classList.add("is-mobile") : null; scroll(); }

function onWheel(e) { let delta = -e.deltaY (isFIREFOX ? firefoxMultiplier scrollStrength : 1 * scrollStrength);

deltaY += delta;

scroll(e);

}

function onTouchStart (e) { var t = (e.targetTouches) ? e.targetTouches[0] : e; deltaY = t.pageY;

};

function onTouchMove (e) { let delta = -e.deltaY (isFIREFOX ? firefoxMultiplier scrollStrength : 1 * scrollStrength);

var t = (e.targetTouches) ? e.targetTouches[0] : e;
delta.deltaY = (t.pageY - touchStartY) * 1;

deltaY += t.pageY;

scroll(e);

};

var progressPath = document.querySelector("#circle_progress");      
var progressVisualizer = document.querySelector(".progressVisualizer div");

let maxThumbDeltaY = HEIGHT - scrollbarThumb.offsetHeight;
let thumbDeltaY = maxThumbDeltaY - deltaY.map(maxDeltaY, 0, 0, maxThumbDeltaY);
thumbDeltaY = Math.min(Math.max(0, thumbDeltaY), maxThumbDeltaY);

                    var progress = thumbDeltaY / maxThumbDeltaY;    
                    /*var perc = 158 * s.offset.y / s.limit.y;
                    var percCircle = 158 - perc;        
    progressPath.style.strokeDashoffset = percCircle; */
    progressVisualizer.style.transform = "translate3d(0px,0px,0px) scaleY(" + progress + ")";
    scrollprogressbarel.style.transform = "translate3d(0px,0px,0px) scaleY(" + progress + ")";

}

jsScroll.addEventListener("wheel", onWheel); jsScroll.addEventListener('touchstart', onTouchStart, { passive: false }); jsScroll.addEventListener('touchmove', onTouchMove, { passive: false });

window.addEventListener("resize", init);

window.addEventListener("DOMContentLoaded", function() { init(); initCurtain(); });`

divdax commented 4 years ago

This page is great! Could you create a Pen on codepen.io? Want to learn more about the scrolling curtain/wobble effect. Could you explain how you did that?

michaelgudzevskyi commented 4 years ago

Hi! This is so cool! Could you create a Pen on codepen?

idiotWu / smooth-scrollbar

window drag scroll and curtains.js #222