업무 진행 하면서 자주 사용되는 소스를 모아두는 개인
"워크라이브러리"입니다.
업무 사용하면서 틈틈히 정리중이며 카테고리는 필요에 따라
추가됩니다.
작업을 위한 페이지 이므로 pc전용 페이지입니다.
엣지, 크롬에서 사이트가 정상적으로 작동합니다.
기타 업무관련, 문의사항은 메일로 보내주세요.
mail: hi_hee8@naver.com
last update
- + 24.04.12 무한 슬라이드
- + 24.04.12 클릭이벤트(스파크 애니메이션)
- + 24.04.12 마우스오버 (방향인식 효과)
- + 24.04.12 리스트 마우스오버 효과
components
탭메뉴 02 (세로형)
기본적으로 많이 사용도는 탭메뉴
완쪽에 메뉴가 있는
세로형으로 왼쪽메뉴 갯수에 따라 기본 높이값 지정
탭메뉴 01 (가로형)
기본적으로 많이 사용도는 탭메뉴
가로탭 메뉴로 컨텐츠 내용에 따라 높이값이 자동으로 변경
슬라이더 03 (버티컬)
페이지가 위, 아래로 넘어가는 슬라이더
기본적인 슬라이더에
페이지 표시방법만 변경
오포틀레이, 페이지네이션등 추가
옵션 가능
슬라이더 02 (스테더스바)
기본 이미지 슬라이더에 텍스트 추가
하단에 스테더스바로
페이지 진행 표시
텍스트는 자연스럽게 시간차를 두고
표시됩니다
슬라이더 01 (기본)
기본적으로 많이 사용되는 이미지 슬라이더
마우스 오버시
양쪽으로 페이지 컨트롤러 표시
하다네 페이지 표시,
오토플레이, 루프 옵션
알림팝업
화면 구석에 조그만하게 뜨는 토스트팝업
시간이 지나면
없어지거나, x버튼 클릭시 사라집니다.
form
script
무한 슬라이드
컨텐츠가 무한으로 슬라이드 되는 애니메이션 스크립트
왼쪽과 오른쪽으로 컨텐츠가 끊임없이 움직이며 마지막 컨텐츠가
끝날때 첫번째 컨텐츠가 자동으로 보여집니다.
클릭이벤트 (스파크 애니메이션)
버튼 클릭시 스파클링 효과
랜덤사이즈, 랜덤색상, 랜덤애니메이션 옵션
마우스오버 (방향인식 효과)
마우스 오버시 그림자효과
마우스가 시작된 부분부터 방향인식하여 전체적으로 부드럽게
텍스트 색상변화 및 그림자효과를 줍니다.
카운트업 02 (스크롤다운)
카운트가 0부터 설정된 숫자까지 빠르게 올라감
카운터가
설정된 섹션까지 도달한 시점부터 카운팅됩니다.
카운트업 01 (기본)
카운터가 0부터 설정된 숫자까지 빠르게 올라감
페이지가
오픈되는 즉시 바로 숫자가 카운팅됩니다.
클릭 팝업창
가장 기본적으로 사용되는 팝업창
버튼 클릭 시, 자연스럽게
페이드인 되면서 오픈됩니다.
