IntersectionObserver는 간단히 말해 관찰 대상이 viewport영역에 들어오고 나가는 것 (즉, 가시성)을 감시하는 역할을 한다. 사용법) ① new IntersectionObserver(callback[, options]); 생성자로 인스턴스를 생성한다. ② 관찰 대상을 등록해 준다. const observer = new IntersectionObserver((entries, observer) => { console.log(entries); }); observer.observe(targetElem); 첫번째 매개변수인 callback 함수는 entries, observer라는 두가지 매개변수를 받는다. entries -더 보이거나 덜 보이게 되면서 통과한 최소한의 자극을 나타내는 Int..

window.addEventListener('mousemove', function(e){ mousePos.x = -1 + (e.clientX / window.innerWidth)*2; mousePos.y = 1 - (e.clientY / window.innerHeight)*2; spaceElem.style.transform = `rotateX(${mousePos.y*8}deg) rotateY(${mousePos.x*8}deg) `; });

https://developer.mozilla.org/en-US/docs/Web/API/Window/scroll Window.scroll() The Window.scroll() method scrolls the window to a particular place in the document. developer.mozilla.org ※MDN에 기본적인 설명 참조 window.scroll(x좌표 ,y좌표) //이렇게 사용하거나 window.scroll({ //이렇게 세세한 옵션을 줄 수 있다. top: 100, //y축(상,하)방향으로 left: 100, //x축(좌,우)방향으로 behavior: 'smooth' 또는 'auto' //스크롤 이동 시 스크롤의 움직임을 설정 }); See the Pen XWd..

2015년 책이라 좀 오래되긴 했지만, 내용도 짧고 ES6 기반 설명이라 읽어보면 좋을 것 같다. https://www.hanbit.co.kr/realtime/books/book_view.html?p_code=E5027975256 JavaScript Promise 최근 몇 년, 웹에서는 다양한 변화가 일어나고 있다. HTML5나 ECMAScript6 등 새로운 표준 기술이 잇달아 고안되는 등 웹의 세계는 빠르게 변화하고 있다. 브라우저는 그 변화에 대응하기 위해 릴리즈 www.hanbit.co.kr

window.pageYOffset (혹은 X도 있음) 스크롤을 얼마나 움직였는가. (스크롤 이동 거리) 타겟.offsetTop (스크롤 움직여도 값 변하지 않음) 타겟이 document 상단에서 얼마나 떨어졌는가 스크롤에 영향받지 않음. 타겟.getBoundingClientRect() 타겟의 크기와 위치 값을 가지고 있어서 타겟이 브라우저 창의 top,left,right,bottom에서 얼마나 떨어졌는 지의 값을 알 수 있다. 스크롤 변화할 때마다 값이 바뀌고, 스크롤의 속도에 영향 받는다. window.innerHeight 브라우저 내부 높이 (가로 스크롤바 포함) window.outerHeight 브라우저 창 자체의 전체 높이 window.innerWidth 브라우저 내부 너비(세로 스크롤바 포함) ..

1. Map객체는 키:값 쌍을 저장하며 각 쌍의 삽입 순서도 기억하는 콜렉션이다. 아무 값이라도 키와 값으로 사용할 수 있다. - MDN 설명 2. Map 객체는 요소의 삽입 순서대로 원소를 순회한다. 3. 각각의 요소를 순회할 때마다 let m = new Map(); //자료 추가하기 m.set(1,'하나') m.set(true,'OK') m.set(false,'NO') //데이터 가져오기 m.get(1) //'하나' m.get(true) //'OK' //데이터 가지고 있는지 여부 확인 m.has(false) // true //데이터 삭제하기 m.delete(1); //Map객체 데이터 갯수 확인 m.size //키 만 뽑아 객체로 반환 m.keys(); //데이터만 뽑아 객체로 반환 m.values(..