그냥, 일단 써내려가자

  • 홈
  • 태그
  • 방명록

스크롤 진행바 구현 1

[jQuery]페이지의 스크롤에 따라 진행바 만들기

안녕하세요 무택입니다 :) 오늘은 스크롤에 따라 진행상태를 알려주는 바 만드는 코드에 대해 남겨보려고 합니다. 요즘 아티클 형식의 페이지는 거의 다 사용하고 있는 것 같은데 그만큼 웹사이트 사용성에 도움을 주는 기능이라고 생각합니다. 사람들이 페이지에 들어와서 글을 읽다가 어느 정도 남았는지 직관적으로 알 수 있기 때문에 적절한 페이지에 적용하면 좋은 기능이 될 것 같아요. 동작원리 저는 기능을 브런치 사이트의 아티클 페이지를 참조해서 만들었습니다. 그래서 기본적으로 동작 원리는 스크롤할 때마다 스크립트를 실행시켜서 현재 스크롤 위치를 파악 후 수치로 변환(0 ~ 100%), 그 수치를 진행바의 넓이로 넣는 원리입니다. codepen 예시 See the Pen 스크롤 위치 by TytanLee (@Tyt..

🧑‍💻개발/jQuery 2023.05.29
이전
1
다음
더보기
프로필사진

일상생활의 생각들, 공부하는 것들, 취미생활. 평범한 일상을 기록해 갑니다.

공지사항

  • 20만 조회수 기념 이벤트
  • 분류 전체보기 (264)
    • 📕스토리 (4)
    • 🍖냠 (6)
      • 제품 리뷰 (2)
      • 식당 리뷰 (4)
    • 🔎제품 (2)
    • 🧑‍💻개발 (95)
      • HTML·CSS (23)
      • JS (15)
      • jQuery (7)
      • 라이브러리 (12)
      • 개발자도구 (5)
      • 아카이브 (27)
      • 코딩애플 (4)
    • 🎨디자인 (76)
      • 포토샵 (43)
      • 포토샵 SOS (12)
      • 일러스트 (3)
      • 디자인 (15)
    • 💙취미 (13)
      • 블렌더 (2)
      • ISTJ의 감상평 (2)
    • 🏷️생활 팁 (31)
    • ✏️티스토리 (12)
    • ✈️여행 (5)
    • 💡생성 AI (8)
    • 🪄심리테스트 (2)
    • 오류 해결노트 (9)

최근글과 인기글

  • 최근글
  • 인기글
맨 위로
300x250

Copyright © Kakao Corp. All rights reserved.

0

티스토리툴바