배너 이미지

개발

[CSS, JS] 잉크 퍼지는 효과

[CSS, JS] 잉크 퍼지는 효과

원본은 codehouse의 Ink Transition Effect입니다.데모 페이지에서 확인하실 수 있듯, 버튼을 누르면 잉크가 퍼지는 효과와 함께 모달 창이 열립니다. 원본 스크립트에서 jQuery를 제거하고, 자바스크립트에서 처리할 필요 없이 css에서 처리하면 되는 건 css로 옮겨뒀습니다. 깃허브에서 파일들을 내려받으실 수 있습니다.Clone or download 버튼을 클릭하셔서 zip 파일을 내려받으시거나 index.htmlcss>style.cssjs>main.vanilla.jsimg>모든 파일정도만 받으셔서 수정하셔도 됩니다. 자바스크립트 document.addEventListener("DOMContentLoaded", () => {     const modalTrigger = document.querySelector(".cd-modal-trigger"),         transitionLayer = document.querySelector(".cd-transition-layer"),         transitionBackground = transitionLayer.querySelector(".bg-layer"),         modalWindow = document.querySelector(".cd-modal");...
TTFB 대폭 단축 성공!

TTFB 대폭 단축 성공!

글을 시작하기 전에 TTFB(Time To First Byte)에 대해 짧게 설명하자면, 서버에 HTTP 요청을 보내고 브라우저가 첫 정보를 수신하기까지 걸리는 시간을 의미합니다. 위 그림에 표시된 것처럼클라이언트가 요청을 보내는 데 걸린 시간 + 서버가 그 요청을 처리한 시간 + 서버가 응답한 시간이 셋을 합한 시간이 TTFB입니다. 지금까지 저 세 단계 중 "처리 시간"을 좀먹던 녀석입니다.어느 부분이 시간을...
200224 블로그 제작일지

200224 블로그 제작일지

홈 화면 슬라이더 디자인 쓸데없이 뭐가 많은 느낌이라 글 요약이랑 더 보기 버튼을 삭제했는데, 뭘 너무 많이 걷어냈나 싶네요. 조만간 디자인을 대폭 손보지 않을까 싶습니다. SVG 로고 제작 PNG로 만든 로고를 SVG로 리마스터했습니다.SVG 애니메이션도 쓸 수 있고, 화질에 더는 구애받지 않고 사용할 수 있습니다! 악성 봇 차단 IP나 Referrer 등을 확인해 악성 봇을 차단하기 시작했습니다.Apache...
티스토리 새 글 발행시 브라우저 알림 보내기

티스토리 새 글 발행시 브라우저 알림 보내기

티스토리에서 새 글을 발행할 때마다 웹 푸시 알림을 보내는 방법입니다.브라우저에서 알림을 보내니, 구독자가 굳이 피드에 접속하지 않아도 새 글 발행 여부를 파악할 수 있게 됩니다! 티스토리에는 루트에 파일을 올릴 권한이 없어, One Signal과 Zapier 두 개를 조합해서 사용해야 합니다.초기 설정은 다소 번거로워도 한 번 설정해두면 알림이 계속 가니 처음 한 번만 좀 고생하시면 됩니다. One...
페이지 전환 효과 사용하기

페이지 전환 효과 사용하기

페이지 전환 효과(Page Transition Effect)는 Node.js로 백엔드를 수정하거나, React, Vue 등으로 만든 사이트에서 훨씬 쉽고 화려하게 만들 수 있지만, 이미 만든 사이트에 페이지 전환 효과 넣자고 사이트를 갈아엎긴 아무래도 힘듭니다.그래서 간단하게 페이지에 별다른 수정을 거치지 않고 페이드 등의 간단한 효과를 사용하는 방법을 공유해볼까 합니다. Javascript function isSameAsLocation(uriString) {     const uri = new URL(uriString);...
200212 블로그 제작일지

200212 블로그 제작일지

스크린샷에 담기 힘든 효과가 많은 날이네요. 홈 화면 슬라이더 업데이트 창 크기를 변경하면 슬라이더의 위치도 변경되도록 업데이트했습니다. 창 크기가 1920px인 기기에서 접속했다 치면, 예전엔 창 크기를 800px로 줄여도 한 페이지의 크기가 1920px이라 생각하고 1920px씩 페이지를 넘겼다면, 이젠 800px씩 넘깁니다. 댓글 입력 효과음 댓글을 입력하면 위 효과음이 재생됩니다! Lazy Load 업데이트 [...document.querySelectorAll(".lazyLoad")].forEach(img => {         const fullH = window.scrollY - (img.parentNode.offsetTop);         !img.classList.contains("loaded") && -(windowHeight * 1.5) < fullH && img.offsetHeight * 1.5 > fullH && (             loadImg()         )...
CSS Mask 이용하기

CSS Mask 이용하기

스크롤을 내려 확인해보세요!페이지 링크 위 데모처럼 특정 오브젝트 뒤로 글자가 넘어가게 하고 싶을 때 쓸 수 있는 CSS의 마스크(mask)입니다.아이러니하게도 CSS보단 포토샵에 능해야 깔끔하게 만들 수 있긴 합니다. 포토샵 글자 아래에 표시될 부분만 선택해줍니다.글자 위에 표시될 부분을 선택하는 게 편하시면 그 부분을 선택하시고 우클릭 > 반전 선택하셔도 무관합니다. 우클릭 > 작업 패스 만들기 > 허용치 1픽셀위...
200131 블로그 제작일지

200131 블로그 제작일지

1월 5일에 작성하고 한 번도 작성하질 않았네요…;;그동안 자잘하게 수정은 많았는데, 수정한 거 캡처한 폴더를 지워버리는 바람에…남은 거라곤 최근에 한 수정사항뿐입니다. 😥 404 페이지 등 이미지 수정 인덱스 페이지나 404 페이지 등에 있던 이미지들을 조금씩 수정했습니다. T 전화 휴대폰 색상 수정 T 전화 올릴 때 사용하는 휴대폰이 검은색이라 어두운 모드에선 보기 힘들던 문제가 있었습니다.이젠 어두운 모드에서...
910111213