https://github.com/theo-interactive/ui-development
(Completed version) UI development examples (Learn web UI development)
https://github.com/theo-interactive/ui-development
adobe-fonts ajax canvas css3 font-awesome google-fonts gsap3 html5 javascript pixijs-v5 typescript
Last synced: 5 months ago
JSON representation
(Completed version) UI development examples (Learn web UI development)
- Host: GitHub
- URL: https://github.com/theo-interactive/ui-development
- Owner: theo-interactive
- License: mit
- Created: 2023-01-16T13:41:52.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-03-22T02:56:06.000Z (about 3 years ago)
- Last Synced: 2024-12-27T14:09:20.231Z (over 1 year ago)
- Topics: adobe-fonts, ajax, canvas, css3, font-awesome, google-fonts, gsap3, html5, javascript, pixijs-v5, typescript
- Language: CSS
- Homepage:
- Size: 1.29 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# UI Development
📌 VanillaJS, Typescript를 이용한 UI 개발 스터디 예제 코드입니다.
***
## User Interface List
### 1. Layout
> CSS, Media Query를 이용한 반응형 기본 레이아웃 구성
Google Fonts, Adobe Font 임포트
>
- [01. Layout](https://github.com/theo-interactive/ui-development/tree/main/01_layout)
### 2. Tab Menu
> Tab 메뉴, 콘텐츠 구성 방법과 Click 이벤트 핸들링
>
- [02. Tab Menu](https://github.com/theo-interactive/ui-development/tree/main/02_tab-menu)
- [02. Tab Menu (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/02_tab-menu-ts)
### 3. Global Navigation Menu
> GN(Global Navigation) 메뉴 구성과 이벤트 핸들링
Desktop, Tablet, Mobile 별 스타일 구성
>
- [03. Global Navigation Menu](https://github.com/theo-interactive/ui-development/tree/main/03_global-navigation-menu)
- [03. Global Navigation Menu (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/03_global-navigation-menu-ts)
### 4. Appearance
> Color Scheme를 이용한 스타일 분리
토글 버튼을 이용한 컬러 모드 변경 방법
테마별 버튼을 이용한 컬러 모드 변경 방법과 이벤트 핸들링
>
- [04.01. Appearance :: Color Scheme Style](https://github.com/theo-interactive/ui-development/tree/main/04-01_appearance--color-scheme)
- [04.02. Appearance :: Color Mode](https://github.com/theo-interactive/ui-development/tree/main/04-02_appearance--color-mode)
- [04.03. Appearance :: Color Theme](https://github.com/theo-interactive/ui-development/tree/main/04-03_appearance--color-theme)
- [04.03. Appearance :: Color Theme (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/04-03_appearance--color-theme-ts)
### 5. Mouse Event
> 마우스 커서 효과 구성 방법과 이벤트 핸들링
마우스 이동에 따른 이미지 3D 회전 구성 방법과 이벤트 핸들링
>
- [05.01. Mouse Move Event :: Cursor Effect](https://github.com/theo-interactive/ui-development/tree/main/05-01_mouse-move--cursor-effect)
- [05.01. Mouse Move Event :: Cursor Effect (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/05-01_mouse-move--cursor-effect-ts)
- [05.02. Mouse Move Event :: Image 3D Rotate](https://github.com/theo-interactive/ui-development/tree/main/05-02_mouse-move--image-3d-rotate)
- [05.02. Mouse Move Event :: Image 3D Rotate (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/05-02_mouse-move--image-3d-rotate-ts)
### 6. Image Slide Gallery & Full Page Hero Banner
> 기본 이미지 슬라이드 갤러리 구성 방법과 이벤트 핸들링
풀 페이지 히어로 배너 구성 방법과 이벤트 핸들링
Font Awesome 아이콘 적용 방법
GSAP를 이용한 요소 애니메이션 구성 방법
GSAP를 이용한 타입라인 애니메이션 구성 방법
>
- [06.01. Image Slide Gallery](https://github.com/theo-interactive/ui-development/tree/main/06-01_image-slide-gallery)
- [06.01. Image Slide Gallery (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/06-01_image-slide-gallery-ts)
- [06.02. Full Page Hero Banner](https://github.com/theo-interactive/ui-development/tree/main/06-02_full-page-hero-banner)
- [06.02. Full Page Hero Banner (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/06-02_full-page-hero-banner-ts)
- [06.03. Full Page Hero Banner Advanced](https://github.com/theo-interactive/ui-development/tree/main/06-03_full-page-hero-banner-advanced)
- [06.03. Full Page Hero Banner Advanced (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/06-03_full-page-hero-banner-advanced-ts)
### 7. Accordion
> 아코디언 콘텐츠 구성 방법과 이벤트 핸들링
데이터를 이용한 동적 콘텐츠 구성 방법
>
- [07.01. Accordion Hover](https://github.com/theo-interactive/ui-development/tree/main/07-01_accordion-hover)
- [07.02. Accordion Click Selected](https://github.com/theo-interactive/ui-development/tree/main/07-02_accordion-clcik-selected)
- [07.02. Accordion Click Selected (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/07-02_accordion-clcik-selected-ts)
- [07.03. Accordion Click Selected & Dynamic HTML Content](https://github.com/theo-interactive/ui-development/tree/main/07-03_accordion-clcik-selected--dynamic-html-content)
- [07.03. Accordion Click Selected & Dynamic HTML Content (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/07-03_accordion-clcik-selected--dynamic-html-content-ts)
### 8. Sprite Sheet Animation
> Sprite Sheet 이미지를 활용한 클립 애니메이션 구성 방법과 이벤트 핸들링
다중 클립 애니메이션 구성 방법과 제어
>
- [08.01. Sprite Sheet Animation Hover](https://github.com/theo-interactive/ui-development/tree/main/08-01_sprite-sheet-animation-hover)
- [08.01. Sprite Sheet Animation Hover (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/08-01_sprite-sheet-animation-hover-ts)
- [08.02. Sprite Sheet Animation Controls](https://github.com/theo-interactive/ui-development/tree/main/08-02_sprite-sheet-animation-controls)
- [08.02. Sprite Sheet Animation Controls (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/08-02_sprite-sheet-animation-controls-ts)
- [08.03. Sprite Sheet Animation Multiple Clips](https://github.com/theo-interactive/ui-development/tree/main/08-03_sprite-sheet-animation-multiple-clips)
- [08.03. Sprite Sheet Animation Multiple Clip (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/08-03_sprite-sheet-animation-multiple-clips-ts)
### 9. Scroll Event
> 스크롤 위치를을 이용한 콘텐츠 노출 인터랙션 구성 방법과 이벤트 핸들링
패럴랙스(Parallax) 스크롤링 구성 방법과 제어
>
- [09.01. Scroll Event :: Content Appear on Scroll](https://github.com/theo-interactive/ui-development/tree/main/09-01_scroll-event--content-appear-on-scroll)
- [09.01. Scroll Event :: Content Appear on Scroll (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/09-01_scroll-event--content-appear-on-scroll-ts)
- [09.02. Scroll Event :: Parallax Scrolling Effect](https://github.com/theo-interactive/ui-development/tree/main/09-02_scroll-event--parallax-scrolling-effect)
- [09.02. Scroll Event :: Parallax Scrolling Effect (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/09-02_scroll-event--parallax-scrolling-effect-ts)
### 10. Audio Player
> 음악 재생을 위한 플레이어 구성 방법과 컨트롤러 제어
>
- [10. Audio Player](https://github.com/theo-interactive/ui-development/tree/main/10_audio-player)
- [10. Audio Player (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/10_audio-player-ts)
### 11. Video Player
> 동영상 재생을 위한 플레이어 구성 방법과 컨트롤러 제어
>
- [11. Video Player](https://github.com/theo-interactive/ui-development/tree/main/11_video-player)
- [11. Video Player (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/11_video-player-ts)
### 12. Touch Swipe Image Gallery
> 터치 이벤트를 이용한 모바일에서 적용 가능한 이미지 갤러리 구성 방법과 이벤트 핸들링
>
- [12. Touch Swipe Image Gallery](https://github.com/theo-interactive/ui-development/tree/main/12_touch-swipe-image-gallery)
- [12. Touch Swipe Image Gallery (TypeScirpt)](https://github.com/theo-interactive/ui-development/tree/main/12_touch-swipe-image-gallery-ts)
### 13. AJAX (Asynchronous JavaScript And XML)
> 비동기 통신을 이용한 콘텐츠 구성 방법
Restful API 제어
>
- [13. UI with Ajax](https://github.com/theo-interactive/ui-development/tree/main/13_ui-with-ajax)
- [13. UI with Ajax (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/13_ui-with-ajax-ts)
### 14. Canvas API
> Canvas API를 이용한 시각화 구성 방법
Pixi JS를 이용한 그래픽스 구성 방법
Canvas + Pixi JS + GSAP 애니메이션 시퀀스 구성 방법
>
- [14.01. Canvas](https://github.com/theo-interactive/ui-development/tree/main/14_01_canvas)
- [14.01. Canvas (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/14_01_canvas-ts)
- [14.02. UI with Canvas](https://github.com/theo-interactive/ui-development/tree/main/14_02_ui-with-canvas)
- [14.02. UI with Canvas (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/14_02_ui-with-canvas-ts)
- [14.03. Canvas Graphics Animation Sequence](https://github.com/theo-interactive/ui-development/tree/main/14_03_animation-sequence)
- [14.03. Canvas Graphics Animation Sequence (Typescript)](https://github.com/theo-interactive/ui-development/tree/main/14_03_animation-sequence-ts)