728x90 반응형 애니메이션3 [chatGPT] 챗지피티한테 코딩 배우기 codepen을 살펴보다가 마음에 드는 자바스크립트 효과를 발견했다. https://codepen.io/Hyperplexed/pen/KKBjvbG Glowing Blob Effect ... codepen.io 마우스 포인터를 따라서 그라디언트 blob (방울)이 움직이는 애니메이션이다. 그런데 코드펜 코드는 100vh 풀스크린을 기준으로 작성되어서 긴 페이지에도 적용되게 코드를 수정해보고싶었다. 그러나 100vh를 풀고 그냥 컨텐츠 길이를 늘려봤더니 스크린 높이 안에서만 방울이 움직였다. 뭐가 문젠데.. ㅣㅅㅇ)... chatGPT를 써보자 챗지피티한테 같은 기능의 코드를 요청했다. 나: 요소가 마우스 포인터를 따라다니는 스크립트 어떻게 만들어? 친절하게 알려줌 하지만 이 코드는 사실상 코드펜과 같은 코.. 2023. 4. 28. [HTML/SCSS/JS] Spliting.js 및 transformation 연습 이 것의 주제는 무엇인가 나도 알 수 없다 해리포터 신문지 보고 문득 움직이는 신문지를 만들고싶어져서 시도해봤다. HARRY POTTER 부분은 SVG로, UNDESIRABLE은 Splitting.js로, No.1 부분은 이미지로 마크업해 각각 애니메이션을 주었다. 신문지에 마우스를 오버하면 타이틀에 matrix3D transformation이 일어남 Splitting.js는 Codepen의 Shaw라는 분의 코드를 활용했다. 이미지는 그냥 늘어지다가 사라지며, 바디 배경이 바뀌고 커서에 해리포터 이미지 url을 넣었다. 정말 이것저것 해본 잡스러운 애니메이팅 연습ㅋㅋㅋㅋㅋ See the Pen splitting.js practice by sel (@wimmwell) on CodePen. 2023. 1. 30. [HTML/CSS] background-clip으로 배경이미지 텍스트 만들기 HTML 삽입 미리보기할 수 없는 소스 이걸 뭐라고 설명해야하지? 아무튼 배경 이미지로부터 텍스트 모양대로 클립해서 배경은 감추고 텍스트에만 이미지가 들어가는 코드이다. background-clip:text 속성으로 구현 가능하며, 나는 애니메이션 CSS와 제이쿼리를 이용해 마우스오버시 배경이미지와 텍스트가 바뀌게 응용해봤다. 2022. 11. 29. 이전 1 다음 728x90 반응형
