본문 바로가기

분류 전체보기

 (201)
[CSS] 아쿠아 버튼(copy) 원본 : https://codepen.io/simeydotme/pen/MWXxKrP Aqua Button (pure css) Using Gradients, Variables and Filters / Blending to create a really convincing Aqua button as seen on Twitter... codepen.io 색감과 효과가 너무 이쁘다... HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 Aqua Button ..
[CSS] Gooey effect 끈적거리며 달라붙는 효과 (SVG:filter) https://codepen.io/ykadosh/pen/LXvpBK Firefly Loader (Gooey Effect) Inspired by Alexis Doreau's Dribbble at https://dribbble.com/shots/2156764-Scanner-Gooey-Effect-Firefly-Loader and this article https://css-tricks.com/... codepen.io 코드펜의 이 예제를 보고, 원하는 만큼 푸른 공을 추가하고 마우스 커서를 따라다니는 민트색 공으로 변경해봄 svg의 기능을 쓴다. css에서 푸른공들을 묶어놓은 DOM(이하 $balls)에 filter : url(#아이디) 이런식으로 지정을 해준다. 커서를 따라다니는 DOM은 총 2개여야 한다..
[JS]페이지 갱신 없이 주소 바꾸기(history.pushState(), history.replaceState() webisfree : 자바스크립트 history 객체 페이지 갱신 없이 페이지 전환, pushstate MDN : pushState replaceState History.replaceState() - Web API | MDN History.replaceState() 메서드는 현재 history를 수정해 메소드의 매개 변수에 전달 된 stateObj, title, URL로 대체합니다. 이 방법은 특히 일부 유저의 동작에 대한 응답으로 history 객체의 상태나 현재 history developer.mozilla.org 이것만으론 리액트를 완전히 대체할 수 없겠지만... 늘 궁금했음 어차피 리액트도 자바스크립트로 만드는건데 대체 어떻게 페이지 갱신없이 주소창을 바꿀 수 있는걸까?????????? 자바스크립..
[CSS+JS]카운트다운 SVG 애니메이션 Online Tutorials 영상 카피 JS로 카운트다운(D-day) 핵심 : GAP = new Date("yyyy-mm-dd, 00:00:00").getTime() - Date.now() 일 : Math.floor( GAP / (밀리세컨드 * 60초 * 60분 * 24시간) ) 시간 : Math.floor( GAP % (밀리세컨드 * 60초 * 60분 * 24시간) / (밀리세컨드 * 60초 * 60분) ) 분 : Math.floor( GAP % (밀리세컨드 * 60초 * 60분) / (밀리세컨드 * 60초)) 초 : Math.floor( GAP % (밀리세컨드 * 60초) / 밀리세컨드 ) svg 스트로크 애니메이션 핵심 : stroke-dasharray 를 $svg.getTotalLength() ..
[JS]Codepen의 이미지 픽셀화 작업 카피(pw:1234) 보호되어 있는 글입니다.
[JS] 카운터 만들기 재구현 (handy tally counter) 코드펜 Jon Kanter 님의 Handy Tally Counter 예제를 보고 원리를 내 방식대로 재구현해보았다. 차이점은 원본은 열마다 0~9까지 DOM이 존재하고, 이걸 9번 위로 올리는 방식이면, 나는 그냥 열마다 now, prev 2개의 DOM만 존재하고, setTimeout과 animationend를 이용하여 내용을 갈아치울거다. 그리고 col의 갯수가 몇개나 늘어나든 상관없이 짜볼거다 (0~999도 되고 0~99999도 되고) 데모 페이지 : https://ohikmyeong.github.io/code-pen-copy/Hand-Tally-Counter/mine/ Handy Tally Counter-Copy 0 1 0 1 0 1 0 1 ohikmyeong.github.io See the Pen..
[JS]Draggable & Resize 모달창 비슷한 내용을 자주 올리지만 다시 짤 때마다 원리를 이해한 상태에서 더 간결해지고 있으므로... 드래그나 리사이즈를 할 때마다 해당 모달의 z-index가 가장 상위로 올라온듯하게 보이도록 수정도 하였다. HTML + CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 Draggable *{margin:0;padding:0;box-sizing:border-box;} body{min-height:..
[Online Tutorials]Glowing Box 영상에 보인대로 따라하면 backface 부분이 안 보이는 오류가 있어서 수정해 봄 CSS로 3d를 해야 할 때 항상 참고하는 사이트 : https://3dtransforms.desandro.com/cube Cube · Intro to CSS 3D transforms Cube Cards are a good start for working with 3D transforms, but they only show off 3D in transition. To show off 3D at rest, we’ll have to create true 3D objects: prisms. We’ll start with a cube. The markup for the cube is similar to the card. This..

티스토리툴바