창고

See the Pen Masonry Layout by Oh Ikmyeong (@dpffpself) on CodePen. 한 2018년 쯤에 jQuery 라이브러리 없이 어떻게 하면 Masonry Layout을 구축할 수 있을까... 고민했었다. 이 블로그 해당 카테고리의 가장 초반 글도 그거랑 관련된 내용일꺼다... 그 때 당시엔 지금보다 훠어얼씬 더 자바스크립트를 못하고 (제이쿼리만 할 줄 알았음) 문제해결능력도 엄청 낮았기에 css의 column 속성으로 하드코딩 했었다. 이건 JS와 position:absolute를 이용하여 강제적으로 포지션값을 변경하는 방식이다. 장점은 애니메이션 효과가 적용됨 (transition) 단점은 짝수개의 컬럼일때 이미지 길이에 따라 한쪽만 길게 늘어지는 것 처럼 보이..

See the Pen Like Slick Slider by Oh Ikmyeong (@dpffpself) on CodePen. 데모 및 코드 소스 코드펜에서 확인하기 : https://codepen.io/dpffpself/pen/dyjJbqo Like Slick Slider ... 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 slick slider vanilla js Like Slick Slider (1)Hello World button Item(2) ....(3) 4 Thank you Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 1..

이전 버젼을 만들고 나니 원본이랑 움직임이 다르기에 수정해줌, + 이미지가 정중앙에 오도록 바꿔줌 이미지가 정중앙에 오도록 하는 방법 이미지는 width:100vmax; height:100vh; object-fit:cover; left는 left:50vw;에 translate(-50%); center는 left:50%; translate(-50%); right는 left:calc(((100vw / 3) * -2) + 50vw); 3분할로 나뉜 애들 transition을 transform에만 걸고 opacity는 걸지 않아놔야 생각한대로 움직인다. center로 움직일때는 opacity 1로 해야 빈화면이 안 보이더라고...머리로는 안 걸어도 될 것 같은데, 플래그 걸어놨음에도 불구하고 마구 움직이다보면 ..

https://codepen.io/theseventh/pen/LYVqMYb Yet another slider ... codepen.io 저 분의 코드펜을 보고 내 식대로 바닐라 자바스크립트로 짜보았음. 처음엔 background로 접근했다가 사이즈별 대응이 잘 안되어서 좀 무겁더라도 ㅎ..코드는 간단해지는 쪽으로 변경함. 이미지 객체의 사이즈를 100vw 100vh로 한 다음 object-fit:cover로 해주면 된다. 그리고 position:absolute;에 left값을 -3, -6 으로 바꿔주면 된다. 맨 처음에서 이전 버튼을 누를시에는 매끄럽진 않음..근데 귀찮다 그냥... 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 ..

원본 : https://codepen.io/Hyperplexed/pen/MWQeYLW Magical Hover Effect (w/ Tutorial) A recreation of the amazing hover effect found here: https://linear.app/features ... codepen.io 이런거 보면 진짜 정말 대단하고 기발한 사람들이 많다...👍 마우스의 clientX, clientY 값에 따라서 background의 radial-gradient 값의 시작 좌표 값을 바꿔준다 (style.setProperty 사용) 테두리도 반짝이는것처럼 보이는 효과는 실제로 border를 준게 아니라, 좀 더 작은 DOM을 자식요소로 넣은것이다 (inset의 값이 커질수록 테두리는 굵어..

원본 : 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 ..

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개여야 한다..

webisfree : 자바스크립트 history 객체 페이지 갱신 없이 페이지 전환, pushstate MDN : pushState replaceState History.replaceState() - Web API | MDN History.replaceState() 메서드는 현재 history를 수정해 메소드의 매개 변수에 전달 된 stateObj, title, URL로 대체합니다. 이 방법은 특히 일부 유저의 동작에 대한 응답으로 history 객체의 상태나 현재 history developer.mozilla.org 이것만으론 리액트를 완전히 대체할 수 없겠지만... 늘 궁금했음 어차피 리액트도 자바스크립트로 만드는건데 대체 어떻게 페이지 갱신없이 주소창을 바꿀 수 있는걸까?????????? 자바스크립..

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() ..

보호되어 있는 글입니다.

코드펜 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..

비슷한 내용을 자주 올리지만 다시 짤 때마다 원리를 이해한 상태에서 더 간결해지고 있으므로... 드래그나 리사이즈를 할 때마다 해당 모달의 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:..

영상에 보인대로 따라하면 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..

쩨리쩨리님의 달력 만들기 : https://jerryjerryjerry.tistory.com/26 왼쪽 To Do List 부분 카피한 디자인 : https://dribbble.com/shots/20082214-Contact-page-Untitled-UI 미리보기 : https://ohikmyeong.github.io/cdtd-2022/ 달력만들기-2022 할 일을 등록해보세요! ohikmyeong.github.io 깃허브 주소 : https://github.com/OhIkmyeong/cdtd-2022 GitHub - OhIkmyeong/cdtd-2022: 달력+To do list 달력+To do list. Contribute to OhIkmyeong/cdtd-2022 development by crea..

네이버 모두가 지식인20니다. 홈페이지의 캐러셀 슬라이더가 인상깊어서 구현해보았음. 깃허브 : https://github.com/OhIkmyeong/carousel-v1/tree/main/mine-2-3d-reverse GitHub - OhIkmyeong/carousel-v1: 캐러셀 슬라이더 캐러셀 슬라이더. Contribute to OhIkmyeong/carousel-v1 development by creating an account on GitHub. github.com 데모 : https://ohikmyeong.github.io/carousel-v1/mine-2-3d-reverse/ 모두지식인20니다 참고 ohikmyeong.github.io 참고 : https://3dtransforms.desa..

animationend 이벤트 리스너를 이용하여 아주 간단하게 만들 수 있다. 여기서 타이밍 조정은 CSS에서 가능하다는게 가장 큰 장점이다. 깃허브 : https://github.com/OhIkmyeong/time-slider 데모 : https://ohikmyeong.github.io/time-slider/ 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 타임슬라이더 TimeSlider v1.0 1 2 3 4 5 6 참고 : 노비타 홈페이지 www.novita.co.kr Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17..

깃허브 주소 : https://github.com/OhIkmyeong/infinite-slider GitHub - OhIkmyeong/infinite-slider: 무한 슬라이더 무한 슬라이더. Contribute to OhIkmyeong/infinite-slider development by creating an account on GitHub. github.com 이전,다음 버튼 페이저 마우스다운,마우스업 이벤트로 드래그시 이동 터치스타트, 터치엔드 이벤트로 터치시 이동 자동재생은 아직 구현 안 함 요즘 ott앱이나 많은 웹페이지 메인 슬라이드들은 신기하게 무한슬라이더 느낌을 제공하는데 (가장 마지막페이지 / 처음페이지의 구분이 느껴지지 않음) 대체 어떻게 만든걸까..생각하다가 약간 어설프지만 구현해..

데모 사이트 : https://mellifluous-cucurucho-4fbe72.netlify.app/ ::훈화 말투 생성기:: mellifluous-cucurucho-4fbe72.netlify.app 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 ::훈화 말투 생성기:: 훈화 말투 생성기1.0 말줄임표(⋯) 친애하는 학생 여러분 시간은 쉼 없이 흘러 벌써 겨울방학을 맞이하고 있습니다. 띄어쓰기 기준 낱말은 두 개 이상 써주세요. 생성 복사 복사 완료! Colored by Color Scripter cs CSS 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 ..

데모 페이지 : https://ohikmyeong.github.io/resize_dom/ vanilla JS : Resizable ohikmyeong.github.io 깃 허브 : https://github.com/OhIkmyeong/resize_dom GitHub - OhIkmyeong/resize_dom: RESIZE DOM : DOM을 마우스다운+마우스무브 (드래그)로 Resize 가능하도록 RESIZE DOM : DOM을 마우스다운+마우스무브 (드래그)로 Resize 가능하도록. Contribute to OhIkmyeong/resize_dom development by creating an account on GitHub. github.com HTML 1 2 3 4 5 6 7 8 9 10 11 1..

보호되어 있는 글입니다.

유튜브 : https://www.youtube.com/watch?v=QTcIXok9wNY 미리보기(데모) : https://ohikmyeong.github.io/wds-snake-game/answer-with/ (Answer With)Snake Game ohikmyeong.github.io HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 (Answer With)Snake Game 0 GAME OVER.. Colored by Color Scripter cs 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 ..

데모페이지 : https://ohikmyeong.github.io/wds-library/mine/ mine Houses For Sale Live Demo Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magnam tempore nostrum autem vel esse libero! Details Contact Seller X modal title modal content ohikmyeong.github.io WDS 강의 영상 : https://www.youtube.com/watch?v=vTsVl66q9jo IntroJS : https://introjs.com User Onboarding and Product Walkthrough Library | ..

* WDS : https://www.youtube.com/watch?v=p_6IuhmBsfc&t=1763s * CodePen : https://codepen.io/doriancami/full/jEJvaV 미리보기 : https://ohikmyeong.github.io/wds-time-turner/mine/ Time Turner Animation 0 0 0 0 ohikmyeong.github.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..

접속 페이지 :https://effortless-khapse-9eb044.netlify.app/ 프로스펙트 영/한글자막 프로스펙트 영화 43:40 ~ 43:43 경 에즈라가 시이를 부르는 호칭은? (띄어쓰기 없음/영어/낙타등(Camelcase)표기) ex) big elephant면 비밀번호는 BigElephant effortless-khapse-9eb044.netlify.app 걸린 시간 : 디자인 / 코딩 포함 약 이틀 힘들었던 점 : 완벽하지 않은 영자막과... 한글 자막은 영화 보면서 대사 직접 침 = 노가다 유튜우브는 제발 영화 팔 때 자막 옵션도 넣어주면 좋겠다 이거입니다

HTML,JS 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 Can I Create Online Tutorial’s Magic CSS Indicator? home Home person Person forum Comment photo_camera Photo settings Settings const $gnb = document.getElementById('gnb'); const $indicator = docu..

https://www.youtube.com/watch?v=jfYWwQrtzzY 이전 포스팅 : https://aosceno.tistory.com/603 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 How To Build Sortable Drag & Drop With Vanilla Javascript Hello World Nice To Meet You Colored by Color Scripter cs 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 @charset "utf-8"; @import url..

CSS,JS 영상 참고 : https://www.youtube.com/watch?v=VPVu1148TU0 원본 디자인 참고 : https://uidesigndaily.com/posts/figma-reviews-day-1573 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 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 ..

깃허브 GitHub - OhIkmyeong/cliptext: clipText-intersectionObserver clipText-intersectionObserver. Contribute to OhIkmyeong/cliptext development by creating an account on GitHub. github.com 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 텍스트 테스트 ClipText version 1.0 Hello World Nice to Meet you! clipText 안의 p태그 안의 글자를 span 태그로 자동 분리..

gitHub GitHub - OhIkmyeong/tableBuilder2: table Builder 2.0 (테이블 생성기) table Builder 2.0 (테이블 생성기). Contribute to OhIkmyeong/tableBuilder2 development by creating an account on GitHub. github.com HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Table Builder v2.0 Table Builder v2.0 Colored by Color Scripter cs main.js 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 ..

https://ohikmyeong.github.io/tableBuilder/ table builder ohikmyeong.github.io 데이터 형식 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 { "data" : [ {"th-1" : "th-1"}, {"th-1" : "th-1"}, {"th-2" : "th-2"}, {"th-1-1" : "th-1-1"}, {"th-1-2" : "th-1-2"}, {"th-2-1" : "th-2-1"}, {"th-1-1" : "(1-1)value"}, {"th-1-2" : "(1-2)value"}, {"th-2-1" : "(2-1)value"}, {"th-1-1" : "(1-1)value"}, ..