질문&답변
오류
저도 안되는 부분이 있어 댓글남깁니다. 제 코드는 이렇습니다. (() => { 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
- 조회수
- 411