안중근의사를 기리는 사이트인 안중근의사기념관 사이트를 보니 이목을 집중시키기에는 비주얼적인 요소가 다소 부족하다고 느껴 역사에 관심이 많은 분들과 안중근 의사에 관련한 정보를 필요로 하는 학생들을 타겟으로 잡고 리뉴얼 사이트를 제작하였습니다.
- scroll 이벤트를 사용하여 svg 이미지가 스크롤 될 때마다 그려지도록 구현
- 스크롤시에 text가 계속해서 바뀌도록 구현
- 안중근의사에 대한 교육자료들을 파일로 다운로드
- 이름, 내용을 적고 전송하기 버튼을 클릭하면 편지함 Swiper 안에 출력되고 출력 된 내용은 삭제 가능
issue1: 메인 페이지(자동 스크롤)
페이지 실행 시 자동으로 스크롤되게하려고 setinterval 함수를 사용했었지만 해결되지않아 setinterval안에서 if문추가로 해결
issue2: 배포후 링크연결
깃허브로 배포 했더니 iframe속의 url이 연결되지않아 외부도메인을 이용해 배포
issue3: 반응형 스크립
반응형에 맞춰 스크립트를 수정하는 과정에서 새로고침 없이 마우스휠 이벤트가 제거되지 않는 이슈가 발생 -> resize() 메서드를 사용하다가 matchMedia 메소드를 사용하여 불린값으로 조건을 주어 pc와 스크린 사이즈 820 이하의 화면에서 이벤트를 다르게 줌
issue4: class 적용
swiper 슬라이더 안에 편지 내용을 추가하는 과정에서 class mySwiper가 적용되지 않는 이슈가 발생하여 swiper를 함수로 묶 어 편지를 추가시킬때마다 실행되도록 하여 문제 해결.