728x90 300x250 SMALL Front-end392 스크롤 특정 위치에 도달 하면 JS 함수 실행하기 [GSAP] 이번에는 스크롤로 특정 영역 도달 시 단순히 애니메이션 효과를주는게 아님 함수를 실행하는 방법을 알아보겠습니다. 스크롤 내려주세요 ↓ 트리거 영역 gsap.registerPlugin(ScrollTrigger) : GSAP은 기본적으로 core 기능만 포함되어 있고 ScrollTrigger 같은 확장 플러그인은 별도로 등록해야 사용 가능하다, 이 명령으논 ScrollTrigger를 GSAP 안에서 사용할 수 있게 등록해주는 명령어이다.trigger : 이 트리거 요소가 기준이 된다. 즉 여기서는 .trigger-zone 요소가 스크롤 지점 감지의 기준점이 된다,start : top 80%는 트리거 요소의 top이 브라우저 화면의 80%지점에 닿을 때 실행하라는 뜻이다.onEnter.. 2025. 6. 15. tabindex와 웹접근성 tabindex란?html 요소에 탭 키로 초점을 이동할 수 있도록 설정하는 속성버튼 tabindex는 크게 세 가지 값으로 나뉜다.0문서의 자연스러운 순서(문서 흐름)에 따라 탭으로 초점 이동가능-1초점은 줄 수 있지만 탭 키로 이동 불가, 자바스크립트로만 초점 이동 가능1이상사용자 정의 순서로 초점 이동. 일반적으로 사용 자제(접근성 권고 위반 가능성 높음) 각 값의 의미와 사용 예시1.tabindex="0" (가장 일반적)의미 : 요소를 키보드 초점 대상에 포함, 문서 흐름 순서에 맞게 촟점이 이동함언제 사용? : , 등 기본적으로 포커스 불가능한 요소에 초점 필요할 때이건 키보드로 접근 가능해요 2. tabindex="-1" (제어 목적)의미 : 초점은 줄 수 있지만 탭 키로는 접근 안 됨,.. 2025. 6. 8. 웹접근성 진단문서 1. 웹접근성 진단 문서란?웹 사이트가 장애인이나 고령자도 사용할 수 있는 구조로 되어 있는지 점검하고, 웹접근성 지침(KWCAG 2.1 기준)에 부함하지 않는 부분을 찾아내고 기록하는 문서 2. 진단 문서의 목적웹 사이트가 웹접근성 기준을 얼마나 잘 준수하고 있는지 평가하기 위해이후 개선 방향을 세우기 위해나중에 실제 인증 심사나 외부 감사에 앞서 사전 점검하는 역할도 있음프로젝트 진행 중 근거 자료 및 커뮤니케이션 문서로도활용 3. 진단 문서에 들어가는 주요 내용 (보통 엑셀이나 문서 양식으로 작성)No페이지/기능지침 항목진단 결과문제 설명1메인 페이지1.1 대체 텍스트 제공미준수로고 이미지에 alt값 없음2게시판 목록2.1 키보드 사용 가능준수tab 이동 순서 적절3팝업창3.2 명확한 지시 제공미.. 2025. 6. 7. [GSAP + ScrollTrigger] 스크롤 하면 애니메이션 실행 스크롤 다운 ↓ GSAP 애니메이션 실행! .box요소는 초기 상태에서 opacity:0, translateY(50px)로 설정되어 있음스크롤로 .box가 화면 아래 80% 지점에 도달하면 opacity:1, y:0으로 자연스럽게 애니메이션 한 번만 실행 (toggleActions: "play none none none") GSAP을 사용하면 좋은점다양한 이징 효과(ease: "power3.out", "bounce", "elastic" 등)직관적이고 확장성 높은 애니메이션 구성ScrollTrigger와 결합하면 스크롤 트리거 + 애니메이션을 손쉽게 제어 가능 스크롤 다운 ↓ GSAP 애니메이션 실행! ">스크롤 다운 ↓GSAP 애니메이션 실행! 2025. 5. 29. 이전 1 2 3 4 ··· 98 다음 728x90 반응형 LIST