궁금한 게 있으시면 AI 챗봇에게 물어보세요.
오케스트로가 궁금하신가요?
주소가 궁금하신가요?
.test-wrapper {
display: flex;
justify-content: flex-end;
}
.text {
display: none;
opacity: 0;
transform: translateX(-50%);
transition: transform 0.5s ease, opacity 0.5s ease;
}
.text.slide-in {
display: block;
opacity: 1;
transform: translateX(0);
}
.text.slide-out {
display: block;
opacity: 0;
transform: translateX(50%);
}
.button-chatbot {
display: inline-block;
margin-left: 20px;
border: 1px solid gray;
}
.inner {
position: relative;
}
.button-close {
position: absolute;
left: 0;
top: 0;
display: none;
opacity: 0;
transform: translateX(-50%);
transition: transform 0.5s ease, opacity 0.5s ease;
margin-left: -70px;
border: 1px solid gray;
}
.button-close.slide-in {
display: block;
opacity: 1;
transform: translateX(0);
}
.button-close.slide-out {
display: block;
opacity: 0;
transform: translateX(50%);
}
$(document).ready(function () {
const $texts = $(‘.test-text .text’);
const $closeBtn = $(‘.button-close’);
const $inner = $(‘.inner’);
let index = 0;
let showText = true;
// 초기 상태
$texts.eq(index).addClass(‘slide-in’);
$closeBtn.addClass(‘slide-in’);
function rollingText() {
$texts.removeClass(‘slide-in slide-out’);
$closeBtn.removeClass(‘slide-in slide-out’);
if (showText) {
$texts.eq(index).addClass(‘slide-in’);
$closeBtn.addClass(‘slide-in’);
} else {
$texts.eq(index).addClass(‘slide-out’);
$closeBtn.addClass(‘slide-out’);
index = (index + 1) % $texts.length;
}
showText = !showText;
}
setInterval(rollingText, 5000);
// 닫기 버튼 클릭 시 .inner 숨기기
$closeBtn.on(‘click’, function () {
$inner.hide();
});
});
