프론트엔드/블로그 (3) 썸네일형 리스트형 티스토리 물결(Wave)를 만들어보자! 안녕하십니까. 야생에서 출몰한 하프입니다. 🫠 블로그에 다음과 같이 아름다운 웨이브를 만들어보도록 합시다 별자리랑 웨이브가 있으니 정말 아름답네요 😊 📝 목차 웨이브 1. 사용 기술 이번에도 사용한건 Javascript Canvas 입니다. 찾아보니, hero Waves 라는것도 있고 svg 웨이브 마스크를 사용한 방법도 있더라구요. hero Waves : https://codepen.io/KrzysiekF/pen/oNNLwZq svg Wave : https://wsss.tistory.com/1520 기존에 있는건 식상하니! 만들어 보도록 합시다! 2. 기술 구상 우선 어떻게 만들지 정해야 겠지요! 저는 "인터렉티브 디벨로퍼 김종민"님의 영상을 참고 했습니다. 일단 동그라미를 여러개 그리고 생각해봅시다... 티스토리 별자리를 만들어보자! 야생에서 등장한 하프 입니다. 😊 이번에는 티스토리에서 사용한 별자리를 만들어보도록 하겠습니다. 전 블로그에 글 맨 상단에 적용을 해봤습니다. 나중에 카드 형식으로 설정해서 보여질 수 있도록 인터랙션을 바꿀!! 예정이지만 궁금하신 분들을 위해 글을 작성해보겠습니다. 📝 목차 별자리 1. 사용 기술 제가 채택한 기술은 Javascript Canvas 입니다. 물론 이전에도 계속.. 사용을 해왔고 만드는게 재미있어서 시작하게 됐었는데, 여기서 빛을 보게 되네요 !.. Javascript Canvas는 말 그대로 웹 상에서의 캔버스 입니다. 내가 원하는 만큼 그리고 지울 수 있지요! 그래서 그리고 지우며 애니메이션 처럼 보이는 Frame 단위를 사용합니다. 해상도에 따라 다르겠지만 60 프레임을 목표를 합니다.. 티스토리 목차를 만들어보자! 야생에서 온 하프 입니다 😊 제가 사용하고 있는 목차를 같이 만들어 봅시다. 제목1, 제목3 으로만 반응하도록 했습니다. 이유는.. 제목1과 제목2는 크게 차이가 나지 않아서 구분이 잘 안되더라구요.. 필요하실 때 커스텀 하시면 될 듯 합니다. 📝 목차 목차 구성 조사 1. jquery.toc.js 제가 목차를 만들기 위해서 찾아보았을 때는, jquery.toc.js가 많이 보였습니다. 그래서 이것이 무엇인지는 알고 사용은 해야겠다 싶었습니다. jquery.toc.js는 HTML 문서에 있는 h1, h2 등의 태그들을 목차로 만들어주는 jquery의 플로그인 입니다. jquery.toc.js는 여기에서 다운받으실 수 있습니다. 일단 어떻게 만들면 좋을지 잘 모르겠어서 해당 블로그를 참고 했습니다. 서식 .. 이전 1 다음
