編集履歴

質問編集履歴

コードを追加しました。よろしくお願いいたします。

2022/07/22 10:31

投稿

hiro_0000

スコア22

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -22,3 +22,315 @@
 codepenの方で同じようにコードを書き換えたところ、同じ動きをしたのでjsが関係しているのかなと思っております。
 初学者で未熟な私ですがヒントだけでも構いません。どうかお力をお貸しください。
+```Javascript
+console.clear();
+const webGLCurtain = new Curtains({ container: "canvas" });
+const planeContainer = document.querySelector(".planes");
+const planeElements = planeContainer.querySelectorAll(".plane");
+const draggableHidden = planeContainer.querySelector(".draggable-hidden");
+const draggableVisible = planeContainer.querySelector(".draggable-visible");
+const sliderNamesContainer = planeContainer.querySelector(
+  ".slider-names-container"
+);
+const sliderNames = planeContainer.querySelector(".slider-names");
+const names = planeContainer.querySelectorAll(".slider__name");
+const items = planeContainer.querySelectorAll(".plane");
+const draggie = new Draggabilly(draggableHidden, { axis: "x" });
+sliderNamesContainer.style.height =
+  names[0].getBoundingClientRect().height + "px";
+const width = innerWidth;
+let mouse = {
+  currentPosX: 0,
+  previousPosX: 0,
+  minPosX: 0,
+  maxPosX: width - draggableHidden.getBoundingClientRect().width,
+  isMouseDown: false
+};
+let sliderNamesProps = {
+  containerHeight:
+    sliderNamesContainer.getBoundingClientRect().height -
+    sliderNames.getBoundingClientRect().height
+};
+let start = performance.now();
+let velocity = 0;
+let lastVelocity = 0;
+let posNames = 0;
+let lastPosNames = 0;
+let amplitude = 0.1;
+let lastMouse = 0;
+let easing = 0.05;
+let cancelAnimation = true;
+let isOut = false;
+const planes = [];
+const MathUtils = {
+  lerp: (a, b, n) => (1 - n) * a + n * b,
+  map_range: (value, low1, high1, low2, high2) => {
+    return low2 + ((high2 - low2) * (value - low1)) / (high1 - low1);
+  }
+};
+const createCanvas = () => {
+  const shader = {
+    vertex: `
+    #ifdef GL_ES
+    precision mediump float;
+    #endif
+    #define PI 3.14159265359
+    // those are the mandatory attributes that the lib sets
+    attribute vec3 aVertexPosition;
+    attribute vec2 aTextureCoord;
+    // those are mandatory uniforms that the lib sets and that contain our model view and projection matrix
+    uniform mat4 uMVMatrix;
+    uniform mat4 uPMatrix;
+    uniform mat4 planeTextureMatrix;
+    // if you want to pass your vertex and texture coords to the fragment shader
+    varying vec3 vVertexPosition;
+    varying vec2 vTextureCoord;
+    varying float vDirection;
+    uniform float uDirection;
+    void main() {
+        vec3 position = aVertexPosition;
+        float x = sin((position.y * 0.5 - 0.5) * PI) * uDirection;
+        position.x -= x;
+        gl_Position = uPMatrix * uMVMatrix * vec4(position, 1.0);
+        // set the varyings
+        vTextureCoord = (planeTextureMatrix * vec4(aTextureCoord, 0., 1.)).xy;
+        vVertexPosition = position;
+        vDirection = uDirection;
+    }`,
+    fragment: `
+    #ifdef GL_ES
+    precision mediump float;
+    #endif
+    #define PI2 6.28318530718
+    #define PI 3.14159265359
+    #define S(a,b,n) smoothstep(a,b,n)
+    // get our varyings
+    varying vec3 vVertexPosition;
+    varying vec2 vTextureCoord;
+    // the uniform we declared inside our javascript
+    uniform float uTime;
+    // our texture sampler (default name, to use a different name please refer to the documentation)
+    uniform sampler2D planeTexture;
+    varying float vDirection;
+    void main(){
+        vec2 uv = vTextureCoord;
+        float scale = -abs(vDirection) * 0.8;
+        uv = (uv - 0.5) * scale + uv;
+        float r = texture2D(planeTexture, vec2(uv.x - vDirection * 0.1, uv.y)).r;
+        float g = texture2D(planeTexture, vec2(uv.x - vDirection * 0.4, uv.y)).g;
+        float b = texture2D(planeTexture, vec2(uv.x - vDirection * 0.4, uv.y)).b;
+        gl_FragColor = vec4(r, g, b, 1.0);
+    }
+    `
+  };
+  const params = {
+    vertexShader: shader.vertex, // our vertex shader ID
+    fragmentShader: shader.fragment, // our framgent shader ID
+    widthSegments: 40,
+    heightSegments: 40, // we now have 40*40*6 = 9600 vertices !
+    uniforms: {
+      time: {
+        name: "uTime",
+        type: "1f",
+        value: 0
+      },
+      direction: {
+        name: "uDirection",
+        type: "1f",
+        value: 0
+      }
+    }
+  };
+  webGLCurtain.disableDrawing();
+  // crear nuestros planos
+  for (let i = 0; i < planeElements.length; i++) {
+    const plane = webGLCurtain.addPlane(planeElements[i], params);
+    planes.push(plane);
+    startPlane(items[i], plane);
+  }
+  initEvents();
+  requestAnimationFrame(onUpdate);
+};
+const startPlane = (planeElement, plane) => {
+  plane.onLoading(() => {
+    plane.mouseOver = false;
+    planeElement.addEventListener("mouseenter", () => {
+      plane.mouseOver = true;
+      webGLCurtain.enableDrawing();
+    });
+    planeElement.addEventListener("mouseleave", () => {
+      plane.mouseOver = false;
+    });
+    webGLCurtain.needRender();
+  });
+};
+const onUpdate = () => {
+  if (!cancelAnimation) {
+    for (let i = 0, l = planes.length; i < l; i++) {
+      planes[i].uniforms.direction.value = lastVelocity;
+      planes[i].updatePosition();
+    }
+    const { lerp } = MathUtils;
+    const now = performance.now();
+    const velocity =
+      ((mouse.currentPosX - lastMouse) / (now - start)) * amplitude;
+    lastVelocity = lerp(lastVelocity, velocity, easing);
+    start = now;
+    lastMouse = mouse.currentPosX;
+    mouse.previousPosX = lerp(mouse.previousPosX, mouse.currentPosX, easing);
+    draggableVisible.style.transform = `translate3d(${mouse.previousPosX}px, 0, 0)`;
+    posNames =
+      (draggie.position.x / mouse.maxPosX) * sliderNamesProps.containerHeight;
+    lastPosNames = lerp(lastPosNames, posNames, easing);
+    sliderNames.style.transform = `translate3d(0,${lastPosNames}px,0)`;
+    if (Math.round(mouse.previousPosX) === mouse.currentPosX) {
+      webGLCurtain.disableDrawing();
+      cancelAnimation = true;
+    }
+  }
+  requestAnimationFrame(onUpdate);
+};
+// elemento arrastrar
+const onDragMove = () => {
+  cancelAnimation = false;
+  webGLCurtain.enableDrawing();
+  // Si esta en el limite se trasladara la mitad del ancho del viewport
+  if (draggie.position.x > mouse.minPosX) {
+    mouse.currentPosX = MathUtils.map_range(
+      draggie.position.x,
+      0,
+      innerWidth,
+      0,
+      innerWidth / 3
+    );
+  } else if (draggie.position.x < mouse.maxPosX) {
+    mouse.currentPosX = MathUtils.map_range(
+      draggie.position.x,
+      mouse.maxPosX,
+      mouse.maxPosX - innerWidth,
+      mouse.maxPosX,
+      mouse.maxPosX - innerWidth / 3
+    );
+  } else {
+    mouse.currentPosX = draggie.position.x;
+    easing = 0.05;
+  }
+  amplitude = 0.1;
+};
+const onDragStart = (e) => {
+  planeContainer.style.cursor = "grabbing"; // Aplica al cursor el icono de agarrando;
+};
+const onDragEnd = () => {
+  planeContainer.style.cursor = "grab"; // Aplica al cursor el icono de agarrar
+  // Si esta en el limite volvera a su posicion inicial o final
+  if (draggie.position.x > mouse.minPosX) {
+    mouse.currentPosX = 0;
+    draggie.setPosition(mouse.currentPosX, draggie.position.y);
+    amplitude = 0;
+    easing = 0.07;
+  } else if (draggie.position.x < mouse.maxPosX) {
+    mouse.currentPosX = mouse.maxPosX;
+    draggie.setPosition(mouse.currentPosX, draggie.position.y);
+    amplitude = 0;
+    easing = 0.07;
+  } else {
+    draggie.setPosition(mouse.currentPosX, draggie.position.y);
+  }
+};
+// Al reescalar calcula denuevo la posicion maxima
+const onResize = () => {
+  sliderNamesContainer.style.height =
+    names[0].getBoundingClientRect().height + "px";
+  mouse.maxPosX =
+    window.innerWidth - draggableHidden.getBoundingClientRect().width;
+  sliderNamesProps = {
+    containerHeight:
+      sliderNamesContainer.getBoundingClientRect().height -
+      sliderNames.getBoundingClientRect().height
+  };
+};
+const initEvents = () => {
+  draggie.on("dragMove", () => {
+    if (isOut) return;
+    onDragMove();
+  });
+  draggie.on("pointerDown", () => {
+    isOut = false;
+    onDragStart();
+  });
+  draggie.on("pointerUp", onDragEnd);
+  planeContainer.addEventListener("mouseleave", () => {
+    isOut = true;
+    onDragEnd();
+  });
+  window.addEventListener("resize", onResize);
+};
+window.addEventListener("load", createCanvas);
+```

JavaScript WebGL