인프런 커뮤니티 질문&답변
작성한 질문수
#scroll-section-3 부분 질문입니다!
작성
·
301
0
#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;