특정 UI 효과 구현하기 (소스 코드, 튜토리얼 사이트)

웹이나 앱에서 UI 효과를 구현하려면, 기본적으로 HTML과 CSS, JS를 어느 정도는 알아야 합니다. 그러고 나서 구체적인 UI 효과들이 어떻게 작동하는지 소스코드를 참고하면 좋습니다.

 

이 글에서는 제가 특정 UI 효과를 구현할때 자주 참고하는 사이트는 코드롭스, 코드펜을 소개하겠습니다.

 

 

1. 코드롭스

 

코드롭스는 CSS, JS로 할 수 있는 모든 효과들을 배울 수 있는 사이트입니다. 원하는 효과를 검색하면 직접 실행해볼 수 있고, 튜토리얼로 설명된 글과 소스까지 얻을 수 있습니다. 

 

• 코드롭스(페이드인아웃 반응형 소스)
• 코드롭스(3D로 클릭하면 물리력 행사 박스)
• 코드롭스(버튼 호버 효과들)
• 코드롭스(밑줄 효과들)
• 코드롭스(자석같이 붙는 버튼)
• 코드롭스(피아노)
• 코드롭스(3D로 구성된 쇼핑몰 맵)
• 코드롭스(원을 뒤집는 슬라이드)
• 코드롭스(각종 로딩 효과)
• 코드롭스(마우스움직임에 따라 살짝 움직임)

 

 

2. 코드펜

 

코드펜은 웹에서 코딩을 할 수 있는 편리한 도구이기도 하지만, 자신이 만든 것을 공유할 수 있는 사이트입니다. 따라서 핀터레스트에서 이미지를 찾듯이, 코드펜에서는 UI 구현해 놓은 코드를 찾기가 쉽습니다.

 

• 코드펜(웹사이트 로딩 효과)
• 코드펜(스크롤 애니메이션)
• 코드펜(클릭하면 펼쳐지는 햄버거, 정보)
• 코드펜(마우스커서에 따라 움직이는 눈)

 

 

이상으로 UI 효과를 구현하기 위한 소스 코드, 튜토리얼 사이트 2가지를 소개해드렸습니다.

 

아마 코드펜은 많이 아실 수도 있는데, 코드롭스도 알고 계셨는지 궁금하네요. 저도 검색을 타고 타고 들어간 거라 ㅎㅎ 이 글이 유용하게 참고가 된다면 기쁘겠습니다.

 

 

 

 

읽어주셔서 감사합니다.