#scroll-section-3 부분 질문입니다!

Question

#scroll-section-3 부분이 나오기 전에 강의예제는 sticky 에서 sticky로 넘어가잖아요 근데 제가 변형시켜서 normal로 바꾸고 그안에 비디오를 넣어주었습니다! 근데 #scroll-section-3 부분의 패딩값때문인지 너무 뒤늦게 #scroll-section-3신이 등장을 하여 여백이 너무 커서 normal부분에 나오는 비디오 부분을 scrollRatio로 지정해서 픽스해주고 opacity로 자연스럽게 없어지고 #scroll-section-3이 자연스럽게 나올수 있게 하였는데 모바일화면에서 기기별로 뚝뚝 끊겨서 픽스가 되어버려서 scrollRatio 를 만져줘야하는지 어디부분을 손데어야 하는지 도무지 모르겠어서 질문 남깁니다! 제 설명이 이상해서 그부분 소스를 올려보겠습니다! case 4: // 비디오 고정되는 부분 if (scrollRatio <= 0.37) { $('.tetest').removeClass("fix-test"); } else { $('.tetest').addClass("fix-test"); } if (scrollRatio <= 0.06) { // in objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset); objs.messageB.style.opacity = calcValues(values.messageB_opacity_in, currentYOffset); } if (scrollRatio <= 0.99) { objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset); objs.messageB.style.opacity = calcValues(values.messageB_opacity_out, currentYOffset); } if(scrollRatio >= 0.65) { console.log('닿기전'); const objs = sceneInfo[5].objs; const values = sceneInfo[5].values; const widthRatio = window.innerWidth / objs.canvas.width; const heightRatio = window.innerHeight / objs.canvas.height; let canvasScaleRatio; if (widthRatio <= heightRatio) { //캔버스보다 브라우저 창이 홀쭉한 경우 canvasScaleRatio = heightRatio; } else { //캔버스보다 브라우저 창이 납작한 경우 canvasScaleRatio = widthRatio; } objs.canvas.style.transform = `scale(${canvasScaleRatio})`; objs.context.fillStyle = 'white'; objs.context.drawImage(objs.images[0], -370, -170); //캔버스 사이즈에 맞춰 가정한 innerWidth와 InnerHeight const recalculatedInnerWidth = document.body.offsetWidth / canvasScaleRatio; const recalculatedInnerHeight = window.innerHeight / canvasScaleRatio; const whiteRectWidth = recalculatedInnerWidth * 0.15; values.rect1X[0] = (objs.canvas.width - recalculatedInnerWidth) / 2; values.rect1X[1] = values.rect1X[0] - whiteRectWidth; values.rect2X[0] = values.rect1X[0] + recalculatedInnerWidth - whiteRectWidth; values.rect2X[1] = values.rect2X[0] + whiteRectWidth; //좌우 흰색 박스 그리기 // objs.context.fillRect(values.rect1X[0], 0, parseInt(whiteRectWidth), objs.canvas.height); // objs.context.fillRect(values.rect2X[0], 0, parseInt(whiteRectWidth), objs.canvas.height); // 좌우 흰색 박스 그리기 objs.context.fillRect( parseInt(values.rect1X[0]), 0, parseInt(whiteRectWidth), objs.canvas.height ); objs.context.fillRect( parseInt(values.rect2X[0]), 0, parseInt(whiteRectWidth), objs.canvas.height ); } break; -------------------------------------------case 5: // #scroll-section3 console.log('닿은후'); // 가로/세로 모두 꽉 차게 하기 위해 여기서 세팅(계산 필요) let step = 0; const widthRatio = window.innerWidth / objs.canvas.width; const heightRatio = window.innerHeight / objs.canvas.height; const gradient = objs.context.createLinearGradient(0, 0, 0, 1000); let canvasScaleRatio; if (widthRatio <= heightRatio) { //캔버스보다 브라우저 창이 홀쭉한 경우 canvasScaleRatio = heightRatio; } else { //캔버스보다 브라우저 창이 납작한 경우 canvasScaleRatio = widthRatio; } objs.canvas.style.transform = `scale(${canvasScaleRatio})`; objs.context.fillStyle = 'white'; objs.context.drawImage(objs.images[0], -370, -170); //캔버스 사이즈에 맞춰 가정한 innerWidth와 InnerHeight const recalculatedInnerWidth = document.body.offsetWidth / canvasScaleRatio; const recalculatedInnerHeight = window.innerHeight / canvasScaleRatio; if (!values.rectStartY){ // values.rectStartY = objs.canvas.getBoundingClientRect().top; values.rectStartY = objs.canvas.offsetTop + (objs.canvas.height - objs.canvas.height * canvasScaleRatio) / 2; console.log(values.rectStartY); values.rect1X[2].start = (window.innerHeight / 2) / scrollHeight; values.rect2X[2].start = (window.innerHeight / 2) / scrollHeight; values.rect1X[2].end = values.rectStartY / scrollHeight; values.rect2X[2].end = values.rectStartY / scrollHeight; } //좌우 박스 크기 const whiteRectWidth = recalculatedInnerWidth * 0.15; values.rect1X[0] = (objs.canvas.width - recalculatedInnerWidth) / 2; values.rect1X[1] = values.rect1X[0] - whiteRectWidth; values.rect2X[0] = values.rect1X[0] + recalculatedInnerWidth - whiteRectWidth; values.rect2X[1] = values.rect2X[0] + whiteRectWidth; //좌우 흰색 박스 그리기 // objs.context.fillRect(values.rect1X[0], 0, parseInt(whiteRectWidth), objs.canvas.height); // objs.context.fillRect(values.rect2X[0], 0, parseInt(whiteRectWidth), objs.canvas.height); // 좌우 흰색 박스 그리기 objs.context.fillRect( parseInt(calcValues(values.rect1X, currentYOffset)), 0, parseInt(whiteRectWidth), objs.canvas.height ); objs.context.fillRect( parseInt(calcValues(values.rect2X, currentYOffset)), 0, parseInt(whiteRectWidth), objs.canvas.height ); // Add three color stops gradient.addColorStop(0, "rgba(13, 12, 17, 0)"); gradient.addColorStop(0.3, "rgba(13, 12, 17, 0)"); gradient.addColorStop(0.5, "rgba(13, 12, 17, 0.1)"); gradient.addColorStop(0.6, "rgba(13, 12, 17, 0.3)"); gradient.addColorStop(0.8, "rgba(13, 12, 17, 0.7)"); gradient.addColorStop(1, "rgba(13, 12, 17, 1)"); if (scrollRatio < values.rect1X[2].end){ step = 1; // console.log('캔버스 닿기 전'); objs.canvas.classList.remove('stickyy'); } else { step = 2; // console.log('캔버스 닿을때'); // imageBlendY: [ 0, 0, { start: 0, end: 0 }] values.blendHeight[0] = 0; values.blendHeight[1] = objs.canvas.height; values.blendHeight[2].start = values.rect1X[2].end; values.blendHeight[2].end = values.blendHeight[2].start + 0.2; const blendHeight = calcValues(values.blendHeight, currentYOffset); // Set the fill style and draw a rectangle objs.context.fillStyle = gradient; objs.context.fillRect(0, objs.canvas.height - blendHeight, objs.canvas.width, blendHeight, 0, objs.canvas.height - blendHeight, objs.canvas.width, blendHeight); objs.canvas.classList.add('stickyy'); objs.canvas.style.top =`${-(objs.canvas.height - objs.canvas.height * canvasScaleRatio) / 2}px`; if (scrollRatio > values.blendHeight[2].end){ objs.canvas.classList.remove('stickyy'); objs.canvas.style.marginTop = `${scrollHeight * 0.2}px`; } else { objs.canvas.style.marginTop = 0; } // index2 추가 코드 values.messageA_opacity_in[2].start = values.rect1X[2].end; values.messageA_opacity_in[2].end = values.blendHeight[2].start + 0.1; values.messageA_opacity_out[2].start = values.messageA_opacity_in[2].end + 0.1; values.messageA_opacity_out[2].end = values.messageA_opacity_out[2].start + 0.1; if (scrollRatio < values.messageA_opacity_in[2].end + 0.05) { objs.messageA.style.opacity = calcValues(values.messageA_opacity_in, currentYOffset); } else { objs.messageA.style.opacity = calcValues(values.messageA_opacity_out, currentYOffset); } } // index2 추가 코드 if (scrollRatio <= values.messageA_opacity_in[2].start) { objs.messageA.style.opacity = values.messageA_opacity_in[0]; } if (scrollRatio >= values.messageA_opacity_out[2].end) { objs.messageA.style.opacity = values.messageA_opacity_out[1]; } // section-7 그라데이션 클래스 주기 if (scrollRatio <= 0.93) { $('.linear1').removeClass("linear-1"); $('.linear1').removeClass("linear1-1"); $('.tetest').removeClass("fix-test"); } else { $('.linear1').addClass("linear-1"); $('.linear1').addClass("linear1-1"); } break;

1분코딩 · Answer

위 질문에 답변 드렸습니다.