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

728x90

Ninny Design Tip

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

jquery-circle-progress원형그래프 플러그인으로 원 안의 숫자와 원형 막대가 변환하는 애니메이션을 구현한다. 직관적으로 진행상황을 보여 줄 수 있는 디자인이라 다양하게 활용 할 수 있다. 여러 옵션을 제공하고 있어 디자인을 커스터마이징 할 수 있고, 반응형으로도 제작 할 수 있다. 사용법$('#circle').circleProgress({ value: 0.75, size: 80, fill: { gradient: ["red", "orange"] }}); 다운로드 및 데모 jquery-circle-progress - jQuery Plugin to draw animated circular progress barsno animation animation progres..

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
Tip/라이브러리
swiper.js 슬라이더 사용법 (v11.0.5)

Swiper 슬라이더모바일 터치 슬라이더 라이브러리로, 웹 및 모바일 앱에서 사용자에게 매끄러운 슬라이드 기능을 제공하며 스와이프 기능이 있다. 다양한 환경에서 슬라이드 쇼, 갤러리, 프로모션 배너, 웹 애플리케이션 등을 만들 때 사용한다. 사용하기 쉽고 다양한 옵션을 제공하여 다양하게 디자인 할 수 있다.이미지, 텍스트, 비디오 등 다양한 형식의 콘텐츠를 슬라이드로 표시할 수 있다. 이를 통해 다양한 형식의 콘텐츠를 시각적으로 효과적으로 전달할 수 있다.터치 및 드래그 동작을 통해 사용자에게 직관적인 인터랙션을 제공한다. 사용자는 쉽게 슬라이드를 넘겨 다음 또는 이전 콘텐츠로 이동할 수 있다.자동 재생 및 루프 기능을 제공하여 사용자가 직접 조작하지 않아도 슬라이드가 자동으로 전환되도록 할 수 있다.다..

reviews 3 calendar_month 2024.01.23
Tip/사이트 추천
웹디자인 벤치마킹을 위한 참고 사이트 모음

디비컷 dbcut신규 오픈한 국내외 웹사이트를 소개 평가하는 웹디자인 포트폴리오 커뮤니티. 디비컷 - 웹디자인 평가 및 우수 웹사이트 모음국내외 우수 웹디자인 레퍼런스 사이트www.dbcut.com 지디웹 GDWEBWEB / UX 다자인 우수 작품들을 선정, 발표하고 영구적으로 보존하는 사이트. http://www.gdweb.co.kr www.gdweb.co.kr 사이트인스파이어 siteinspire전세계의 웹디자인을 위한 독특한 웹사이트를 게시하는 사이트. 하루에 200건 이상 등록된다. All Websites on Siteinspire www.siteinspire.com

reviews calendar_month 2023.11.14
Tip/사이트 추천
display: flex; 아이템 속성/정렬 한눈에 확인 가능한 사이트

사이트소개 CSS Flexbox에 대한 이해를 돕기 위한 유용한 웹사이트입니다. Flexbox는 웹 개발에서 레이아웃을 조정하는 데 사용되는 강력한 CSS 속성입니다. 이 사이트는 Flexbox의 기본 개념과 사용법을 보여주며, 실제 예제를 통해 사용자가 이해하고 적용할 수 있도록 도와줍니다. display: flex flexbox.help 사용방법 해당 사이트에 접속한다. 원하는 요소의 갯수대로 CHILD COUNT를 조정한다. 적용하고자 하는 속성의 버튼을 클릭한다. 원하는 결과물의 CSS OUTPUT을 복사하여 사용한다. flex 컨테이너 속성 flex-direction 아이템들이 배치되는 축의 방향을 결정하는 속성 row 가로로 배열(기본값) column 세로로 배열 row-reverse 가로로 ..

reviews calendar_month 2023.10.25
Tip/사이트 추천
저작권 걱정 없는 상업용 무료 아이콘 사이트 모음

아이콘파인더 iconfinder아이콘을 찾고 다운로드할 수 있는 온라인 플랫폼. 다양한 주제 및 스타일의 아이콘을 제공한다. 사이트 바로가기 7,850,000+ free and premium vector icons, illustrations and 3D illustrationsIconfinder is the world's largest marketplace for icons, illustrations and 3D illustrations in SVG, AI, and PNG format.www.iconfinder.com 무료아이콘 사용법원하는 아이콘을 영어로 검색왼쪽에 Free 버튼 클릭원하는 아이콘 클릭하여 다운로드 플랫아이콘 flaticon벡터 아이콘을 제공하는 웹사이트로, 디자이너, 개발자, ..

reviews calendar_month 2023.10.24
Tip/사이트 추천
저작권 걱정 없는 상업용 무료 이미지 사이트 모음

픽사베이 Pixabay무료로 고품질 이미지, 벡터 그래픽, 일러스트, 동영상 등을 사용할 수 있는 대규모 플랫폼. 상업적인 용도로 이미지를 자유롭게 활용할 수 있도록 공개 도메인(CC0) 라이선스를 사용하고 있다. 자유로운 이미지 공유를 지향하며, 높은 해상도의 다양한 콘텐츠를 제공하여 디자이너, 개발자, 블로거, 교육자 등 다양한 분야에서 활용되고 있다. 놀라운 무료 이미지 - Pixabay - Pixabay어디서든 사용할 수 있는 무료 미디어 Pixabay is a vibrant community of creatives, sharing royalty-free images, videos, audio and other media. All content is released by Pixabay under ..

reviews 1 calendar_month 2023.10.23
Tip/사이트 추천
디자이너에게 유용한 무료 색상 조합 사이트 모음

쿨러 Coolors색상 팔레트를 생성하고 공유할 수 있는 사이트. 원하는 색상을 클릭하여 팔레트에 추가하거나 조절할 수 있고, 이미 생성된 팔레트를 저장하고 다른 사람과 공유할 수도 있다. 스페이스바로 원하는 색조합을 찾을 수도 있고 업로드한 사진의 색으로 색조합을 만들수도 있다. Coolors - The super fast color palettes generator!Generate or browse beautiful color combinations for your designs.coolors.co 사이트 팔레트 Site Palette웹사이트의 색조합을 추출할 수 있는 사이트. 확장 기능으로 색을 추출 할 수 있다. 크롬, 사파리, 파이어폭스 브라우저에 확장 기능을 설치하고 팔레트 아이콘을 클릭..

reviews calendar_month 2023.10.09

chevron_left이전

1

chevron_right다음

728x90

티스토리툴바