스크립트 효과 질문이요~
관련링크
본문
이게 탭형식으로 되어 있는데요
시간차를 두고 번갈아 가면서 나오는 스크립트에요
탭 사용 안하고 하나로만 구현할려고 2개를 하나로 바꿨거든요
그런데 자꾸 번갈아 나오고 있어서 하나로 구현할려면 무얼 수정해야하나요?
<code>
// MAIN SPACE
space_rtt_t = 7000;
space_rtt = setInterval(function(){
$(".main_space").addClass("unicorn").delay(space_rtt_t/2).queue(function(){
$(this).removeClass("unicorn").dequeue();
});
}, space_rtt_t);
$('.main_space .change_btn .btn_wrap button').click(function(){
$('.main_space').toggleClass('unicorn');
clearInterval(space_rtt);
});
if($(window).width() > 1280 ){
let space_img_list = gsap.timeline({
scrollTrigger: {
trigger: '.main_space',
start: "top top",
end: "100%",
scrub: true,
pin: true,
pinnedContainer: '.main_space',
pinSpacing: true,
},
});
space_img_list
.to('.main_space .img_list ul',1,{x: "-100%", left: "100%"},'start1')
</code>
답변 2
다음과 같은 방법도 있으니 참고해서 원하시는 형식으로 구현해 보세요
let isUnicorn = false; // 변수 추가
function toggleUnicorn() {
isUnicorn = !isUnicorn;
if (isUnicorn) {
gsap.to('.main_space', 1, { x: 0, left: 0 });
} else {
gsap.to('.main_space', 1, { x: '-100%', left: '100%' });
}
}
// MAIN SPACE
space_rtt_t = 7000;
space_rtt = setInterval(toggleUnicorn, space_rtt_t);
$('.main_space .change_btn .btn_wrap button').click(function () {
isUnicorn = !isUnicorn;
toggleUnicorn();
clearInterval(space_rtt);
});
하나의 함수나 타임라인을 사용하여 스크립트를 번갈아 실행할 수 있습니다. 예를 들어, CSS 클래스를 추가/제거하는 대신 gsap을 사용하여 애니메이션을 제어할 수 있습니다
// MAIN SPACE
let space_rtt_t = 7000;
let isUnicorn = false;
function toggleSpaceUnicorn() {
isUnicorn = !isUnicorn;
if (isUnicorn) {
$(".main_space").addClass("unicorn");
} else {
$(".main_space").removeClass("unicorn");
}
}
setInterval(toggleSpaceUnicorn, space_rtt_t);
if ($(window).width() > 1280) {
let space_img_list = gsap.timeline({
scrollTrigger: {
trigger: '.main_space',
start: "top top",
end: "100%",
scrub: true,
pin: true,
pinnedContainer: '.main_space',
pinSpacing: true,
},
});
space_img_list.to('.main_space .img_list ul', 1, {
x: "-100%",
left: "100%"
}, 'start1');
}
