質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
86.02%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

Q&A

解決済

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

hiro_0000
hiro_0000

総合スコア22

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。

1回答

0グッド

0クリップ

329閲覧

投稿2022/07/22 07:42

編集2022/07/22 10:31

前提

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

以下のような質問にはグッドを送りましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

グッドが多くついた質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

気になる質問をクリップする

クリップした質問は、後からいつでもマイページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

2022/07/22 08:31依頼された後にこの質問は修正されています

こちらの質問が他のユーザーから「やってほしいことだけを記載した丸投げの質問」という指摘を受けました。

Lhankor_Mhy

2022/07/22 09:31

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

回答1

0

自己解決

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

投稿2022/07/22 10:31

hiro_0000

総合スコア22

良いと思った回答にはグッドを送りましょう。
グッドが多くついた回答ほどページの上位に表示されるので、他の人が素晴らしい回答を見つけやすくなります。

下記のような回答は推奨されていません。

  • 間違っている回答
  • 質問の回答になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

このような回答には修正を依頼しましょう。

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
86.02%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

同じタグがついた質問を見る

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

WebGL

WebGL(ウェブジーエル)は、ウェブブラウザで 3次元コンピュータグラフィックスを表示させるための標準仕様です。