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

#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;