본문 바로가기

Opensource51

AI 아바타 말하는 동영상 만들기 https://studio.d-id.com/ D-ID Studio Create professional videos using just a still image with text or audio powered by AI. studio.d-id.com 1. 사이트에 접속해서 원하는 인물 이미지를 고르거나 생성하고, 원하는 텍스트와 억양, 목소리를 선택한다. 2. Create Video 버튼을 클릭하면 해당 아바타가 말을 하는 동영상이 몇초만에 만들어진다. 2023. 6. 5.
xmind, 마인드맵 생성 사이트 https://xmind.app/ Xmind - Full-featured mind mapping and brainstorming tool. Boost efficiency both in work and life. Millions of people love it. xmind.app https://xmind.app/xmind-works/ Xmind Works Your favorite mind toolbox now open on the web, experience the power of Xmind right in your browser with Xmind Works. xmind.app 사용법 Web : 웹에 접속만 되면 생성 수정이 가능하다. https://xmind.app/xmind-works/ Ctrl + .. 2023. 5. 29.
ai가 360도 배경 생성해주는 사이트 https://www.blockadelabs.com/ Blockade Labs Breaking down barriers between technology and creativity. Start building your own AI-powered 360° worlds today with Skybox AI. www.blockadelabs.com 360도 배경 이미지 만들어주는 ai 사이트이다. 입력창에 원하는 것을 입력하면 알아서 360 배경이미지가 만들어진다. 신기해서 막 만들어 보았다. 2023. 5. 27.
lottiefiles, 에펙 모션을 벡터로 웹에서 가볍게 사용하기 https://lottiefiles.com/ LottieFiles: Download Free lightweight animations for website & apps.Effortlessly bring the smallest, free, ready-to-use motion graphics for the web, app, social, and designs. Create, edit, test, collaborate, and ship Lottie animations in no time!lottiefiles.com1. 에펙용 플러그인을 설치한다.설치된 플러그인은 에펙의 윈도우-> Extensions -> LottieFiles 클릭하여 사용한다.  2. 에펙에서 모션을 만든다. 유의할것은 .. 2023. 5. 3.
jquery-smooth-scroll https://github.com/kswedberg/jquery-smooth-scroll GitHub - kswedberg/jquery-smooth-scroll: Automatically make same-page links scroll smoothlyAutomatically make same-page links scroll smoothly - GitHub - kswedberg/jquery-smooth-scroll: Automatically make same-page links scroll smoothlygithub.com// smooth scroll $('a').click(function(event) { event.preventDefault(); var link = this;.. 2023. 4. 19.
AI 음악 생성 사이트, Soundraw https://soundraw.io/ Soundraw Your personal AI music generator. soundraw.io 음악 컨셉과 빠르기, 악기, 음악 길이 등 원하는 것을 클릭만으로 자신의 음악을 만들수 있고, 그것을 다양한 컨텐츠에 사용할 수 있다. 음악을 더 다듬고 다운 받으려면 유료 결제가 필요하다. 16.99 달러, 한달에 22,000원 정도이다. 사용법이 간단하고 인터페이스가 훌륭해서 3분도 안되어 원하는 느낌의 배경음악을 만들 수 있었다. 2023. 3. 24.
3D Real Glassmorphism, Vanilla-tilt https://micku7zu.github.io/vanilla-tilt.js/?utm_source=cdnjs&utm_medium=cdnjs_link&utm_campaign=cdnjs_library  Vanilla-tilt.jsTilt change event The tilt change event will output the x,y & percentages of tilting. let eventBox = document.querySelector("#box-event"); let outputContainer = document.querySelector(".output"); VanillaTilt.init(eventBox); eventBox.addEventListener("tiltCmicku7zu.github... 2023. 3. 20.
Typed plugin https://github.com/mattboldt/typed.js GitHub - mattboldt/typed.js: A JavaScript Typing Animation Library A JavaScript Typing Animation Library. Contribute to mattboldt/typed.js development by creating an account on GitHub. github.com let typetext = new Typed('#text', { strings: ['First sentence.', '& a second sentence.', 'hohoho'], typeSpeed: 100, backSpeed: 50, backDelay: 1000, loop: true, }); 2023. 3. 19.
Parallax plugin https://github.com/wagerfield/parallax GitHub - wagerfield/parallax: Parallax Engine that reacts to the orientation of a smart device Parallax Engine that reacts to the orientation of a smart device - GitHub - wagerfield/parallax: Parallax Engine that reacts to the orientation of a smart device github.com 사용법 css #scene .layer { position: absolute; top:0; left:0; width: 100%; height: 100vh;} #sc.. 2023. 3. 14.
클릭이벤트 플러그인 hammer.js https://hammerjs.github.io/ Hammer.JS - Hammer.js hammerjs.github.io $(element).hammer(options).bind("pan", myPanHandler); var hammertime = new Hammer(myElement, myOptions); hammertime.on('pan', function(ev) { console.log(ev); }); hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL }); 2023. 3. 7.
Email Services - EmailJS https://www.emailjs.com/docs/ Documentation | EmailJS Well organized and easy to understand documentation with examples! www.emailjs.com 2023. 3. 7.
Scroll Plugin, AOS http://michalsnik.github.io/aos/ AOS - Animate on scroll libraryAOS Animate On Scroll Library Scroll downmichalsnik.github.io 사용법 커스텀[data-aos="new-animation"] { opacity: 0; transition-property: transform, opacity; &.aos-animate { opacity: 1; } @media screen and (min-width: 768px) { transform: translateX(100px); &.aos-animate { transform: tr.. 2023. 3. 7.
VS Code 단축키 모음 기본 설치 플러그인 단축키 ctrl+Enter아래에 행 삽입ctrl+shift+Enter위에 행 삽입alt+Down행을 아래로 이동alt+Up행을 위로 이동 Ctrl + Shift + k행 삭제shift+alt+f css 한줄로 (CSS-compact)Ctrl + K, Ctrl + F 차례대로들여쓰기 재정렬 기본 설치 플러그인 auto close tagauto rename taghtml snippetslive serverautoprefixercss-compact git graph html css support html boilerplate live sass compiler postcss sorting prettier.. 2023. 2. 20.
Figma 간단 사용법 정리 단축키 Frame F Auto layout Sht + A 캔버스화면 전체 Sht + 1 이름수정 Ctl + R 라이브러리 창 Alt + 3 프레임내 순서수정 프레임선택 + 방향키 image place Ctl + Sht + K 텍스트 속성빼고 복붙 Ctl + Sht + V 컴포넌트 Ctl + Alt + K 컴포넌트 위젯창 Sht + I 버전기록 Ctl + Alt + S 플러그인 https://www.figma.com/community/file/984106517828363349 https://www.figma.com/community/plugin/1088610476491668236/Material-Symbols https://www.figma.com/community/file/10142415588984182.. 2023. 2. 12.
chatGPT 에게 bxslide 이용해서 코딩 해달랬더니 챗지피티 에게 bxslide 플러그인 이용해서 이미지 돌아가는 갤러리 페이지 코딩 해달랬더니 아래처럼 코드를 짜주었다. https://chat.openai.com/ 그러자 정말 3개씩 보이고 캐러샐로 돌아가며, 모바일에선 2개씩 보이는 반응형 갤러리가 만들어졌음. 2023. 2. 10.
github 초간단 사용법 깃허브, 좋긴 하지만 혼자선 잘 안쓴다. 그런데 협업할때는 어쩔 수 없이 써야 된다. 그럴 때를 대비한 간단 사용법이다. 깃설치 : https://git-scm.com/downloads 1. 내 컴퓨터에 git 처음 세팅할 경우 폴더 하나 만들어서 Shift + 우클릭 -> PowerShell 창열기 클릭 아래처럼 깃허브 이메일과 이름을 넣어준다. git config --global user.email "aaa@gmail.com" git config --global user.name "aaaname" VSCode에서 git graph 설치하면 편하다. 이제 원하는 폴더에서 git init 쓰고 사용하면 된다. git init => git 감시 시작 git add aa.html => 이 파일 기록 git .. 2023. 2. 4.
Editor X, CMS https://www.editorx.com/ Responsive Web Design | Website Creation | Editor X Experience the future of website design with responsive layouts, CSS precision and smooth drag and drop. www.editorx.com 2023. 1. 23.
이미지를 ICO, 파비콘으로 변환해주는 사이트들 ICO 파일 컨버터 해주는 사이트들 png 파일 급하게 파비콘 제작시 ico 파일로 변환할때 사용 별도 프로그램없이 사이트에서 바로 적용후 다운로드 https://www.icoconverter.com/ ICO Converter Converts images to the ICO format for your websites or applications. www.icoconverter.com https://favicon.io/ Favicon.io - The Ultimate Favicon Generator (Free) With Favicon.io you can quickly generate a favicon for your website for free! favicon.io 2023. 1. 17.
자주 쓰는 무료 웹폰트 아이콘 링크 모음 무료 웹폰트 아이콘 사이트 1. 부트스트랩 아이콘 https://icons.getbootstrap.com/ Bootstrap Icons Official open source SVG icon library for Bootstrap icons.getbootstrap.com 사용법 1. head에 아래 링크 넣거나 2. 사용하는 css 파일에 아래 링크 넣는다. (둘중에 하나만 하면 됨) @import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.3/font/bootstrap-icons.css"); 3. html 안에 필요한 곳에 사용한다. 2. ionicon https://ionic.io/ionicons Ionicons: The premium icon p.. 2023. 1. 17.
스와이퍼 슬라이더 플러그인 swifer swiper js https://swiperjs.com/ Swiper - The Most Modern Mobile Touch SliderSwiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior.swiperjs.com  head커스텀은 body 닫기 직전 html hhh ppp .. 2023. 1. 16.
lightbox Plugin https://lokeshdhakar.com/projects/lightbox2/ Lightbox2 Examples Two individual images Four image set Getting started Download a zip of the latest release (or any previous one) from the Github Releases page. Or install using npm: npm install lightbox2 --save Open up the zip file and take a peek at the barebones lokeshdhakar.com 2023. 1. 16.
스플라인, 3D 웹도구 https://spline.design/ Spline - Design tool for 3D web browser experiences Create web-based 3D browser experiences spline.design 2023. 1. 16.
티스토리 이미지 썸네일 비율 바꾸기 skin.html 파일에서 원하는 thumbnail 찾아서 숫자 수정하면 됨.예:  C600x600 :  600사이즈로 크롭된 이미지 가져옴 그런데 사이즈가 몇 개로 고정되어 있고 스킨마다 조금씩 다름. 그래서 그냥 백그라운드로 썸네일 이미지를 깔고 백그라운드 사이즈를 cover 로 주었음. 커버는style="background-image:url('') !important"> 리스트는style="background-image:url('') !important"> css는.post-item .thum { display: block; margin-bottom: 5px; border: 1px solid #ddd;overflow: hidden; position: relative; width: 310.. 2023. 1. 16.

티스토리툴바