반응형 Portfolio/Publishing4 애니메이션을 이용한 가로 막대그래프(스킬바) 오랜만에 포트폴리오 포스팅을 해볼까 합니다. 포트폴리오에 빠질 수 없는 스킬 바 바 형식이 아니더라도 나의 스킬을 표현할 수 있는 방법들은 다양하지만 이번 포스팅을 막대그래프를 활용한 스킬 바를 코딩을 해볼까 합니다. 제가 코딩을 하는 건 아니고 괜찮은 소스가 있어서 소개를 시켜드릴라고 합니다. 저의 포트폴리오에 사용도 되었던 막대그래프입니다. 포트폴리오에 스킬 바를 어떻게 하면 표현할 수 있을지 고민을 하다가 이런 그래프를 넣어야겠다 해서 많은 그래프나 도형들을 찾아봤는데 다들 소스들이 어렵고 헷갈려서 사용하기 좀 어려웠던것들은 다 패스를 하고 그래도 해당 소스는 수정하기도 편하고, 디자인도 괜찮고 해서 사용하게 되었습니다. 해당 소스는 아래의 링크에 있습니다. https://jsfiddle.net/k.. 2021. 6. 8. HTML에 SVG 파일 추가하여 움직이는 애니메이션 구현 오랜만에 포트폴리오 포스팅을 하네요 :) 오늘은 저의 두번째 포트폴리오 메인에 사용된 디자인을 같이 구현해볼까합니다. 먼저 한번 완성작을 같이 보시죠 해당 완성작은 웹페이지에서 작동하는 것을 녹화한 거입니다. SVG파일을 먼저 만들러 가봅시다!! 일단 일러스트를 켜주세요 :) chpofo.tistory.com/39 포트폴리오 시작 - 로고제작 작년 여름방학 때부터 진행되었던 저의 포트폴리오 제작기를 오늘부터 하나씩 정리해볼까 합니다. 디자인을 전공하지 않아서 디자인적으로는 많이 부족한걸 저 또한 잘 알고 있습니다. 구독자 chpofo.tistory.com 해당 로고를 만들었을때 사용했던 필기체 글꼴를 사용해서 만들어봅시다. 1. 해당 글꼴로 원하는 글씨를 써주세요 2. 폰트를 깨주기 위해서 폰트를 선택하.. 2021. 4. 28. 스크롤 시 한 영역씩 이동 안녕하세요 :) 오늘은 포트폴리오에서 많이 사용하는 스크롤 시 영역이 이동되는 쿼리를 해볼까 합니다 이전 포스팅에서 JS플러그인을 소개하는 글에서 처음으로 소개했던 플러그인을 사용해도 무방하지만 코드로 작성할 수 있으면 더 좋지 않을까 해서 제가 학원에서 배운 것을 공유를 해드릴게요^^ 포트폴리오에 사용된 JS 포트폴리오를 준비하면서 벤치마킹을 열심히 하면서 괜찮은 JS 플러그인들이 많아서 소개하려합니다. 1. fullPage.js 첫번째로 소개해줄 플러그인은 첫번째 포트폴리오 기획했던 내용중 https://chpofo chpofo.tistory.com 먼저 완성작을 먼저 보고 코딩을 시작해 봅시다:) 스크롤 시 영역이동 영상에서와 같이 스크롤을 하면 한 영역씩 이동이 되는 그런 코드를 작성해봅시다 생각.. 2021. 4. 8. 포트폴리오에 사용된 JS 포트폴리오를 준비하면서 벤치마킹을 열심히 하면서 괜찮은 JS 플러그인들이 많아서 소개하려합니다. 1. fullPage.js 첫번째로 소개해줄 플러그인은 첫번째 포트폴리오 기획했던 내용중 https://chpofo.tistory.com/40 1번인 "스크롤 한번 할 때마다 한 영역씩 이동" 이걸 할수 있는 플러그인입니다. JS를 잘 하지 못하는 사람들은 이걸 사용하면 편하실텐데 저는 학원에서 배운 소스를 통해서 구현했습니다. 해당 부분또한 새로운 포스팅으로 누구나 할 수 있도록 정리해드릴께요 :) alvarotrigo.com/fullPage/ fullPage scroll snapping. Create full screen pages fast and simple Mouse wheel snap to secti.. 2021. 3. 31. 이전 1 다음 반응형
