소개
게시글
질문&답변
2021.10.06
오류
저도 안되는 부분이 있어 댓글남깁니다. 제 코드는 이렇습니다. (() => { let yOffset = 0; let prevScrollHeight = 0; //current scroll yOffset previous scroll sections sum of heights let currentScene = 0;// currently activated scene in front of our eye let enterNewScene = false; //whne new scene set, starts true const sceneInfo = [ { type: 'sticky', scrollHeight: 0, heightNum: 5,// browser's height times 5 to set scrollHeight objs:{ container: document.querySelector('#scroll-section-0'), messageA: document.querySelector('#scroll-section-0 .main-message.a'), messageB: document.querySelector('#scroll-section-0 .main-message.b'), messageC: document.querySelector('#scroll-section-0 .main-message.c'), messageD : document.querySelector('#scroll-section-0 .main-message.d'), canvas: document.querySelector('#video-canvas-0'), context: document.querySelector('#video-canvas-0').getContext('2d'), videoImages: [], }, values: { // in messageA_opacity: [0,1, {start: 0.1, end:0.2}], messageA_translateY_in: [20, 0, {start:0.1, end:0.2}], messageB_opacity: [0,1, {start: 0.3, end:0.4}], messageB_translateY_in: [20, 0, {start:0.3, end:0.4}], messageC_opacity: [0,1, {start: 0.5, end:0.6}], messageC_translateY_in: [20, 0, {start:0.5, end:0.6}], messageD_opacity: [0,1, {start: 0.7, end:0.8}], messageD_translateY_in: [20, 0, {start:0.7, end:0.8}], // out messageA_opacity_out: [1,0,{start:0.25, end:0.3}], messageA_translateY_out: [0, -20, {start:0.25, end:0.3}], messageB_opacity_out: [1,0,{start:0.45, end:0.5}], messageB_translateY_out: [0, -20, {start:0.45, end:0.5}], messageC_opacity_out: [1,0,{start:0.65, end:0.7}], messageC_translateY_out: [0, -20, {start:0.65, end:0.7}], messageD_opacity_out: [1,0,{start:0.85, end:0.9}], messageD_translateY_out: [0, -20, {start:0.85, end:0.9}], // images videoIMageCount: 300, imageSequence: [0, 299], //canvas canvas_opacity: [1,0,{start:0.9,end:1}] } }, { type: 'normal', scrollHeight: 0, heightNum: 5,// browser's height times 5 to set scrollHeight, objs:{ container: document.querySelector('#scroll-section-1') } }, { type: 'sticky', scrollHeight: 0,// for compatibility purposes heightNum: 5,// browser's height times 5 to set scrollHeight objs:{ container: document.querySelector('#scroll-section-2'), messageA: document.querySelector('#scroll-section-2 .a'), messageB: document.querySelector('#scroll-section-2 .b'), messageC: document.querySelector('#scroll-section-2 .c'), pinB: document.querySelector('#scroll-section-2 .b .pin'), pinC: document.querySelector('#scroll-section-2 .c .pin'), canvas: document.querySelector('#video-canvas-1'), context: document.querySelector('#video-canvas-1').getContext('2d'), videoImages: [], }, values:{ messageA_translateY_in: [20, 0, {start:0.15, end:0.2}], messageB_translateY_in: [30, 0, {start:0.5, end:0.55}], messageC_translateY_in: [30, 0, {start:0.72, end:0.77}], messageA_opacity: [0,1,{start:0.15, end:0.2}], messageB_opacity: [0,1,{start:0.5, end:0.55}], messageC_opacity: [0,1,{start:0.72, end:0.77}], messageA_translateY_out: [0,-20, {start:0.3, end:0.35}], messageB_translateY_out: [0,-20, {start:0.58, end:0.63}], messageC_translateY_out: [0,-20, {start:0.85, end:0.9}], messageA_opacity_out: [1,0,{start:0.3, end:0.35}], messageB_opacity_out: [1,0,{start:0.58, end:0.63}], messageC_opacity_out: [1,0,{start:0.85, end:0.9}], pinB_scaleY: [0.5,1,{start:0.5, end:0.55}], pinC_scaleY: [0.5,1,{start:0.72, end:0.77}], pinB_opacity: [0,1,{start:0.5, end:0.55}], pinC_opacity: [0,1,{start:0.72, end:0.77}], pinB_opacity_out:[1,0,{start:0.58, end:0.63}], pinC_opacity_out:[1,0,{start:0.85, end:0.9}], // images videoIMageCount: 960, imageSequence: [0, 959], //canvas canvas_opacity: [0,1,{start:0,end:0.1}], canvas_opacity_out: [1,0,{start: 0.95, end:1}] } }, { type: 'sticky', scrollHeight: 0, heightNum: 5,// browser's height times 5 to set scrollHeight objs:{ container: document.querySelector('#scroll-section-3'), canvasCaption: document.querySelector('.canvas-caption'), canvas: document.querySelector('.image-blend-canvas'), context: document.querySelector('.image-blend-canvas').getContext('2d'), imagesPath: [ './images/blend-image-1.jpg', './images/blend-image-2.jpg', ], images:[] }, values: { rect1X: [0,0,{start:0, end:0}], rect2X: [0,0,{start:0, end:0}], rectStartY: 0, } }, ] function setCanvasImages(){ let imgElem; for(let i =0; i = yOffset){ currentScene = i; break; } } document.body.setAttribute('id', `show-scene-${currentScene}`); const heightRatio = window.innerHeight/1080; // multiply window ratio to the current browser's height sceneInfo[0].objs.canvas.style.transform = `translate3d(-50%, -50%, 0) scale(${heightRatio})`; sceneInfo[2].objs.canvas.style.transform = `translate3d(-50%, -50%, 0) scale(${heightRatio})`; } // the ratio of current scrolled values in terms of Y offset function calcValues(values, currentYOffset){ let rv; const scrollHeight = sceneInfo[currentScene].scrollHeight; // current Scene, scrolled section need to be factored let scrollRatio = currentYOffset / sceneInfo[currentScene].scrollHeight; // specific start ~ specific end animation activated if(values.length ===3){ const partScrollStart = values[2].start * scrollHeight; const partScrollEnd = values[2].end * scrollHeight; const partScrollHeight = partScrollEnd - partScrollStart; if(currentYOffset >= partScrollStart && currentYOffset partScrollEnd){ rv =values[1]; } } else{ rv = scrollRatio * (values[1] - values[0]) + values[0] } return rv; } function playAnimation(){ const objs = sceneInfo[currentScene].objs; const values = sceneInfo[currentScene].values; const currentYOffset = yOffset - prevScrollHeight; //current scene's ratio current height const scrollRatio = currentYOffset / sceneInfo[currentScene].scrollHeight; switch(currentScene){ case 0: // getting the sequence and scrolls of it let sequence = Math.round(calcValues(values.imageSequence, currentYOffset)); objs.context.drawImage(objs.videoImages[sequence], 0, 0); objs.canvas.style.opacity = calcValues(values.canvas_opacity, currentYOffset); // scrolling and interaction with texts if (scrollRatio prevScrollHeight + sceneInfo[currentScene].scrollHeight && currentScene { // call necessary function in here yOffset = window.pageYOffset; scrollLoop(); }) // window.addEventListener('DOMContentLoaded', setLayout); window.addEventListener('load',() => { setLayout(); sceneInfo[0].objs.context.drawImage(sceneInfo[0].objs.videoImages[0],0,0); }) window.addEventListener('resize', setLayout); })();
- 0
- 5
- 269
질문&답변
2020.12.03
백엔드 address in use
업데이트: 우선 앱은 동작을 합니다만, pm2 monit에서 제대로된 로깅이 되고있는거 같지는 않습니다. 고로, 로그인을 함에도 불구하고 로그인되었다고 인식을 하지 못하네요...
- 0
- 2
- 175
질문&답변
2019.06.14
enzyme?
동호님!괜찮습니다. 현제 다시 진행중인데, setup.js에서 이번에는 에러가 뜨네요. 정말 토시하나 안틀리고 하신대로 다 따라서했는데 나오는 에러는 이렇습니다. your test suite must contain at least one test. 제 생각인데, tests폴더 안에있으면 test가 무조건 하나정도 있어야 되는거같네요. 그렇지만 setup.js는 테스트가 하나도 없어서 에러가 뜨네요. 하지만, 동호님 강의에서는 테스트가없어서....저도 참 의문이네요. 혹시 추천해주실 방법이있나요?
- 1
- 13
- 471
질문&답변
2019.06.13
enzyme?
버전이 틀리기는 합니다만, 제가 갖고있는것들이 다 업그레이드 버전이네요.react : 16.8.6 react-native: 0.59.9 enzyme: 3.10.0 enzyme-adapter-react-16: 1.14.0 혹시 이것들을 다운그레이드 시켜야될까요?
- 1
- 13
- 471
질문&답변
2019.06.12
enzyme?
아 네. 그 부분은 저도 인지하고 있었습니다. 제가 여쭤봤던 original 질문으로 돌아가자면, 동호님의 코드는 태스트를 돌렸을때, Received: text 가 나오고, 저같은경우는 Received: 가 나옵니다. 이 틀린 부분이 결국 에러를 일으키고있으니, app.js를 봐달라고 한고였습니다. 혹시 어떤 부분이 잘못 되었을까요?
- 1
- 13
- 471