인프런 커뮤니티 질문&답변
작성한 질문수
case 3 마지막 if 문
작성
·
301
0
안녕하세요 선생님.
case 3에서 여러 if문을 사용하는데, 첫 번째 캔버스가 브라우저 상단에 닿는 부분부터 순서대로 if문 작성하시는 부분에서 질문이있어서요.
<강의 내용>
//캔버스가 브라우저 상단에 닿지 않았다면 부터 시작하는 if문을 보면
if (scrollRatio < values.rect1X[2].end) {
step = 1;
} else {
step = 2;
if (scrollRatio > values.blendHeight[2].end) {
}
if (scrollRatio > values.canvas_scale[2].end && values.canvas_scale[2].end > 0) {
}
}
이렇게 두번째랑 세번째 if문을 else함수 안에 나란히 작성하셨는데, 그렇게 말고 세번째 if를 두번째 if 안에 포함시키면 문제가 생기나요?
저는 통일감있게 if문 괄호 안에 조건을 하나만 넣고 싶은데 (scrollRatio > object[2].end) 요렇게요.
세번째 if문이 두번째 if문에 포함되지 않고 나란히 작성되면서 values.canvas_scale[2].end > 0 조건이 추가 되어야 하는 것 같아서요.
답변 4
2
아아, 제가 질문하신 의도를 잘 못알아 들었네요 ㅎㅎ
scale 처리는 blend 처리가 끝난 후가 될테니.. 동작 이상이 없다면 말씀대로 해주셔도 좋을 것 같습니다^^
제가 코딩한게 정답은 아니므로 개선할 수 있는 부분이 있다면 얼마든지 더 개선하시면 좋고요! ㅎㅎ
0
아 두번째 조건문과 세번째 조건문 내용이 다르다는건 이해했습니다 선생님:-)
저는 그냥 혹시 제가 댓글로 작성한 코드처럼 두번째 if 문 안에 세번째 if문이 작성되면 문제가 생기는 지가 궁금해가지구요ㅎㅎ
case3 경우에는 순서가 순차적으로 이루어져있어서 if문 속에 if문을 넣어서 진행하는게 가능하다고 생각을 했습니닷....
두번째 if문에서 values.canvas_scale[2].end 값을 지정해주니, 두번째 if 함수 안에서 세번째 if절을 만들면
세번째 조건문에는 scrollRatio > values.canvas_scale[2].end 이렇게만 적어줘도 실행이 되는 것 같아보여서요:)
if (scrollRatio > values.canvas_scale[2].end) {
//console.log('스크롤시작')
objs.canvas.classList.remove('sticky');
objs.canvas.style.marginTop = `${scrollHeight * 0.4}px`;
}0
두번째 조건은 blendHeight랑 비교를 하는 것이고,
세번째 조건은 canvas_scale이랑 비교를 하는건데 혹시 같은 조건으로 잘못 보신게 아닐까 싶어요~^^;
아니면 제가 질문을 잘못 이해한걸까요?
0
//캔버스가 브라우저 상단에 닿지 않았다면
if (scrollRatio < values.rect1X[2].end) {
step = 1;
//console.log('캔버스 닿기 전');
objs.canvas.classList.remove('sticky')
} 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);
//objs.context.drawImage(img, sx, sy, swidth, sheight, dx, dy, dwidth, dheight);
objs.context.drawImage(objs.images[1],
0, objs.canvas.height - blendHeight, objs.canvas.width, blendHeight,
0, objs.canvas.height - blendHeight, objs.canvas.width, blendHeight
); //canvas와 img크기가 동일하기 때문에 변수 동일 사용
objs.canvas.classList.add('sticky');
objs.canvas.style.top = `${-(objs.canvas.height - objs.canvas.height * canvasScaleRatio) / 2}px`
if (scrollRatio > values.blendHeight[2].end) {
//console.log('축소 시작!')
values.canvas_scale[0] = canvasScaleRatio;
values.canvas_scale[1] = document.body.offsetWidth / (1.5 * objs.canvas.width);
values.canvas_scale[2].start = values.blendHeight[2].end;
values.canvas_scale[2].end = values.canvas_scale[2].start + 0.2;
objs.canvas.style.transform = `scale(${calcValues(values.canvas_scale, currentYOffset)})`;
objs.canvas.style.marginTop = 0;
if (scrollRatio > values.canvas_scale[2].end) {
//console.log('스크롤시작')
objs.canvas.classList.remove('sticky');
objs.canvas.style.marginTop = `${scrollHeight * 0.4}px`;
}
}
//if (scrollRatio > values.canvas_scale[2].end
// && values.canvas_scale[2].end > 0) {
// console.log('스크롤시작');
// objs.canvas.classList.remove('sticky');
// objs.canvas.style.marginTop = `${scrollHeight * 0.4}px`;
//}
}