[site]여러모로 자주 쓸만 한 사이트 정리
아직 제대로 써보지 못한 사이트들도 있다. 유료, 무료 여부는 나중에 기재. 아마 대부분은 무료일 것이다...
아이콘 모음
- FontAwesome : 여러모로 구글 폰트와 더불어 가장 유용하게 쓰고 있는 아이콘 사이트. 무료 아이콘들도 꽤 있고... 하여튼 예쁜 건 유료다. 가입해야 하는 듯.
Font Awesome
The world’s most popular and easiest to use icon set just got an upgrade. More icons. More styles. More Options.
fontawesome.com
- XEIcon : 한국 사이트, 여러 벡터 아이콘들을 받을 수 있다. 라이브러리에서 다운 가능.
http://xpressengine.github.io/XEIcon/
XEIcon, 문자를 그리다
XEICon은 웹사이트 제작에 최적화된 벡터 그래픽 아이콘 툴킷입니다. 여러분의 아름답고 직관적인 웹페이지 제작을 돕습니다.
xpressengine.github.io
- Flaticon : 무료 아이콘들 제공, 벡터는 유료 서비스인 것 같다.
무료 아이콘 및 스티커 - 수백만 종의 다운로드가 가능한 리소스
귀하의 프로젝트를 위한 무료 아이콘 및 스티커를 다운로드하세요. 디자이너에 의한, 디자이너를 위한 리소스. PNG, SVG, EPS, PSD 및 CSS 포맷
www.flaticon.com
움직임 등 효과 라이브러리
- Swiper : 스와이퍼, 대부분의 사이트가 쓰는, 여러 정보를 옆으로 넘기거나 fade 등의 효과를 통해 넘어가게 하는 js와 css를 제공한다. 굉장히 기본템. 정말 많은 곳에 쓴다...!
Swiper - The Most Modern Mobile Touch Slider
Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.
swiperjs.com
- AOS : 스크롤을 움직임에 따라 여러 간단한 움직임 효과를 쉽게 내게 도와주는 라이브러리다. 세팅이 쉽고, 코드 몇 줄로 바로 효과가 나타난다. Swiper이 걸린 곳에 적용하면 swiper에 오류가 생길 수 있다. 주의.
https://michalsnik.github.io/aos/
AOS - Animate on scroll library
AOS Animate On Scroll Library Scroll down
michalsnik.github.io
- CircleType: js파일을 통해 글자가 뱅글뱅글 돌아가거나... 하여튼 움직이는 효과들이 있는 라이브러리 같다. 아직 못 써봤는데 언젠간 꼭...
https://circletype.labwire.ca/
CircleType.js lets you curve type on the web
CircleType.js CircleType.js is a tiny (4kb) JavaScript library that lets you curve type on the web. Features Download on GitHub Demos Basic Arc Here’s some curved text that flows clockwise. Here’s some curved text flowing clockwise. // Here’s some cu
circletype.labwire.ca
- GreenSock : js로 정말 많은 효과들을 쓸 수 있는 사이트. 써봤음. Gsap이라고도 불린다.
GreenSock
GSAP is an industry standard JavaScript animation library from GreenSock that lets you craft high-performance animations that work in every major browser.
greensock.com
- Splitting.js : 문장에 일일이 움직이는 자바 스크립트 효과를 줄 때는, 낱말을 다 <span>으로 나눠 쪼개는 노가다가 필요한데, 이걸 js로 바로바로 해주는 좋은 기능을 갖고 있다.
Splitting.js
CSS Vars for split words, chars, images and more!
splitting.js.org
ETC
- picsum: 원하는 사이즈랑 설정을 입력하면 의미 없는 아무 사진들을 제공하는 사이트다. 주소만 넣으면 여러 이미지들이 랜덤으로 나타나는데, 샘플 사이트를 만들 때 일일이 사진을 안 찾아도 되는 장점이 있다. 다만 로딩이 간혹 렉이 걸려서 안 나오기도 한다.
Lorem Picsum
Lorem Ipsum... but for photos
picsum.photos