'Tip' 카테고리의 글 목록

Tip/라이브러리

swiperswiper를 슬라이드를 만들고 마우스오버 했을 때 멈추는 기능이 있다. autoplay를 추가할 때 disableOnInteraction: false을 사용하면되는데 딜레이 없는 슬라이드에서 마우스오버를 하면 바로 멈추지 않고 슬라이드가 있어야 할 자리까지 도달했을 때 비로소 멈춘다. 이때, 슬라이가 있어야 할 자리까지 이동하지 않고 바로 멈추는 방법이다. 예시See the Pen 이미지가 있는지 없는지 체크하여 default이미지 뿌려주는 함수. by 슬기 (@hahahoho9) on CodePen. HTMl 코드 연속으로 흘러가는 슬라이드 입니다. 1 연속으로 흘러가는 슬라이드 입니다. 2 연속으로 흘러가는 슬라이드 입니다. 3 연속으로 흘러가는 슬라이..

reviews 1 calendar_month 2025.07.31

Tip/사이트 추천

상업용 무료 AI 이미지 생성 사이트 모음

DreaminaCapCut에서 개발한 AI 기반 이미지 생성 및 편집 도구로, 텍스트 프롬프트나 기존 이미지를 활용하여 고품질의 시각 자료를 손쉽게 제작할 수 있다. 생성한 콘텐츠의 라이선스는 어떤 이유로든 유효하며 누구나 상업적인 목적을 포함한 모든 목적으로 사용할 수 있다. Dreamina dreamina.capcut.com ImageFXGoogle의 AI 실험 플랫폼인 labs.google/fx의 일부로 제공되며, 이 플랫폼에서는 ImageFX 외에도 MusicFX, VideoFX, Whisk와 같은 다양한 AI 기반 창작 도구가 있다. MusicFX는 음악, VideoFX는 비디오, Whisk는 이미지 등을 생성하고 편집할 수 있다. 라이선스 범위는 전 세계적, 비독점적, 무상으로 전세계 누..

reviews calendar_month 2025.02.07

Tip/사이트 추천

100% 상업용 무료 영문 폰트 사이트 모음

fontsquirrel무료로 이용할 수 있는 고품질 폰트를 제공한다. 개인 및 상업적 용도로 사용 가능한 폰트를 엄선하여 제공하며, 디자이너와 개발자를 위한 웹 호환 폰트도 지원한다. 또한 웹폰트 생성기(Webfont Generator)를 통해 폰트를 웹에서 사용할 수 있는 형식으로 변환할 수 있으며, 폰트 식별기(Font Identifier) 기능을 통해 모르는 폰트를 찾을 수 있다. Free Fonts! Legit Free & Quality » Font SquirrelHandpicked free fonts for graphic designers with commercial-use licenses.www.fontsquirrel.com colors색조합으로 유명한 사이트지만 폰트까지 무료로 다운로드..

reviews 1 calendar_month 2024.09.19

Tip/라이브러리

네이버맵 마커 로드 후 이벤트 naver.maps.Event

네이버맵 마커 로드 이벤트네이버맵이 로드 된 후에 마커 아이콘 이미지가 로드되기 때문에 마커 아이콘 이미지를 변경하는 이벤트는 마커 아이콘 이미지 로드가 완료되는 시점에 발생해야한다. 예시개별 마커 아이콘마다 해당하는 이미지 파일 로드 후, 개별 이미지 파일이 없으면 기본 아이콘으로 적용var arr = [['name' => 'apple'], ['name' => 'banana'], ['name' =>'orange'], ['name' => 'kiwi']];var map = new Array();var markers = new Array(); arr.forEach(function(item, i){ var markerOptions = { position: position.destination..

reviews calendar_month 2024.09.12

Tip/라이브러리

스크롤을 부드럽게 해주는 라이브러리

lenisDarkroom Engineering에서 만든 웹사이트에 매끄러운 스크롤 효과를 제공하는 라이브러리이다. 트랙패드나 마우스 휠을 사용하는 다양한 디바이스에서 일관되게 보여진다. 개발자 및 디자이너들은 이 라이브러리를 사용해 애니메이션 끊김이나 지연 문제를 해결하고 더욱 자연스러운 웹 애니메이션을 구현할 수 있다. 사용법라이브러리 추가하기 태그 사이에 입력한다.파일 직접 다운로드하기 https://github.com/darkroomengineering/lenis js 작성하기 태그 사이, 또는 외부 scipt파일에 입력한다//기본const lenis = new Lenis();function raf(time) { lenis.raf(time); requestAnimationFrame(r..

reviews calendar_month 2024.08.21

Tip/사이트 추천

자주 쓰는 상업용 무료 아이콘 폰트 사이트 모음

Font Awesome (폰트어썸)다양한 크기와 색상으로 쉽게 커스터마이징할 수 있는 확장 가능한 벡터 아이콘을 제공한다. 무료 버전과 유료 버전(Pro)을 제공하며, Pro 버전에는 더 많은 아이콘과 추가 기능이 포함되어 있다. Font AwesomeThe internet's icon library + toolkit. Used by millions of designers, devs, & content creators. Open-source. Always free. Always awesome.fontawesome.com 아이콘 사용방법 사이에 cdn을 추가한다. 원하는 디자인의 아이콘을 검색한다. 검색결과에서 원하는 아이콘을 클릭한다.HTML, REACT, VUE, SVG 등 원하는 방법을 선택하여 복사..

reviews calendar_month 2024.07.01

Tip/라이브러리

스크롤 바 내렸을 때 요소가 등장하는 애니메이션 플러그인 Scroll Reveal, Animate On Scroll

Scroll Reveal페이지를 스크롤할 때, 특정 요소들이 부드럽게 화면에 나타나거나 사라지는 등의 다양한 애니메이션 효과를 구현할 수 있다. 직관적이고 간단한 API를 제공하여, 원하는 애니메이션을 쉽게 설정하고 적용할 수 있다. 요소가 화면에 나타날 때 페이드 인(fade-in) 효과를 주거나, 특정 방향으로 슬라이드 인(slide-in) 하는 등의 동작을 간단한 코드로 구현할 수 있다. 가벼우면서도 성능이 뛰어나, 다양한 웹사이트에 적용이 가능하다. 또한, 반응형 디자인을 지원하여, 다양한 기기에서 일관된 애니메이션 효과를 제공한다.wb_incandescent Tip2버전까지는 무료, 3버전부터는 유료로 사용해야 한다. 무료버전 최상위 버전은 v2.3.2이다. 사용법라이브러리 추가하기 태그 사..

reviews 1 calendar_month 2024.06.17

Tip/라이브러리

애니메이션 효과가 있는 차트, 그래프 그리기 chart.js(v4.4.3) 플러그인 사용법

chart.js다양한 차트를 쉽게 생성하고 커스터마이즈 할 수 있다. 반응형이며 MIT라이선스로 오픈소스이다. 자주 사용되는 차트 유형, 플러그인을 제공하고 사용자가 직접 정의 할 수 있다. 기본 제공 차트 유형 세트 외에도 커뮤니티에서 유지 관리하는 추가 차트 유형을 사용할 수 있다. 여러 차트 유형을 결합할 수 있다. 주석 생성, 확대/축소, 드래그 앤 드롭 기능 등 다양한 기능을 제공한다. chart.js 사용법HTML, JavaScript를 사용하여 chart.js를 구현할 수 있다. 라이브러리 추가하기 태그 사이에 입력한다.파일 직접 다운로드하기 https://github.com/chartjs/Chart.js/releases/tag/v4.4.3 html 작성하기 태그 사이에 입력한다 ..

reviews calendar_month 2024.06.13

Tip/사이트 추천

상업용 한글 무료 폰트(다운로드/웹폰트) 사이트 모음

눈누폰트상업적으로 이용할 수 있는 한글 폰트는 영문 폰트에 비해 적기도 하지만 알려지지 않은 폰트가 많은데, 눈누는 잘 알려지지 않은 상업적으로 이용할 수 있는 무료 한글 폰트를 모아 많은 사람들에게 소개하기 위해 시작된 사이트. ※ 눈누에 있는 모든 폰트의 지적재산권은 각 폰트 제작사 및 제작자에 있으며, 눈누는 폰트 제작자 및 제작사와 관련이 없음. 폰트 소프트웨어 사용과 취급으로 발생하는 일에 대해서 눈누는 책임이나 의무를 가지지 않는다. 눈누상업용 무료한글폰트 사이트noonnu.cc 구글폰트구글폰트 사이트에서 소개하는 모든 폰트들은 상업적으로 사용할 수 있으며 상업적으로 판매되는 제품에 포함할 수도 있다. 사용 및 재배포 조건이 라이선스에 지정되어 있기 때문이다. 가장 일반적인 라이선스는 ..

reviews calendar_month 2024.06.05

Tip/라이브러리

input 태그에 달력으로 날짜 넣기 : datepicker.js

datepicker제이쿼리에서 제공하는 날짜 선택 라이브러리. 입력 필드에 직접 날짜를 입력하는 대신, 시각적으로 더 편리한 달력 인터페이스를 통해 날짜를 입력할 수 있기 때문에 직접 입력하는 것 보다 쉽게 입력하고 날짜 입력 형식의 일관성을 유지할 수 있다. input 텍스트 필드에 초점이 맞춰지면 작은 오버레이로 달력 인터페이스가 열린다. 인라인 달력의 경우는 해당 범위에 연결하기만 하면 된다.check_circle Check기본 Datepicker는 기본언어가 영어로 되어있기 때문에 날짜는 물론 달력 순서도 월-일-년도 순이다. 때문에 옵션을 이용해서 한국어로 변환 후 사용하는것이 좋다. 사용법라이브러리 추가하기 태그 사이에 입력한다.파일 직접 다운로드 하기 https://jqueryui.co..

reviews calendar_month 2024.05.24

Tip/라이브러리

원형 그래프 애니메이션(숫자, 막대 변환) jQuery 플러그인

jquery-circle-progress원형그래프 플러그인으로 원 안의 숫자와 원형 막대가 변환하는 애니메이션을 구현한다. 직관적으로 진행상황을 보여 줄 수 있는 디자인이라 다양하게 활용 할 수 있다. 여러 옵션을 제공하고 있어 디자인을 커스터마이징 할 수 있고, 반응형으로도 제작 할 수 있다.check_circle Check제이쿼리를 반드시 함께 사용해야 하는 제이쿼리 라이브러리. 사용법라이브러리 추가하기태그 사이에 입력한다.파일 직접 다운로드하기 https://github.com/kottenator/jquery-circle-progress html 작성하기 태그 사이에 입력한다 스크립트 작성하기태그 사이 또는 태그 사이에 입력하거나 외부 스크립트 파일에 입력한다$('#circle').circ..

reviews calendar_month 2024.05.11

Tip/라이브러리

다이나믹한 텍스트 애니메이션 jQuery 플러그인 모음

shuffleLetters.js 텍스트를 애니메이션 효과로 섞어 보여주는 효과를 구현하는 플러그인. 해당 텍스트가 무작위로 섞이면서 최종적으로 원래의 텍스트로 다시 정렬 되는 애니메이션을 구현한다. 옵션으로 텍스트가 표시되는 속도 등을 조절 할 수도 있고 특정 텍스트에 마우스를 올렸을 때만 작동할 수도 있다. 사용법 안녕하세요. 닌니디자인 입니다. 블로그 방문을 환영합니다. $(document).ready(function() { $(".example").shuffleLetters({ "step": 8, // 각 반복에서 섞일 글자 수 "fps": 25, // 초당 프레임 수, 애니메이션의 속도를 결정 "text": "Custom text", // 애니메이션 완료 후 나타낼 최종 텍스트 "callback"..

reviews calendar_month 2024.04.09

닌니디자인의 포스팅을 검색 해주세요.

Ninny Design Tip

티스토리툴바