기능 목록

• · 글씨 효과
  • · 0부터 올라가는 숫자 - 릴레이 미션 이벤트 (2024-12-17)
    • - 해당 영역 감지되면 숫자가 0부터 목표 숫자까지 올라가는 효과
• · 3D 효과
  • · 입체적인 책 효과 - 적용 페이지 없음
    • - 호버 시 입체적인 책 효과
    • - e북 페이지에서 YES24, 교보문고 레퍼런스 활용 시 효과 도입 고려
• · 비쥬얼 효과
  • · 반딧불이 - 법원직 메가패스 (2024-07-09)
    • - canvas 요소에 2d 컨텍스트를 사용하여 반딧불이 효과 구현
    • - for문으로 모바일에선 별 50개, PC에선 별 150개 생성
    • - 각각의 별들을 랜덤으로 배치 후에 부드럽게 움직이고 깜빡이는 효과
  • · 타이핑 - 9급 공무원 합격전략 설명회, 신명·전한길 프로모션 (2023~2024)
    • - setInterval 및 charAt + innerHTML를 조합하여 타이핑 효과
    • - 타이핑 효과 심플 버전부터 심화 버전까지
• · 탭
  • · 탭 랜덤 이동 (2024-09-13)
    • - 초기 로드 시 랜덤 탭으로 구동
    • - 탭 클릭 시 자동 이동 멈춤
    • - 함수명: initRandomTab()
  • · 탭 이동효과 - 10일 무료체험 (2024-10-10)
    • - 초기 로드 시 랜덤 탭으로 구동
    • - 탭 클릭 시, 선택한 탭의 위치로 뒤의 강조 효과가 슬라이딩 되어 따라옴
    • - 함수명: initRandomTabEffect()
• · Youtube API
  • · Youtube + Swiper - 전한길 프로모션 (2024-06-27)
    • - 유튜브 영상마다 썸네일 있음
    • - 슬라이드가 넘어가면 영상이 멈춤
    • - 보던 위치에서 다시 재생
    • - Swiper fraction 페이징 + 좌우 버튼
• · 스크롤 반응
  • · 릴레이 미션 이벤트 (2024-12-17)
    • - 문법: new IntersectionObserver(콜백함수, { treshold: 0 });
    • - 특정 요소가 뷰포트에 얼마나 보이는지를 감지
    • - treshold가 0.5일 경우 요소의 50%가 화면에 보일 때 콜백함수 실행
    • - PC에서는 가로로 위치하여 한번에 실행, 반응형에서는 세로로 위치하여 각각 실행