그냥, 일단 써내려가자

안녕하세요, 무택입니다 :)오늘은 부드러운 스크롤링을 위한 라이브러리 Locomotive-scroll을 들고 왔습니다. 사용 방법이 쉽지는 않은데 아래에서 최대한 쉽게 설명한 내용을 보고 사용해 보세요! Good Referance 공간기록ㅣ빈 공간에 가치를 담다공간기록이 만들어 낸 빈공간에는 공간기록과 클라이언트의 수많은 가치있는 이야기들이 새롭게 기록되어져 담깁니다.ggglog.com  HTML/CSS scroll-speed 양수 scroll-speed : 0.5 scroll-speed : 1 ..

안녕하세요 무택입니다 :) 오늘은 JS를 이용해서 before&after를 효과적으로 보여줄 수 있는 UI를 카피 구현해 봤습니다. 원본 사이트에서 JS코드를 찾아볼 수가 없어서 따라서 구현하는데 애를 조금 먹었는데, 아래에서 자세한 코드들을 살펴보시죠😊 읽기 전 보면 좋은 글 [JavaScript]마우스 좌표를 구할 수 있는 다양한 방법 HTML/CSS JS const find_xy = document.getElementsByClassName('find_xy')[0]; find_xy.addEventListener('mousemove', function (e) { const moveX = e.offsetX; document.querySelector('.af_img_div').style.width = (5..

See the Pen scrollTrigger 활용 by TytanLee (@TytanLee) on CodePen. scrollTrigger 라이브러리 활용해서 css수정하기 - 문제점 : 한 번만 활용하는 게 아니라 두 번 활용할 경우 코드 어떻게 활용할지 찾기

안녕하세요 :) 무택입니다🧔 이번에는 웹페이지에서 빠질 수 없는 팝업 적용하는 코드에 대해 기록하도록 하겠습니다. 일반적인 팝업에 배경 블러효과+팝업 활성화 시 배경 클릭 시 닫히는 기능도 같이 구현했습니다. 배경 블러효과를 주면 팝업에 더 집중되는 효과를 줄 수 있습니다. See the Pen popup Layer(배경 블러 효과 + 외부 클릭시 닫기) by TytanLee (@TytanLee) on CodePen. 추가로 사용된 문법들에 대한 정리는 아래를 참고해 주세요. [jQuery] mouseup() mouseup() 메서드는 선택한 요소에서 마우스를 눌렀다가 떼었을 때 이벤트가 발생합니다. #문법 $("선택자").mouseup(); [JavaScript] classList.add() class..

안녕하세요 :) 무택입니다🧔 오늘 기록할 내용은 웹페이지 nav에 활용하면 좋은 효과입니다. nav에 투명도를 주고 블러효과를 입혀서 아래레이어가 보이는 구성으로 웹페이지에 개방감을 줄 수 있는 장점이 있습니다. See the Pen nav filter effect by TytanLee (@TytanLee) on CodePen.

티스토리 블로그에 코드 블럭 스킨 적용하는 방법 (highlight.js) ?. 코드블럭이란 게시글에 코드를 넣을 때 최적화 시켜주는 툴이다. 여기서 여러가지 언어를 선택할 수 있다. 스킨을 사용하지 않으면 평범한 코드블럭 형태가 나온다. 하지만 평범한 스킨이 싫다 싶은 사람들은 코드 스킨을 사용하면 자신만의 블로그 색깔을 만들 수 있다. 아래 순서대로만 따라오면 쉽게 적용할 수 있다. 01. 블로그 설정에서 '플러그인 - 코드 문법 강조' 선택 02. 적용 클릭 03. '스킨 편집' 클릭하고 창 먼저 띄워두기 04. https://highlightjs.org/ highlight.js Version 10.7.2 This is a patch release. The only change is that dep..

원본 링크 : https://github.com/bfintal/Counter-Up GitHub - bfintal/Counter-Up: Counter-Up is a lightweight jQuery plugin that counts up to a targeted number when the number becom Counter-Up is a lightweight jQuery plugin that counts up to a targeted number when the number becomes visible. - GitHub - bfintal/Counter-Up: Counter-Up is a lightweight jQuery plugin that counts u... github.com 사용 소스 : 01...

아래 방법을 사용하면 간편하게 디자인 가이드를 수정할 수 있습니다. 처음 퍼블리싱을 접하시는 분들은 각각의 텍스트, 라인 등에 똑같은 스타일을 다 각각 스타일을 지정하는 작업을 할 수 있지만 아래처럼 변수로 스타일을 만들어놓으면 같은 형식의 디자인같은 경우 한 번에 색상 및 폰트 크기 등을 간편하게 변경하고 적용할 수 있습니다. 1.HTML 첫 번째 타이틀 첫 번째 서브 타이틀 예시용 텍스트 문단입니다. 두 번째 타이틀 두 번째 서브 타이틀 예시용 텍스트 문단입니다. 세 번째 타이틀 세 번째 서브 타이틀 예시용 텍스트 문단입니다. 2.CSS *{ pdding: 0; margin: 0; } /* 전체 설정 가이드화 */ :root{ --color-black: #131313; --color-gray: #55..