jQuery

웹 페이지에서 사용자가 스크롤을 내릴 때 상단 내비게이션(Navigation, 메뉴 영역)을 화면 상단에 고정하고, 현재 뷰포트(Viewport, 화면 표시 영역)에 노출된 본문 구역(Section)에 맞춰 해당 메뉴 항목을 활성화하는 기능을 다룬다. 사용자의 스크롤 위치를 감지하여 상단 메뉴와 사이드 내비게이션에 활성 클래스를 부여하는 방식을 제이쿼리(jQuery)와 순수 자바스크립트(Vanilla JavaScript) 두 가지 코드로 각각 구현한다. 1. 메뉴활성화 1.1. 단계1-상단메뉴 1.1.1. 스티키 … 더 읽기

스킬바 UI 스킬바는 포트폴리오 사이트에서 기술 숙련도를 시각적으로 보여주는 UI 요소이다. 스크롤 위치에 따라 막대나 원이 채워지는 애니메이션을 구현한다. 1. 막대형 스킬바 스크롤이 특정 위치에 도달하면 막대가 늘어나면서 퍼센트 숫자가 올라가는 애니메이션이다. jQuery 3 기반의 막대형 스킬바를 만들어줘. 조건은 다음과 같아. 1) 프로그레스 바 3개를 세로로 배치하고, 각각 목표 퍼센트를 data-rate 속성으로 지정한다(30%, 90%, 60%). … 더 읽기

이 글은 여러 이미지를 한 자리에서 차례로 보여 주는 슬라이드 인터페이스를 만든다. jQuery(제이쿼리)의 페이드 메서드와 위치 애니메이션, CSS 클래스 전환, 순수 JavaScript(자바스크립트) 구현을 코드별로 비교한다. 각 예제에서는 현재 슬라이드의 상태를 어떻게 저장하고 마지막 이미지 다음에 첫 이미지로 돌아가는지 확인한다. 1. 기본 슬라이드 1.1. fadeInOut 1.1.1. 메서드 활용 1.1.2. 클래스 활용 1.2. 이동 2. 인디케이터가 있는 … 더 읽기

탭(Tab: 서류철의 색인 표처럼 여러 내용을 한 화면에 겹쳐 두고 선택한 항목만 보여주는 사용자 인터페이스) 컴포넌트(Component)는 한정된 화면 공간에 다수의 콘텐츠를 배치하고 사용자가 선택한 항목만 전환하여 표시하는 웹 UI(사용자 인터페이스, User Interface) 요소다. 버튼을 클릭하면 해당하는 영역의 화면 노출 상태가 변경되며, 이는 여러 페이지를 책갈피로 넘겨보는 동작과 유사하다. HTML로 메뉴와 본문 영역 간의 연결 구조를 … 더 읽기

1. gsap gsap공식사이트 gsap코드펜 gsap치트시트 gsap의 모든 기능이 있는 cdn 링크 웹 브라우저에서 애니메이션을 구현하기 위한 자바스크립트 라이브러리 기존 CSS나 순수 자바스크립트보다 탁월한 퍼포먼스를 발휘할 수 있도록 최적화 된 애니메이션 전용 라이브러리이며, HTML5와 Flash 두 개의 플랫폼에서 사용할 수 있다. GreenSock Engaging the Internet GASP은 애니메이션을 쉽게 적용할 수 있는 라이브러리로 탁월한 퍼포먼스로 알려져 있다. … 더 읽기