CSS&JS/👀Study and Copy 76
[JS]팝업창에 함수를 전달하고, 팝업창의 변수를 부모창에 전달하는 방법.

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..
CSS&JS/👀Study and Copy 2024.04.16

[OnlineTutorials]링크 아이콘 자석효과

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"; ..
CSS&JS/👀Study and Copy 2024.03.06

[ZeroCho]인간 JS엔진 되기 1-6 this는 호출 때 결정된다.

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 : ()=..
CSS&JS/👀Study and Copy 2024.01.04

[별코딩]Promise.all .allSettled .any .race 예제로 비교하기

데모 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..
CSS&JS/👀Study and Copy 2024.01.03

[Kevin Powell]CSS,JS로 marquee 태그 같은 무한 스크롤 애니메이션 구현하기

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..
CSS&JS/👀Study and Copy 2023.10.04

[OnlineTutorials] 3d Carousel Slider(drag,touch,button)

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 아이템들을 중앙에 위치하..
CSS&JS/👀Study and Copy 2023.09.07

[Hyperplexed]클릭, 그리드 그라데이션 효과

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 "..
CSS&JS/👀Study and Copy 2023.07.12

[Hyperplexed]opacity, blur 효과 매직완드 갤러리

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..
CSS&JS/👀Study and Copy 2023.07.12

[Hyperplexed]패럴랙스 드래그 슬라이드

[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안에 상황을 저장하도..
CSS&JS/👀Study and Copy 2023.06.14

[HPP]hacker effect text 랜덤으로 다른문자열로 대체되는 텍스트 효과

[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이 중복으로 발생하지 않도록 플래그를..
CSS&JS/👀Study and Copy 2023.06.14

[Hyperplexed] 인터랙티브한 마우스 커서

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()를 사용하는거였다... 😯 정말 끝이 ..
CSS&JS/👀Study and Copy 2023.06.13

[RIPT][JS][CANVAS] canvas로 드래그 가능한 사각형/원 만들기

튜토리얼 사이트 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값이 더 높다 두..
CSS&JS/👀Study and Copy 2023.04.17

[JS] 자바스크립트 클래스 멀티 상속 (JavaScript Class Multiple Inheritance)

결론 : 아직 기본 기능엔 멀티 상속을 지원하지 않는다. 그래서 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 장점 : 멀티 상속의 개념을 쓸 수 있다! 단점 : 부품이 되는 클래스들은 모두 다시 한번 함수로 감싸..
CSS&JS/👀Study and Copy 2023.03.31

[WDS]open meteo OPEN API로 현재 지역 날씨 알려주는 웹 만들기(클론코딩)

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, ..
CSS&JS/👀Study and Copy 2023.02.02

[JS] vanilla JS로 Masonry Layout 구현하기(2)

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 ..
CSS&JS/👀Study and Copy 2023.01.25

[JS] vanilla JS로 Masonry Layout 구현하기(1)

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

[CSS+JS]3분할 슬라이드(2)

이전 버젼을 만들고 나니 원본이랑 움직임이 다르기에 수정해줌, + 이미지가 정중앙에 오도록 바꿔줌 이미지가 정중앙에 오도록 하는 방법 이미지는 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로 해야 빈화면이 안 보이더라고...머리로는 안 걸어도 될 것 같은데, 플래그 걸어놨음에도 불구하고 마구 움직이다보면 ..
CSS&JS/👀Study and Copy 2023.01.20

[CSS+JS] 3분할 슬라이드(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 ..
CSS&JS/👀Study and Copy 2023.01.18

[Hyperplexed][CSS,JS] 카드에 후레쉬(조명) 비친 효과 내기

원본 : 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의 값이 커질수록 테두리는 굵어..
CSS&JS/👀Study and Copy 2023.01.12

[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개여야 한다..
CSS&JS/👀Study and Copy 2023.01.10

[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/👀Study and Copy 2023.01.04

[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() ..
CSS&JS/👀Study and Copy 2022.12.30

[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..
CSS&JS/👀Study and Copy 2022.12.21

[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..
CSS&JS/👀Study and Copy 2022.12.16
1 2 3
더보기

티스토리툴바