webGL　スライダーを設置したい

前提

Wordpressでサイトを新規制作中です。
その中で変わったスライダーを設置したいと思い、webGLのスライダーをサイトに設置したいです。

実現したいこと

以下のサイトのスライダーを設置したい。

https://codepen.io/rzbrnl/pen/bGqXyav

発生している問題・エラーメッセージ

設置はできたもののパララックスのような動きをします。
リロードするたびにスライダーの位置が変動してしまうため、トップページからスライダーの箇所までスクロールした時にはスライダーが消えており、背景だけ残っている状況です。

試したこと

html,css,js全て読み込みは完了しており、jsはCDNで読み込んでいます。
エラーも特に出ておりません。

codepenの方で同じようにコードを書き換えたところ、同じ動きをしたのでjsが関係しているのかなと思っております。
初学者で未熟な私ですがヒントだけでも構いません。どうかお力をお貸しください。

Javascript
1console.clear();
2const webGLCurtain = new Curtains({ container: "canvas" });
3const planeContainer = document.querySelector(".planes");
4const planeElements = planeContainer.querySelectorAll(".plane");
5const draggableHidden = planeContainer.querySelector(".draggable-hidden");
6const draggableVisible = planeContainer.querySelector(".draggable-visible");
7const sliderNamesContainer = planeContainer.querySelector(
8  ".slider-names-container"
9);
10const sliderNames = planeContainer.querySelector(".slider-names");
11const names = planeContainer.querySelectorAll(".slider__name");
12const items = planeContainer.querySelectorAll(".plane");
13const draggie = new Draggabilly(draggableHidden, { axis: "x" });
14
15sliderNamesContainer.style.height =
16  names[0].getBoundingClientRect().height + "px";
17
18const width = innerWidth;
19
20let mouse = {
21  currentPosX: 0,
22  previousPosX: 0,
23  minPosX: 0,
24  maxPosX: width - draggableHidden.getBoundingClientRect().width,
25  isMouseDown: false
26};
27
28let sliderNamesProps = {
29  containerHeight:
30    sliderNamesContainer.getBoundingClientRect().height -
31    sliderNames.getBoundingClientRect().height
32};
33
34let start = performance.now();
35let velocity = 0;
36let lastVelocity = 0;
37let posNames = 0;
38let lastPosNames = 0;
39let amplitude = 0.1;
40let lastMouse = 0;
41let easing = 0.05;
42let cancelAnimation = true;
43let isOut = false;
44
45const planes = [];
46
47const MathUtils = {
48  lerp: (a, b, n) => (1 - n) * a + n * b,
49  map_range: (value, low1, high1, low2, high2) => {
50    return low2 + ((high2 - low2) * (value - low1)) / (high1 - low1);
51  }
52};
53
54const createCanvas = () => {
55  const shader = {
56    vertex: `    
57    #ifdef GL_ES
58    precision mediump float;
59    #endif
60    
61    #define PI 3.14159265359
62    
63    // those are the mandatory attributes that the lib sets
64    attribute vec3 aVertexPosition;
65    attribute vec2 aTextureCoord;
66
67    // those are mandatory uniforms that the lib sets and that contain our model view and projection matrix
68    uniform mat4 uMVMatrix;
69    uniform mat4 uPMatrix;
70
71    uniform mat4 planeTextureMatrix;
72
73    // if you want to pass your vertex and texture coords to the fragment shader
74    varying vec3 vVertexPosition;
75    varying vec2 vTextureCoord;
76
77    varying float vDirection;
78
79    uniform float uDirection;
80
81    void main() {
82        vec3 position = aVertexPosition;
83
84        float x = sin((position.y * 0.5 - 0.5) * PI) * uDirection;
85
86        position.x -= x;
87        
88        gl_Position = uPMatrix * uMVMatrix * vec4(position, 1.0);
89
90        // set the varyings
91        vTextureCoord = (planeTextureMatrix * vec4(aTextureCoord, 0., 1.)).xy;
92        vVertexPosition = position;
93
94        vDirection = uDirection;
95    }`,
96    fragment: `
97    #ifdef GL_ES
98    precision mediump float;
99    #endif
100
101    #define PI2 6.28318530718
102    #define PI 3.14159265359
103    #define S(a,b,n) smoothstep(a,b,n)
104    
105    // get our varyings
106    varying vec3 vVertexPosition;
107    varying vec2 vTextureCoord;
108
109    // the uniform we declared inside our javascript
110    uniform float uTime;
111
112    // our texture sampler (default name, to use a different name please refer to the documentation)
113    uniform sampler2D planeTexture;
114    
115    varying float vDirection;
116
117    void main(){
118        vec2 uv = vTextureCoord;
119
120        float scale = -abs(vDirection) * 0.8;
121
122        uv = (uv - 0.5) * scale + uv;
123
124        float r = texture2D(planeTexture, vec2(uv.x - vDirection * 0.1, uv.y)).r;
125        float g = texture2D(planeTexture, vec2(uv.x - vDirection * 0.4, uv.y)).g;
126        float b = texture2D(planeTexture, vec2(uv.x - vDirection * 0.4, uv.y)).b;
127        
128        gl_FragColor = vec4(r, g, b, 1.0);  
129    }
130    `
131  };
132
133  const params = {
134    vertexShader: shader.vertex, // our vertex shader ID
135    fragmentShader: shader.fragment, // our framgent shader ID
136    widthSegments: 40,
137    heightSegments: 40, // we now have 40*40*6 = 9600 vertices !
138    uniforms: {
139      time: {
140        name: "uTime",
141        type: "1f",
142        value: 0
143      },
144      direction: {
145        name: "uDirection",
146        type: "1f",
147        value: 0
148      }
149    }
150  };
151
152  webGLCurtain.disableDrawing();
153
154  // crear nuestros planos
155  for (let i = 0; i < planeElements.length; i++) {
156    const plane = webGLCurtain.addPlane(planeElements[i], params);
157
158    planes.push(plane);
159    startPlane(items[i], plane);
160  }
161
162  initEvents();
163  requestAnimationFrame(onUpdate);
164};
165
166const startPlane = (planeElement, plane) => {
167  plane.onLoading(() => {
168    plane.mouseOver = false;
169
170    planeElement.addEventListener("mouseenter", () => {
171      plane.mouseOver = true;
172      webGLCurtain.enableDrawing();
173    });
174
175    planeElement.addEventListener("mouseleave", () => {
176      plane.mouseOver = false;
177    });
178
179    webGLCurtain.needRender();
180  });
181};
182
183const onUpdate = () => {
184  if (!cancelAnimation) {
185    for (let i = 0, l = planes.length; i < l; i++) {
186      planes[i].uniforms.direction.value = lastVelocity;
187      planes[i].updatePosition();
188    }
189
190    const { lerp } = MathUtils;
191    const now = performance.now();
192
193    const velocity =
194      ((mouse.currentPosX - lastMouse) / (now - start)) * amplitude;
195
196    lastVelocity = lerp(lastVelocity, velocity, easing);
197
198    start = now;
199    lastMouse = mouse.currentPosX;
200
201    mouse.previousPosX = lerp(mouse.previousPosX, mouse.currentPosX, easing);
202
203    draggableVisible.style.transform = `translate3d(${mouse.previousPosX}px, 0, 0)`;
204
205    posNames =
206      (draggie.position.x / mouse.maxPosX) * sliderNamesProps.containerHeight;
207
208    lastPosNames = lerp(lastPosNames, posNames, easing);
209
210    sliderNames.style.transform = `translate3d(0,${lastPosNames}px,0)`;
211
212    if (Math.round(mouse.previousPosX) === mouse.currentPosX) {
213      webGLCurtain.disableDrawing();
214      cancelAnimation = true;
215    }
216  }
217
218  requestAnimationFrame(onUpdate);
219};
220
221// elemento arrastrar
222const onDragMove = () => {
223  cancelAnimation = false;
224  webGLCurtain.enableDrawing();
225
226  // Si esta en el limite se trasladara la mitad del ancho del viewport
227  if (draggie.position.x > mouse.minPosX) {
228    mouse.currentPosX = MathUtils.map_range(
229      draggie.position.x,
230      0,
231      innerWidth,
232      0,
233      innerWidth / 3
234    );
235  } else if (draggie.position.x < mouse.maxPosX) {
236    mouse.currentPosX = MathUtils.map_range(
237      draggie.position.x,
238      mouse.maxPosX,
239      mouse.maxPosX - innerWidth,
240      mouse.maxPosX,
241      mouse.maxPosX - innerWidth / 3
242    );
243  } else {
244    mouse.currentPosX = draggie.position.x;
245
246    easing = 0.05;
247  }
248
249  amplitude = 0.1;
250};
251
252const onDragStart = (e) => {
253  planeContainer.style.cursor = "grabbing"; // Aplica al cursor el icono de agarrando;
254};
255
256const onDragEnd = () => {
257  planeContainer.style.cursor = "grab"; // Aplica al cursor el icono de agarrar
258
259  // Si esta en el limite volvera a su posicion inicial o final
260  if (draggie.position.x > mouse.minPosX) {
261    mouse.currentPosX = 0;
262    draggie.setPosition(mouse.currentPosX, draggie.position.y);
263    amplitude = 0;
264    easing = 0.07;
265  } else if (draggie.position.x < mouse.maxPosX) {
266    mouse.currentPosX = mouse.maxPosX;
267    draggie.setPosition(mouse.currentPosX, draggie.position.y);
268    amplitude = 0;
269    easing = 0.07;
270  } else {
271    draggie.setPosition(mouse.currentPosX, draggie.position.y);
272  }
273};
274
275// Al reescalar calcula denuevo la posicion maxima
276const onResize = () => {
277  sliderNamesContainer.style.height =
278    names[0].getBoundingClientRect().height + "px";
279
280  mouse.maxPosX =
281    window.innerWidth - draggableHidden.getBoundingClientRect().width;
282
283  sliderNamesProps = {
284    containerHeight:
285      sliderNamesContainer.getBoundingClientRect().height -
286      sliderNames.getBoundingClientRect().height
287  };
288};
289
290const initEvents = () => {
291  draggie.on("dragMove", () => {
292    if (isOut) return;
293    onDragMove();
294  });
295  draggie.on("pointerDown", () => {
296    isOut = false;
297    onDragStart();
298  });
299  draggie.on("pointerUp", onDragEnd);
300
301  planeContainer.addEventListener("mouseleave", () => {
302    isOut = true;
303    onDragEnd();
304  });
305
306  window.addEventListener("resize", onResize);
307};
308
309window.addEventListener("load", createCanvas);
310

Lhankor_Mhy

2022/07/22 09:31

コードをご提示ください。

回答1件

自己解決

html、cssはこちらになります。

html
1<div id="wrap">
2<div id="wrap-texture">
3
4  <!-- div that will hold our WebGL canvas -->
5  <div id="canvas"></div>
6  <!-- images that will be used as textures by our plane -->
7  <div class="planes">
8    <div class="draggable-container">
9      
10      <!--- slide names---> 
11      <div class="slider-names-container">
12        <div class="slider-names">
13          <div class="slider__name"></div>
14        </div>
15      </div>
16      
17      <!--- draggable hidden ---> 
18      <div class="draggable-hidden">
19      </div>
20      
21      <!--- draggable images ---> 
22      <div class="draggable-visible">
23        <div class="plane"><img data-sampler="planeTexture" class="texture" src="https://i.ibb.co/LNc4vfD/photo-1561310698-9c503e838d4d.jpg" crossorigin="anonymous" /></div>
24        <div class="plane"><img data-sampler="planeTexture" class="texture" src="https://i.ibb.co/2jHLxV9/photo-1515886657613-9f3515b0c78f.jpg" crossorigin="anonymous" /></div>
25        <div class="plane"><img data-sampler="planeTexture" class="texture" src="https://i.ibb.co/jvQhpwB/photo-1525802222951-a4df2077c9b9.jpg" crossorigin="anonymous" /></div>
26        <div class="plane"><img data-sampler="planeTexture" class="texture" src="https://i.ibb.co/B6dBLpS/photo-1541257710737-06d667133a53.jpg" crossorigin="anonymous" /></div>
27        <div class="plane"><img data-sampler="planeTexture" class="texture" src="https://i.ibb.co/869FGQx/photo-1456885284447-7dd4bb8720bf.jpg" crossorigin="anonymous" /></div>
28        <div class="plane"><img data-sampler="planeTexture" class="texture" src="https://i.ibb.co/gTFjPq6/photo-1508285296015-c0b524447532.jpg" crossorigin="anonymous" /></div>
29        <div class="plane"><img data-sampler="planeTexture" class="texture" src="https://i.ibb.co/WK300gt/photo-1542642810-ff5ac8ce5669.jpg" crossorigin="anonymous" /></div>
30        <div class="plane"><img data-sampler="planeTexture" class="texture" src="https://i.ibb.co/7QbhnKJ/photo-1508606572321-901ea443707f.jpg" crossorigin="anonymous" /></div>
31      </div>
32    </div>
33  </div>
34</div>
35</div>

css
1#wrap{
2  position: relative;
3}
4
5#wrap-texture {
6  position: absolute;
7  top: 0;
8  left: 0;
9  width: 100%;
10  display: flex;
11  align-items: center;
12}
13
14#canvas {
15  position: absolute;
16  top: 0;
17  right: 0;
18  bottom: 0;
19  left: 0;
20}
21
22#canvas:before {
23  content: "";
24  position: absolute;
25  width: 100%;
26  height: 100%;
27  background-color: rgba(0, 0, 0, 0.3);
28}
29
30.planes {
31  display: flex;
32  align-items: center;
33  width: 100%;
34  height: 100vh;
35  user-select: none;
36  position: relative;
37  cursor: grab;
38  white-space: nowrap;
39  overflow: hidden;
40}
41
42.draggable-container {
43  position: absolute;
44  height: 100%;
45}
46
47.slider-names-container {
48  --size: calc(7vmin + 1rem);
49  text-align: center;
50  font-family: DomaineDisp;
51  font-size: var(--size);
52  text-transform: uppercase;
53  pointer-events: none;
54  color: rgb(255, 255, 255);
55  overflow-y: hidden;
56  width: 100vw;
57  position: absolute;
58  top: 50%;
59  transform: translatey(-50%);
60}
61
62.draggable-visible {
63  display: grid;
64  grid-template-columns: repeat(8, minmax(480px, 1fr));
65  height: 100%;
66  grid-column-gap: 100px;
67}
68
69.draggable-hidden {
70  z-index: 5;
71  width: 100%; 
72  height: 100%;
73  position: absolute;
74}
75
76.draggable-hidden .item {
77  height: 100%;
78}
79
80.grabbing {
81  cursor: grabbing;
82}
83
84.plane {
85  height: 100%;
86}
87
88.plane img {
89  display: none;
90  object-fit: cover;
91  width: 100%;
92  height: 100%;
93}
94