위의 영상과 같이 스크롤 값을 통해서 뒷 배경의 변화를 주는 페이지를 만들어보겠습니다. 이 부분의 핵심은 위의 배경들을 fixed로 고정 한 다음 스크롤 값에 따라서 opacity를 변화를 주어 어둡게 만들어 주는 것입니다. 우선 html코드와 css코드를 확인해봅시당. body{ margin: 0; padding: 0; overflow-x: hidden; } section.titleWrap{ position: fixed; height: 800px; width: 100%; top: 0; left: 0; } h1{ position: absolute; color: #eee; text-align: center; width: 100%; font-size: 50px; margin-top: 320px; z-inde..

이번에는 뉴스나 특정 페이지를 보면 스크롤을 내릴 수록 얼마나 글을 읽었는지 등의 정보를 확인할 수 있는 프로그레시브 바를 만들겠습니다. 우선 글을 만들기 위해 더미 한글을 만들겠습니다. hangul.thefron.me/ 한글입숨 - 무의미한 한글 텍스트 생성기 한글판 로렘입숨. 무의미한 한글 텍스트를 생성해 줍니다. hangul.thefron.me body{ margin: 0; display: flex; justify-content: center; } .textSection{ display: flex; flex-direction: column; align-items: center; width: 30%; background-color: brown; padding: 0 10%; color: antiquew..

오늘 해볼 것들 마우스를 움직이는 대로 자동차나 배경이 다르게 변하는 화면을 만들어봅시다. 이번에도 html, css, js만을 사용해서 구현할 수 있습니다. 기본적인 html 파일을 만들어 줍니다. 그런 다음 img를 사용해서 src로 이미지를 등록해서 화면을 볼 수 있습니다. 이미지만 설정해주면 차례대로 나오기 때문에 겹치게 만들기 위해서 car의 position을 absolute로 만들어줍니다. 그리고 z-index를 숫자를 지정해서 앞으로 보이게 만들어줍니다. body{ background-color: black; overflow: hidden; } #background{ width: 450px; margin-left: 40%; } #car{ position: absolute; width: 300..

이번에는 마우스 커서를 대신 따라 다니면서 볼 수 있는 커스텀 커서를 만들어보겠습니당. html,css,js만 할 수 있으면 되서 쉽습니다. ㅎㅎ 우선 html 파일을 만들어보져 test script에 window.onload가 있는데 이는 html이 완벽하게 로드 된 후에 각종 요소들을 가져오기 위해서 입니다. 그럼 cursor_item이라는 html이라는 html을 가져와서 마우스 커서를 만들어 보겠습니다. js부분 변경을 통해서 마우스의 위치를 html 코드로 볼 수 있게 변경했습니다. 마우스 위치 값 확인하기 그럼 이 위치 값을 저 커서의 위치에 넣어주면 마우스 커서를 따라서 이동하게 될 것입니다. 그럼 위치의 값을 변경하는 js 코드를 넣은 다음 css를 조금 수정해보겠습니다. test curs..