HD현대건설기계의 모바일 웹은 세로화면에 최적화되어 있습니다.
// 2024-03-08 스크립트 수정
// 2024-03-12 스크립트 수정
var _thisScroll = 0;
var _isScrollTop;
if ($(window).scrollTop() > $(".intro .con2").offset().top) {
$("#subBody").removeClass("wide");
}
$(window).on("scroll", function () {
_isScrollTop = $(window).scrollTop();
if (_isScrollTop > _thisScroll) { // down
if (_isScrollTop > 0) {
if ($(window).scrollTop() > $(".intro .con2").offset().top) {
$(".intro .con1").addClass("scroll");
}
}
}
if (_isScrollTop < _thisScroll) { // up
if ($(window).scrollTop() < $(".intro .con2").offset().top) {
$(".intro .con1").removeClass("scroll");
$("#subBody").addClass("wide");
$("#subBody h2 p").css("opacity" , "0").css("transform" , "translate(0px, -500px)");
}
}
_thisScroll = _isScrollTop;
}); $(window).scroll();
gsap.fromTo("#subBody h2 p",{ transform: 'translate(0, 100px)', opacity: 0, ease: Power3.easeOut }, { duration: 0.8, 'transform': 'translate(0, 0)', opacity: 1, ease: Power3.easeOut});
gsap.fromTo("#subBody h2 p",
{
duration: 0.8,
transform: 'translate(0, 0)',
opacity: 1,
ease: Power3.easeOut
},
{
scrollTrigger: {
trigger: ".intro .con1",
start: "top top",
end: "+=95%",
scrub: 1,
},
y: -500,
opacity: 0,
}
);
ScrollTrigger.matchMedia({
"(min-width: 1025px)": function() {
gsap.to(".intro .con1 .bg", {
scrollTrigger: {
trigger: ".intro .con1",
start: "top top",
end: "+=150%",
// markers: true,
scrub : 1,
},
y : -500,
// width: "100%",
height: "1200rem"
});
gsap.to(".intro .con2 .deco", {
scrollTrigger: {
trigger: ".intro .con1",
start: "215% bottom",
end: "215% bottom",
// markers: true,
scrub : 1,
},
'transform': 'skew(0, 0deg)'
});
},
"(max-width: 1024px)": function() {
gsap.to(".intro .con1 .bg", {
scrollTrigger: {
trigger: ".intro .con1",
start: "top top",
end: "+=70%",
// markers: true,
scrub : 1,
},
y : -200,
// width: "100%",
height: "100vh"
});
gsap.to(".intro .con2 .deco", {
scrollTrigger: {
trigger: ".intro .con1",
start: "235% bottom",
end: "235% bottom",
// markers: true,
scrub : 1,
},
'transform': 'skew(0, 0deg)'
});
},
});
gsap.to(".intro .con1 .inner", {
scrollTrigger: {
trigger: ".intro .con1",
start: "top top",
end: "+=150%",
// markers: true,
scrub : 1,
},
y : -700,
opacity: 0,
});