창고

[CSS+JS] requestAnimationFrame 으로 로딩 효과 구현하기

유튜브 쇼츠 : https://youtube.com/shorts/CghGn-glw28?si=4LfGyNdcicBsYOwESee the Pen CSS+JS Loading requestanimationframe by Oh Ikmyeong (@dpffpself) on CodePen.HTML1234567891011121314151617181920!DOCTYPE html>html lang="ko">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>CSS LOADING DOT/title>    link rel="stylesheet" href="./style.css..

https://www.youtube.com/watch?v=dIEViv_i7Xs데모See the Pen 고객의 소리 by Oh Ikmyeong (@dpffpself) on CodePen. HTML123456789101112131415161718192021222324252627282930313233343536!DOCTYPE html>html lang="en"> head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>마디아 고객의 소리/title>    link rel="stylesheet" href="./style/main.css">    script src="..

box-shadow와 background-color, border-radius를 잘 조합하여 눈속임 효과를 낼 수 있다.HTML123456789101112131415161718192021222324252627282930313233343536!DOCTYPE html>html lang="ko"> head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>border radius Inverted/title>    link rel="stylesheet" href="./style.css">/head> body>    a href="https://codepen.io/kris..

챗지피티가 정말 좋아졌다... 불과 2년전까지만 해도 머리털 쥐뜯었는데... 기본으로 짜준 코드를 바탕으로 다듬어봄 DemoSee the Pen Trello by Oh Ikmyeong (@dpffpself) on CodePen.HTML123456789101112131415161718192021222324252627282930313233343536373839404142!DOCTYPE html>html lang="en"> head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Trello/title>    link rel="stylesheet" href="./s..

css로만 만들 수 있는 marquee slider. 마우스 hover시 잠시 애니메이션이 멈춘다(animation-play-state:paused)https://www.youtube.com/watch?v=mF9yOwlunWk다만 매번 아이템 추가하고 지우고 변경하고 할 때 총 갯수 지정 및 이런게 귀찮으니 JS로 생성 가능하게 만들어봄See the Pen Untitled by Oh Ikmyeong (@dpffpself) on CodePen. HTML12345678910111213!DOCTYPE html>html lang="ko">head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale..

See the Pen imageZoom by Oh Ikmyeong (@dpffpself) on CodePen.html1234567891011121314151617181920212223242526!DOCTYPE html>html lang="ko"> head>    meta charset="UTF-8">    meta name="viewport" content="width=device-width, initial-scale=1.0">    title>Image Zoom Effect in E-commerce Website using Javascript/title>    link rel="stylesheet" href="./style.css">    script src="./main.js" type="modul..

원본 작품 : https://x.com/ntv_rd/status/1792053852889612311 X의 日テレR&Dラボ님(@ntv_rd)LOVEが現れるまでランダムに文字列を生成し続ける作品、エキソニモさんの『Find My LOVE』。37万文字描いてやっと出会えました。シンプルだけど奥深い。面白い。 アートキャンバスとしてのWebtwitter.com무작위로 A-Z까지 알파벳중 랜덤으로 출력하여 최종적으로 LOVE라는 글자가 출력될 때 까지 시간을 계산한다.근데 이거 실제로 돌려보면 한평생 걸릴 가능성이 크기 때문에 다른 글자도 입력해서 테스트 할 수 있도록 해놓았다.코드펜 데모 See the Pen RANDOM LOVE by Oh Ikmyeong (@dpffpself) on CodePen. HTML1234567891..

window.opener 챗지피티는 정말 짱이다... 기본적인 원리는 다음과 같음. i index.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 2 Click const $btn = document.getElementById("btn"); const $result = document.getElementsByName("result")[0]; $btn.addEventListener("click",()=>{ window.open("./popup.html", "popup", "width=200,height=200"); }); function get_value(value){ $result.value = value; } Color..

https://www.youtube.com/watch?v=1tz-m88gFVA js animate 사용으로 좀 더 부드럽게 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 Document 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 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 @charset "utf-8"; ..

https://www.youtube.com/watch?v=pgo6URFz8tc 요약 : 일반 함수의 this는 "호출"시 결정 화살표 함수의 this는 "선언"시 결정. (부모 참조) 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 { const obj = { name : "🍒", sayNameClassic : function(){console.log("sayNameClassic",this.name || "undefined");}, sayName(){console.log("sayName",this.name || "undefined");}, sayNameArrow : ()=..

데모 See the Pen promise예제 by Oh Ikmyeong (@dpffpself) on CodePen. 별코딩 강의 영상 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 자바스크립트 비동기 프로그래밍 #3.5 | Promise.all + allSettled + any + race 별코딩 : 자바스크립트 비동기 프로그래밍 #3.5 | Promise.all + allSettled + any + race 콘솔창을 확인해보세요 함수들은 각각 1,2,3초가 걸립니다. Promise.all Promise.allSettled Promise.any Promise.race Colored by Color Scripter cs CSS..

https://www.youtube.com/watch?v=HIrDMR6CaHY 데모 사이트 : https://ohikmyeong.github.io/hpp-counter If Dr. Seuss Made Programming Tutorials 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 If Dr. Seuss Made Programming Tutorials If Dr. Seuss Made Programming Tutorials CASH PRIZE $ restart Colored by Color Scripter cs CSS 1 ..

HTML 12345678910111213 canvas 화살표 선 사각형 Colored by Color Scriptercs JS 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145..

보통 input[type="range"]는 핸들러가 1개 뿐이다. 근데 만일 min, max 핸들러가 2개인 input을 구현하고 싶다면? 유의사항 완전 기본의 기본. 안되는게 더 많아요! 되지 않는 항목들은 다음과 같음 현재 min, max 제한 없이 왔다갔다함. (min이 max보다 더 오른쪽으로 이동한다든가) step에 대한 snap 없음 귀찮아서 window.resize에 대한 초기화 안 해놓음 그대로 갔다 쓰면 문제가 많을거에요 ㅋㅋ 걍 원리만 이해하시고 변형하고 추가 수정해서 쓰면 됩니다. 데모 사이트 : https://Ohikmyeong.github.io/range-slider-minmax/v1 HTML html은 별거 없습니다. 그냥 css랑 js링크용 1 2 3 4 5 6 7 8 9 10..

https://d3js.org/d3.v5.min.js C3.js는 D3.js에 의존한다. c3-0.7.20 기준, d3의 v5.min.js 파일을 필요로 하는데 현재 d3 페이지 가보면 버젼이 7까지 올랐음. 7로 연결해도 되지 않나? 하지만 호환성 문제인지 오류 때문에 안 됨. v5는 어디서 구하는데? 해서 찾아보니 역시... 과거 블로그 글들이 구원해주시리라... 저와 같은 문제를 겪었을 분들을 위해 빠른 검색 결과 나오시라고 링크 올립니다.

https://www.youtube.com/watch?v=iLmBy-HKIAw 데모 : https://ohikmyeong.github.io/kp-infinite-scroll/ Infinite Scorll ohikmyeong.github.io CSS 키워드 mask width : max-content transform:translateX(calc(-50% - (var(--gap) / 2))); JS 키워드 $elem.cloneNode(true); 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 Infinite Scorll Create an infinite horiz..

https://www.youtube.com/watch?v=ikbwJy84f2Y 영상과 코드가 다릅니다. 아이템의 갯수가 변화할시 일일히 CSS 수정 안 하고 걍 JS가 알아서 계산해서 CSS 대입하도록 했음. See the Pen 3d carousel by Oh Ikmyeong (@dpffpself) on CodePen. 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 3d Gallery 3D Image Gallery in CSS & Javascript 1 2 3 4 5 6 7 8 9 10 PREV NEXT Colored by Color Scripter cs CSS 아이템들을 중앙에 위치하..

JS의 .animate() 속성을 이용해서 클릭&드래그로 좌우로 이동하는 DOM을 만들건데, 1. 자식요소들을 감싸고 있는 부모만 움직임 2. 자식요소엔 클릭이벤트만 적용 (클릭시 크기가 줄어들었다/원래크기로 돌아옴) 3. 부모가 움직이고 난 후에도 자식 위에 마우스 커서가 있을때 원래는 클릭이벤트로 간주되지만, 이를 원치않음. 따라서 부모가 움직였다면 마우스 커서가 자식 위에 있더라도 클릭이벤트를 처리하지 않음. 4. 부모를 움직일때도 일정 거리 이상 마우스 커서를 움직이지 않으면, 부모도 움직이지 않게 할 것임. (이렇게 하지 않으면 아주 조그만 움직임에도 부모는 움찔거리며 계속 움직임) See the Pen Untitled by Oh Ikmyeong (@dpffpself) on CodePen. HT..

https://www.youtube.com/watch?v=_PPWWRV6gbA https://webdevsimplified.com/markdown-cheat-sheet.html Markdown Cheat Sheet Free Markdown Cheat Sheet webdevsimplified.com 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 ..

보통 웹사이트에서 배너가 끝없이 반복되며 한쪽으로 흐르는 효과를 재현해보자. 방법을 크게 2가지로 써봤는데, 1. js의 신규 내장 API인 $elem.animate(keyframes,options)를 사용하여 쉽고 효과적으로 재현하기 2. Promise와 setTimeout을 사용하여 원시적으로 재현하기 슬프게도 2번이 보기가 더 안 좋다..! 미세하지만 툭 끊기는 느낌이 나기 때문. 화면을 다시 그리고 이벤트 루프가 돌고...화면을 다시 페인팅하고 어쩌고...이런것 때문에 js는 생각대로 마음처럼 움직여주지 않는다. 어찌하였건 똑똑한 개발자들이 animate를 만들어주었으니 더 부드러운 효과가 재현 가능한거다...! css에서 animation이 종료되었을시 이벤트를 추가하고 싶다면 animation..

https://www.youtube.com/watch?v=bAwEj_mSzOs 원본 영상에선 라이브러리를 쓰고있는데, 이걸 바닐라 자바스크립트로 구현해보았음... 데모 : https://ohikmyeong.github.io/hpp-tile-anime hpp-tile-anime [Hyperplexed]Mind-Blowing Anime.js Staggered Grid Effect ohikmyeong.github.io index.html엔 그냥 #wrap인 DOM 하나만 있음. 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 @charset "..

https://www.youtube.com/watch?v=DeHRDNRQhNg 데모 : https://ohikmyeong.github.io/hpp-wand-reveal/ hpp-wand-reveal [Hyperplexed]Wand reveal gallery (opacity, blur) ohikmyeong.github.io 깃허브 : https://github.com/OhIkmyeong/hpp-wand-reveal 마우스의 좌표값에 따라 마술봉이 움직이며, 갤러리의 사진들이 마술봉이 지나간 자리에선 opacity가 1, blur가 0이 되며, 지나가기전엔 opacity가 0, blur가 n값이 된다. 마술봉이 지나가고 나면 보이지 않았고 흐리했던 사진들이 스르륵 보여지는 재밌는 효과... js의 anima..

[Hyperplexed]Award Winning Animation With Only 20 Lines Of CSS? 데모 : https://ohikmyeong.github.io/hpp-drag-slider Award Winning Animation With Only 20 Lines Of CSS? ohikmyeong.github.io 드래그로 부드럽게 이동하는 이미지 슬라이더다. 특징은 드래그 안의 이미지가 드래그 동작에 맞춰 다른 속도로 움직여서 그 효과가 더 좋게 보인다. 핵심개념은 css의 object-position과 js에서 animate()를 사용한다. 다른 개체에도 적용시킬 수 있도록 클래스화 시켰고, html에 data-* 대신, 클래스를 이용하는 만큼 constructor안에 상황을 저장하도..

[Hyperplexed]The Ultimate Hacker Effect That Anyone Can Do 데모 : https://ohikmyeong.github.io/hpp-hacker-effect The Ultimate Hacker Effect That Anyone Can Do ohikmyeong.github.io 글자위에 마우스 커서를 올렸을 때(mouseover) 해당 텍스트의 글자가 랜덤한 글자로 마구 바뀌다가 시간에 따라 첫글자부터 원래대로 돌아오는 효과. https://kprverse.com/ 의 메뉴 효과에서 따왔다고 한다... 여기서 그냥 (1) 개체별로 해당효과를 지정할 수 있게 클래스로 만들었고, (2) 마우스를 여러번 올렸을 때 setInterval이 중복으로 발생하지 않도록 플래그를..

데모 : https://ohikmyeong.github.io/frontend-mini-challenges/toast-popup/ toast-popup 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 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 toast-popup left right top bottom success error warning info Duration(1.5 ~ 10s) Show Toast! 1 ✕ 2 ✕ 3 ✕ 10000 ✕ Colo..

데모 : https://ohikmyeong.github.io/frontend-mini-challenges/light-dark-mode/ light-dark-mode 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 light-dark-mode Dark Mode The Entire Page Color Theme is Controlled Using CSS and JavaScript Contained Dark Mode The Container Color Scheme is Controlled By Only CSS Colored by Color Scripter c..

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