창고

https://www.youtube.com/watch?v=CZIJKkwc8l8 (The Mouse Trailer With Smart Features - Hyperplexed) 데모 : https://ohikmyeong.github.io/hpp-mouse-trailer Document ohikmyeong.github.io 우아하게 마우스 커서를 따라다니는 개체 (단순히 style에서 transform을 지정한게 아닌, animate 사용), 그리고 커서가 상호작용하는 개체에 따라 크기와 안의 내용이 바뀌는 인터랙티브한 마우스 커서.... 개인적으론 외국 사이트에서 이렇게 마우스 커서 따라다니는 애들이 재밌게 움직여서 대체 어떻게 구현하는걸까...했는데 animate()를 사용하는거였다... 😯 정말 끝이 ..

RIP Tutorial : 파이차트 그리기, 파이조각(Wedge) 그리기 원리, 캔버스 원형 그라디언트 파이 그래프를 그릴 때 보통은 시작 각도가 0도라서 시계 12시 방향이 아닌 3시 방향부터 그리기 시작한다. 이는 상황에 따라 다르겠지만 보통 긍정적(비율이 크기를 기대) /부정적(비율이 작기를 기대) 2개의 항목이 있는 파이 그래프에서는 아무래도 12시 방향부터 부정적 비율이 그려져야 가독성이 좋을것 같다는 생각을 했음. 기본 RIP 튜토리얼 사이트에 나온것에서 시작 각도만 조정해주면 된다. 여기서 필요한 개념이 라디안(radian)과 각도(degree) 사이의 변환인데, 캔버스에서 arc를 이용하기 위해선 각도를 라디안으로 변형해줄 필요가 있다. (각도는 0도부터 360까지, 라디안은 0부터 약 6..

튜토리얼 사이트 html5-canvas Tutorial => Dragging circles & rectangles around the... Learn html5-canvas - Dragging circles & rectangles around the Canvas riptutorial.com 데모페이지 :https://ohikmyeong.github.io/rip-tutorial-canvas/dragging/01_drag_circle_rectangle.html Dragging circles & rectangles around the Canvas ohikmyeong.github.io 배경이 그려진 캔버스위에 두개의 개체를 마우스 다운&드래그 할 수 있다 나중에 드래그 되는 개체의 z-index값이 더 높다 두..

https://riptutorial.com/html5-canvas/topic/5492/charts---diagrams html5-canvas Tutorial => Charts & Diagrams Learn html5-canvas - Charts & Diagrams riptutorial.com canvas로 파이차트등 다양한 차트를 그리려고 할 때나, 도형이나 복잡한 패스 안에 이미지를 넣거나, 그만큼 잘라내고 싶을 때 방법등을 쉽게 알아볼 수 있는 사이트 RIP tutorial html5-canvas Tutorial => Getting started with html5-canvas Learn html5-canvas - Getting started with html5-canvas riptutorial.co..

데모 사이트 : https://ohikmyeong.github.io/frontend-mini-challenges/telephone-formatter/ telephone formatter ohikmyeong.github.io HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 telephone formatter +(000)-1234-5678 Colored by Color Scripter cs 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 class TelephoneFormatter{ const..

데모 사이트 : https://ohikmyeong.github.io/frontend-mini-challenges/guess-the-number/ Guess the Number 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 Guess the Number Enter a Guess Between 0 to 100 SUBMIT Too Low / Too High Your Guesses : ${0},${0} RESTART GAME 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 ..

결론 : 아직 기본 기능엔 멀티 상속을 지원하지 않는다. 그래서 reduce를 이용하여 특수하게 사용해야한다. 참고 링크 : https://medium.com/@thevirtuoid/extending-multiple-classes-in-javascript-2f4752574e65 Extending Multiple Classes in JavaScript For developers coming from traditional OOP languages, I have seen them dismayed, nay, horrified that you cannot do the following in… medium.com 장점 : 멀티 상속의 개념을 쓸 수 있다! 단점 : 부품이 되는 클래스들은 모두 다시 한번 함수로 감싸..

최근에 sadanandpai의 Frontend Mini Challenge(이하 FMC라고 하겠음)를 하고있다... 엔간해선 다 예전에 한번 만들어 본건데 다시 하니까 감회가 새롭고 좋은듯. 현 시점에서 20개까지 해놨는데 한 번에 다 올리긴 힘드니까 일하기 싫을때마다 하나씩 올리겠음 계산기 다시 구현하다가 자꾸 실패해서 예전에 한거 보긔... 기억력 뭔 데모 : https://ohikmyeong.github.io/frontend-mini-challenges/counter 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 Counter ${0} - + Increase/Decrement by RESET Colo..

https://www.youtube.com/watch?v=w0VEOghdMpQ&t=2411s 클론코딩 API 키를 발급 받지 않아도 되는 편리한 날씨 API : https://open-meteo.com/ Free Open-Source Weather API | Open-Meteo.com $ curl "https://api.open-meteo.com/v1/forecast?latitude=52.52&longitude=13.41¤t_weather=true&hourly=temperature_2m,relativehumidity_2m,windspeed_10m" { "current_weather": { "time": "2022-01-01T15:00" "temperature": 2.4, "weathercode": 3, ..

1탄에서 만든거는... 말단이 흉하게 나오는 문제가 있었음. 코드펜을 보니 grid 속성과 grid-row의 span 속성을 사용하여 더 이쁘게 정렬하는걸 참고하여 다시 만듦 See the Pen Masonry Layout-grid by Oh Ikmyeong (@dpffpself) on CodePen. HTML 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 Masonry Layout(final) css grid-row span 사용하기 Masonry Layout grid-row span 속성 이용해보기 I'm Footer 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 ..

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

보호되어 있는 글입니다.