근데 이거은 어떻게 하는 거에요...이거 계속 질문(?) 올릴까 말까 망설이다가...올려봅니다.
그누보드7 오픈베타 배너에 이런 원, 사각형 들이 떠다니는데...
소스를 봐도 어디서 왔는지 못찾겠더라구요...혹시 아시는 분(?)???
한수 가르쳐주세용...제 사이트에 적용하고 싶은뎅....어디서 떠다니는지 좀체로 못찾겠네용...
그누보드7 오픈베타 배너에 이런 원, 사각형 들이 떠다니는데...
소스를 봐도 어디서 왔는지 못찾겠더라구요...혹시 아시는 분(?)???
한수 가르쳐주세용...제 사이트에 적용하고 싶은뎅....어디서 떠다니는지 좀체로 못찾겠네용...
|
댓글을 작성하시려면 로그인이 필요합니다.
댓글 20개
이미지의 댓글에서도 언급되었듯이, 최근에는 Lottie나 SVG 애니메이션을 사용하여 가볍고 선명하게 구현하는 것이 추세입니다. 직접 구현하시려면 아래 세 가지 방법 중 하나를 추천합니다.
1. Lottie 애니메이션 (가장 권장)
디자인 툴(애프터 이펙트 등)에서 만든 움직이는 도형을 JSON 파일로 내보내 웹에 삽입하는 방식입니다.
- 장점: 매우 가볍고 화질 저하가 없으며, 정교한 움직임이 가능합니다.
- 적용:
2. CSS 애니메이션 (lottie-player스크립트를 사용하여 배경 레이어에 배치합니다.@keyframes)간단한 원이나 사각형의 움직임이라면 외부 라이브러리 없이 CSS만으로 가능합니다.
div로 도형을 만들고animation속성으로translate(이동)나rotate(회전)를 줍니다.모델 따라 생성 수준이 다를 것 같은데 저는 GPT-5.4 High 모델로 작업했습니다.
<div style="position: relative; width: 100%; height: 500px; background: #f8fafc; overflow: hidden;">
<div class="moving-bg">
<div class="shape circle"></div>
<div class="shape square"></div>
<div class="shape triangle"></div>
</div>
<!-- 내용이 들어갈 자리 -->
<div style="position: relative; z-index: 1; text-align: center; padding-top: 100px;">
<h2>도형이 움직이는 배경 테스트</h2>
<p>도형이 보인다면 성공입니다!</p>
</div>
</div>
<style>
.moving-bg {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
z-index: 0; /* 배경 레이어 */
}
.shape {
position: absolute;
opacity: 0.5; /* 좀 더 진하게 수정 */
background: #4FC3F7;
animation: float 10s infinite alternate ease-in-out;
}
/* 위치를 각각 다르게 조정 */
.circle { width: 120px; height: 120px; border-radius: 50%; top: 10%; left: 15%; background: #ff7043; }
.square { width: 80px; height: 80px; top: 60%; left: 75%; background: #4fc3f7; animation-duration: 15s; }
/* 세모 추가 (도형을 더 다채롭게) */
.triangle {
width: 0; height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 86px solid #ffca28;
background: transparent; /* 배경색 제거 */
top: 30%; left: 50%;
animation-duration: 12s;
}
@keyframes float {
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
100% { transform: translate(100px, 50px) rotate(180deg) scale(1.2); }
}
</style>
지금 적용해보겠습니당...^ㅠ^~~~
감사감사~~~!!! ㅎㅠㅎ;;;
사용자: 어떻게 하는거냐? 쏼라쏼라 .... 부탁해요~ 아잉~
구골: 작업 결과 시전. 대충 던져줌.
사용자: 만지작, 만지작 ....
결과물. 끝.
결과물 상단부 > https://ysmoto.kr/ys2/bbs/board.php?bo_table=basicpt
그냥 배경 으로 > https://ysmoto.kr/ys2/bbs/board.php?bo_table=basicpt1
* 덕분에 제가 ... 업그레이드(?) 한듯.
화이팅~~~!!!
<div class="header-animation-wrapper" style="position: absolute; top: 0; left: 0; width: 100%; height: 300px; overflow: hidden; pointer-events: none; z-index: 1;">
<div class="moving-bg">
<!-- 도형 개수를 늘리고 클래스를 분리했습니다 -->
<div class="shape circle c1"></div>
<div class="shape circle c2"></div>
<div class="shape square s1"></div>
<div class="shape square s2"></div>
<div class="shape triangle t1"></div>
<div class="shape triangle t2"></div>
</div>
</div>
<style>
.header-animation-wrapper { pointer-events: none; }
.moving-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.shape {
position: absolute;
opacity: 0.15; /* 개수가 많아졌으므로 더 투명하게 */
animation: float 12s infinite alternate ease-in-out;
}
/* --- 작은 원형 입자 --- */
.circle { border-radius: 50%; filter: blur(10px); background: #00d2ff; }
.c1 { width: 40px; height: 40px; top: 10%; left: 15%; animation-duration: 14s; }
.c2 { width: 25px; height: 25px; top: 60%; left: 40%; animation-duration: 18s; background: #4fc3f7; }
/* --- 작은 사각형 입자 --- */
.square { filter: blur(5px); background: #9d50bb; }
.s1 { width: 30px; height: 30px; top: 40%; left: 75%; animation-duration: 22s; }
.s2 { width: 20px; height: 20px; top: 20%; left: 85%; animation-duration: 16s; background: #6a11cb; }
/* --- 작은 삼각형 입자 --- */
.triangle {
width: 0; height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-bottom: 35px solid #f2cf43;
background: transparent;
}
.t1 { top: 15%; left: 50%; animation-duration: 20s; opacity: 0.1; }
.t2 { top: 70%; left: 20%; animation-duration: 25s; opacity: 0.08; transform: scale(0.7); }
@keyframes float {
0% { transform: translate(0, 0) rotate(0deg) scale(1); }
100% { transform: translate(40px, 30px) rotate(180deg) scale(1.2); }
}
</style>
이렇게 해도 될겁니다
이미지 + 블렌드모드 파티클 합성 - SIR - 개발자 커뮤니티