seop's study seop's study

설명 현재 스크롤값과 이전 스크롤값에 따라서 스크롤을 내릴땐 메뉴바가 숨어있지만 스크롤을 올리면 메뉴바가 나타납니다. 현재 스크롤값과 이전 스크롤값을 setInterval()메서드를 이용해 실시간으로 값을 구해준 뒤 현재스크롤 값이 이전 스크롤값 보다 높으면 스크롤이 내려가고 있는 것 입니다. 이때는 메뉴바를 숨겨놓습니다. 그리고 현재 스크롤 값이 이전 스크롤값 보다 작을경우 스크롤이 올라가고 있는 것 입니다. 이때는 메뉴바가 나타납니다. window.addEventListener("scroll", () => { let scrollTop = window.pageYOffset || document.documentElement.scrollTop || window.scrollY; document.querySe..

설명 현재 스크롤값에 따라서 섹션을 이동할때 사이드 메뉴에 섹션에 맞는 메뉴에 표시가 됩니다. 먼저 각 섹션별 offsetTop값을 구하고 현재 스크롤값이 각 섹션별 offsetTop값보다 같거나 커질 경우 사이드 메뉴에 표시가 됩니다. document.querySelectorAll("#parallax__dot a").forEach(el => { el.addEventListener("click", e => { e.preventDefault(); document.querySelector(el.getAttribute("href")).scrollIntoView({behavior: "smooth"}); }) }) window.addEventListener("scroll", () => { let scrollTop..

설명 현재 스크롤값에 따라서 섹션을 이동할때 섹션에 맞는 메뉴에 표시가 됩니다. 먼저 각 섹션별 offsetTop값을 구하고 현재 스크롤값이 각 섹션별 offsetTop값보다 같거나 커질 경우 메뉴에 표시가 됩니다. document.querySelectorAll("#parallax__nav li a").forEach(li => { li.addEventListener("click", (e) => { e.preventDefault(); document.querySelector(li.getAttribute("href")).scrollIntoView({ behavior:"smooth" }) }) }) window.addEventListener("scroll", () => { let scrollTop = wind..

설명 마치 이미지의 시선이 마우스 포인터를 향하게 3D효과를 내는 것 입니다. transform-style: preserve-3d를 이용해 효과를 만들어 보았습니다. transform-style: preserve-3d란? transform-style: preserve-3d속성 은 요소의 자식이 3D 공간에 배치되는지 또는 요소 평면에서 병합되는지 여부를 설정합니다. 평면화하면 요소의 자식은 3D 공간에서 자체적으로 존재하지 않습니다. 이 속성은 상속되지 않으므로 요소의 모든 비-리프 하위 항목에 대해 설정해야 합니다. const circle = document.querySelector(".cursor").getBoundingClientRect(); function mouseMove(e) { //마우스 좌..

설명 마우스 이펙트 이미지 효과는 마우스를 따라서 이미지가 움직이는 효과 입니다. 이 효과를 내기 위해서는 먼저 마우스의 좌표값을 중앙으로 초기화 시킨 후(x축:0, y축:0) 중앙을 기준으로 이미지가 움직이게 됩니다. 마우스 좌표값 초기화 방법 마우스 좌표값을 중앙으로 초기화 방법은 화면 전체 가로값 - (화면 전체 가로값/2) 를 하시면 됩니다. //실제 마우스 좌표 값 let mousePageX = e.pageX; let mousePageY = e.pageY; //마우스 좌표 값을 가운데로 초기화 후 좌표값 //전체 길이/2 - 마우스 x좌표값 == 0 let centerPageX = window.innerWidth/2 - mousePageX; let centerPageY = window.inner..

설명 조명 효과의 원리는 쉽게 말해서 사실 CSS로 착시효과를 통해 눈속임을 하는 것 입니다. 배경에 그림을 넣고 그 위에 어두운 계열의 불투명한 판을 올려놓고 마우스 커서에게 배경 그림과 같은 그림을 넣어주면 마치 마우스를 조명이 비추는 듯한 느낌을 표현할 수 있습니다.

설명 마우스 좌표값에 따라 동그라미원의 좌표값이 변경되면서 마우스를 따라다니게 됩니다. 추가적으로 특정한 언어(span태그로 감싼 단어)에 마우스가 오버 됐을 경우에는 마우스를 따라다니는 원이 변하도록 효과를 넣었습니다.

설명 마우스 좌표값에 따라 동그라미원의 좌표값이 변경되면서 마우스를 따라다니게 됩니다. //출력용 => 마우스좌표 window.addEventListener("mousemove", (event) => { document.querySelector(".clientX").innerText = event.clientX; document.querySelector(".clientY").innerText = event.clientY; document.querySelector(".offsetX").innerText = event.offsetX; document.querySelector(".offsetY").innerText = event.offsetY; document.querySelector(".pageX").inn..

설명 여러 문제를 각각 사용자가 입력한 값과 정답의 값을 비교해서 정답과 오답을 출력합니다. 이번에는 모든 문제를 javascript로 출력 하였습니다.

설명 사용자가 보기를 선택한 값과 정답의 값을 비교해서 정답과 오답을 출력합니다. const quizType = document.querySelector(".quiz__Type"); //문제 유형 const quizNumber = document.querySelector(".quiz__number"); //문제 번호 const quizAsk = document.querySelector(".quiz__ask"); //문제 질문 const quizConfirm = document.querySelector(".quiz__confirm"); //문제 정답 버튼 const quizResult = document.querySelector(".quiz__result"); //문제 설명 const quizView = ..