• 카테고리

    질문 & 답변

  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

수업 자료 관련 질문이 있습니다.

21.04.05 10:23 작성 조회수 125

0

안녕하세요, 수업 자료를 다운 받았는데

videotest 폴더에 02-image.html 파일이 한 개 있는데

해당 파일 코드가 선생님이 강의중에서 설명하신 파일과 다릅니다.

강의에서 설명하신 02-image-2.html 파이링 02-image.html 로 덮어쓰기 된 것 같습니다..

강의에서 설명해주신 코드는

강의를 보면서 코드를 따라 쓰는 방법외엔 없을까요?

course-thumbnail

애플 웹사이트 인터랙션 클론!

고화질 비디오 부드럽게 처리하기 1

강의실 바로가기

답변 1

답변을 작성해보세요.

0

1분코딩님의 프로필

1분코딩

지식공유자

2021.04.11

앗, 제가 파일을 빠뜨렸나봅니다^^;
일단 여기에 올려드릴게요.
다운로드 파일도 업데이트 하도록 하겠습니다.

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		body {
			height: 500vh;
		}
		body.before-load {
			overflow-y: hidden;
		}
		.sample-img {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
		}
	</style>
</head>
<body class="before-load">
	<img class="sample-img" src="../video/002/IMG_7027.JPG">

	<script>
		const imgElem = document.querySelector('.sample-img');
		
		let loadedImagesCount = 0;
		let totalImagesCount = 960;
		const videoImages = [];

		let progress;
		let currentFrame;

		function loadImages() {
			for (let i = 0; i < totalImagesCount; i++) {
				let imgElem = new Image();
				imgElem.src = `../video/002/IMG_${7027 + i}.JPG`;
				videoImages.push(imgElem);

				imgElem.addEventListener('load', function () {
					loadedImagesCount++;
					if (loadedImagesCount === totalImagesCount) {
						console.log('이미지 로드 완료');
						init();
					}
				});
			}
		}

		loadImages();

		function init() {
			document.body.classList.remove('before-load');

			window.addEventListener('scroll', function () {
				progress = pageYOffset / (document.body.offsetHeight - window.innerHeight);
				if (progress < 0) progress = 0;
				if (progress > 1) progress = 1;

				requestAnimationFrame(function () {
					currentFrame = Math.round((totalImagesCount - 1) * progress);
					imgElem.src = videoImages[currentFrame].src;
				});
			});
		}
	</script>
</body>
</html>

이 글과 비슷한 Q&A