[심화] 움직이는 띠지 배너 만들기 : 콘텐츠핏 브랜딩툴 팁

마케팅 툴

이런 움직이는 띠지 배너!

어떻게 만들까?

코딩을 몰라도 Chat-GPT(챗지피티)를 활용하면

3분만에 뚝딱 만들 수 있습니다.

💡 위 효과는 코드위젯을 활용합니다.

코드위젯은 Free 버전에서는 사용이 제한됩니다.

🔻🔻3분 영상으로 배워보기 🔻🔻

✅ 준비물

1) 챗지피티 (유료계정 추천)

2) 띠지 배너로 적용할 이미지(투명 배경 png)

3) 아임웹 (유료계정 or 전문가계정 sample 모드)

🔻🔻사용된 코드 🔻🔻

* 빨간색으로 표시된 부분을 수정하여 사용하세요.

<style>

.banner-wrapper {

background-color: #88181A;

overflow: hidden;

white-space: nowrap;

padding: 10px 0;

position: relative;

}

.banner-track {

display: inline-flex;

animation: scrollBanner 20s linear infinite; /* 속도 조정 */

}

.banner-item {

flex: 0 0 auto;

margin: 0 10px;

}

.banner-item img {

width: 180px; /* 5개가 한 줄에 보이도록 유지 */

height: auto;

}

@keyframes scrollBanner {

0% {

transform: translateX(0);

}

100% {

transform: translateX(-50%);

}

</style>

</div>

✅ 움직이는 속도를 수정하려면?

"챗지피티에게 띠지 움직이는 속도를 조금 늦춰줘" 라고 요청해보세요.

또는 animation: scrollBanner 15s linear infinite;

위 코드처럼 '초' 로 표시된 숫자를 바꿔보세요.

✅ 이미지 사이즈 수정하려면?

"챗지피티에게 이미지를 더 키워줘" or "이미지를 키우거나 줄이려면 어떤 부분을 수정하면 돼?" 라고 요청하거나 물어보세요.

또는 width: 180px; /* 5개가 한 줄에 보이도록 조정 */

위 코드처럼 'px' 단위 숫자를 찾아 바꿔보세요.

✅ 이미지가 끊긴다면?

위 이미지처럼, 이미지가 가득 채워지지 않고 여백이 생긴다면, "이미지를 N개 더 추가해줘" 라고 챗지피티에게 요청해보세요.

또는 코드에서, 이미지에 해당하는 부분의 코드를 복사해서 원하는 수량만큼 붙여 추가해보세요.

0

[기초] 비주얼섹션 버튼 만드는 방법 [심화] 텍스트위젯 밑줄 디자인 컬러, 두께 변경 코드

목록

아임웹[심화] 움직이는 띠지 배너 만들기