scrollTrigger 모바일에서 이미지가 안 먹혀요 ㅠㅠ
본문
scrollTrigger 사용해서 스크롤시 해당섹션에 왔을 때 이미지와 글자 색상이 바뀌게 구현을 했는데
pc에서는 잘 되는데 모바일 핸드폰(사파리)에서는 이미지 색상이 안 바뀝니다 ㅠㅠ 아시는 분 계신가요 ㅠㅠ
var brand_value = gsap.timeline({
scrollTrigger: {
trigger: "#main_contents_wr00",
start: "top-=600",
end: "bottom-=100% top",
scrub: 0.5,
}
})
.to("#main_contents_wr00 .text_box .text01 .co_text", {
color: "#FF9F00"
})
.to("#main_contents_wr00 .text_box .text .co_icon01 > img", {
filter: "brightness(1) invert(0)"
}, "-=0.5")
.to("#main_contents_wr00 .text_box .text02 .co_text", {
color: "#FF9F00"
})
.to("#main_contents_wr00 .text_box .text .co_icon02 > img", {
filter: "brightness(1) invert(0)"
}, "-=0.5")
.to("#main_contents_wr00 .text_box .text03 .co_text", {
color: "#FF9F00"
})
.to("#main_contents_wr00 .text_box .text04 .co_text", {
color: "#FF9F00"
})
.to("#main_contents_wr00 .text_box .text .co_icon03 > img", {
filter: "brightness(1) invert(0)"
}, "-=0.5")
소스입니다 ㅠㅠ
답변 2
모바일 Safari에서 이미지 색상이 바뀌지 않는 문제는 `filter` 속성에 대한 Safari의 알려진 문제 때문일 수 있습니다. Safari는 `filter` 속성을 지원하지만 일부 필터 값에는 제대로 작동하지 않습니다. 이 문제를 해결하려면 `filter` 속성 대신 `color-filter` 속성을 사용하세요. `color-filter` 속성은 Safari에서 더 잘 지원됩니다.
// 기존 코드 생략 ...
.to("#main_contents_wr00 .text_box .text .co_icon01 > img", {
colorFilter: "brightness(1) invert(0)"
}, "-=0.5")
.to("#main_contents_wr00 .text_box .text .co_icon02 > img", {
colorFilter: "brightness(1) invert(0)"
}, "-=0.5")
.to("#main_contents_wr00 .text_box .text .co_icon03 > img", {
colorFilter: "brightness(1) invert(0)"
}, "-=0.5")
// 기존 코드 생략 ...
상단에
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.3/gsap.min.js"></script>
라이브러리 추가 해보세요.
#main_contents_wr00 .text_box .text .co_icon02 > img
이미지가 SVG 인가요?
https://developer.mozilla.org/ko/docs/Web/CSS/filter
- 사파리에서 SVG 객체에는 필터를 사용할 수 없습니다, 선택자를 변경하세요.
도움이 되셨다면 채택 한번 부탁드립니다^^
