[chatGPT] 챗지피티한테 코딩 배우기 2탄 (실패)

 

~지난 이야기~
'마우스 포인터를 따라서 그라디언트 blob (방울)이 움직이는 애니메이션이다.
그런데 코드펜 코드는 100vh 풀스크린을 기준으로 작성되어서 긴 페이지에도 적용되게 코드를 수정해보고싶었다.
그러나 100vh를 풀고 그냥 컨텐츠 길이를 늘려봤더니 스크린 높이 안에서만 방울이 움직였다.'
.
.
그리하여 챗지피티를 통해 풀스크린 페이지가 아닌 경우에도 이 효과를 사용하기 위한 챗지피티 여정이 시작되었다.
 
https://selinak.tistory.com/61
 
 
여러분 그거 아십니까?
정답은 멀리 있지않습니다.
존나 멀리있습니다.
 
넝담..이고
정답은 등잔밑에 있었답니다.
 
챗지피티한테 물어가며 열차례 넘게 질답을 반복하며 코드 시행착오(라 부르고 삽질이라 읽음)을 거쳤는데

 
아무리 해도 내가 원하는 결과물이 나오지 않았음.
긴 body 영역 안에서 움직이게 하는게 이렇게 힘든건가???
그러다가 문득 '배경으로 뷰포트 크기의 div를 만들어 고정하고 그 안에서만 움직인다면..?' 하는 단순한 생각이 들었음
 
그리고...
 

넵 결국 제 해답은 자바스크립트가 아니고 CSS였습니다.
 

.back {
  position: fixed;
  inset: 0;
  z-index: -1;
}
#blob {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  height: 34vmax;
  border-radius: 50%;
  background-color: white; /* fallback */
  background-image: linear-gradient(to right, aquamarine, mediumpurple);
  animation: blobRotate 16s infinite;
  opacity: 0.8;
  filter: blur(12vmax);
  z-index: -1;
}

 
blob을 back이라는 div로 감싸고 .back을 고정시켰더니 스크롤을 내려도 커서를 움직여도 완벽
자바스크립트로도 분명 같은 효과를 구현할 수 있을텐데 왜 어렵게만 생각했을까? CSS로 하니 이렇게 간단한 것을.
결국은 챗지피티에게 도움 받지 못하고 얼렁뚱땅 혼자 해결했다는 사실