둥지

이번 파트는 많이 쓰이는 스크롤을 내리면 이미지가 날아오는 것을 구현하는 파트입니다. 1. slide-in 클래스를 가진 element들을 변수로 저장. const sliderImages = document.querySelectorAll('.slide-in'); 2. 이미지 슬라이드 체크 함수 구현. function checkSlide() { sliderImages.forEach(sliderImage => { // 이미지의 절반 계산 const slideIntAt = (window.scrollY + window.innerHeight) - sliderImage.height / 2; // 이미지의 하단 계산 const imageBottom = sliderImage.offsetTop + sliderImage...

이번에는 비밀키를 설정해두고 비밀키를 입력할경우 유니콘이 뜨게하는 파트입니다. 그럼 시작해보겠습니다. 1. 먼저 비밀키를 설정합니다. const secretCode = 'wow'; 2. 키업 함수를 만듭니다. function handleKeyup(e) { pressed.push(e.key); pressed.splice(0, pressed.length - secretCode.length); // splice는 slice와 다르게 if (pressed.join('').includes(secretCode)) { cornify_add(); } } 3. 만든 함수를 이벤트로 등록합니다. window.addEventListener('keyup', handleKeyup); cornify_add 함수는 cornify...

이번에는 커스텀 비디오 플레이어 만들기입니다. 이번 파트 부분을 열었을때 javascript 파일이 별도로 분리가 되어있어서 당황했네요. 자 그럼 간단히 기본코드에 대해서 설명하겠습니다. ► « 10s 25s » 위의 html 코드를 보면 간단하게 비디오 플레이어의 모습을 html 태그와 css 코드로 작성이 되어있는것을 볼 수 있습니다. 하지만 실제로 동작하는 비디오 플레이어는 아닙니다. 이제부터는 각각의 기능을 구현을 하겠습니다. 그럼 scripts.js 파일을 열어 코드를 작성해보겠습니다. 1. 모든 element를 변수로 저장 const player = document.querySelector('.player'); const video = player.querySelector('.viewer');..