160 lines
4.6 KiB
JavaScript
160 lines
4.6 KiB
JavaScript
document.addEventListener("DOMContentLoaded", (event) => {
|
|
// ---------------------------------------------
|
|
// js__fixLeft 오른쪽에 따라 왼쪽 내용 변하기
|
|
// 사용 클래스 : js__fixLeft_tit, js__fixLeft_bg, js__fixLeft_sec
|
|
// ---------------------------------------------
|
|
gsap.registerPlugin(ScrollTrigger);
|
|
|
|
const tits = document.querySelectorAll(".js__fixLeft_tit");
|
|
const bgs = document.querySelectorAll(".js__fixLeft_bg");
|
|
const sections = document.querySelectorAll(".js__fixLeft_secs > div");
|
|
|
|
|
|
function bgOnEnter(element) {
|
|
gsap.to(element, {
|
|
transform: "scale(1.05)",
|
|
duration: 0.5
|
|
});
|
|
}
|
|
|
|
function bgOnLeave(element) {
|
|
gsap.to(element, {
|
|
transform: "scale(1)",
|
|
duration: 0.5
|
|
});
|
|
}
|
|
|
|
function titOnEnter(element) {
|
|
gsap.to(element, {
|
|
opacity: 1,
|
|
transform: "scale(1) translate(0%, 0%)",
|
|
duration: 0.5
|
|
});
|
|
}
|
|
|
|
function titOnLeave(element) {
|
|
gsap.to(element, {
|
|
opacity: 0.5,
|
|
transform: "scale(0.7) translate(-47%, 0%)",
|
|
duration: 0.5
|
|
});
|
|
}
|
|
|
|
function updateElements(index) {
|
|
bgs.forEach((bg, i) => {
|
|
if (i === index) {
|
|
bg.classList.add("on");
|
|
bgOnEnter(bg);
|
|
} else {
|
|
bg.classList.remove("on");
|
|
bgOnLeave(bg);
|
|
}
|
|
});
|
|
|
|
tits.forEach((tit, i) => {
|
|
if (i === index) {
|
|
tit.classList.add("on");
|
|
titOnEnter(tit);
|
|
} else {
|
|
tit.classList.remove("on");
|
|
titOnLeave(tit);
|
|
}
|
|
});
|
|
}
|
|
|
|
ScrollTrigger.create({
|
|
trigger: sections[0],
|
|
start: "center top",
|
|
// markers: true,
|
|
onEnter: () => updateElements(0),
|
|
onLeaveBack: () => updateElements(0)
|
|
});
|
|
|
|
ScrollTrigger.create({
|
|
trigger: sections[1],
|
|
start: "center center",
|
|
//markers: true,
|
|
onEnter: () => updateElements(1),
|
|
onLeaveBack: () => updateElements(1)
|
|
});
|
|
|
|
ScrollTrigger.create({
|
|
trigger: sections[2],
|
|
start: "center bottom",
|
|
// markers: true,
|
|
onEnter: () => updateElements(2),
|
|
onLeaveBack: () => updateElements(2)
|
|
});
|
|
|
|
});
|
|
|
|
// 고정 슬라이드
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
const route = document.querySelector('.route');
|
|
const sections = route.querySelectorAll('#sec1, #sec2, #sec3');
|
|
const tabs = route.querySelectorAll('.tabs li');
|
|
const subs = route.querySelectorAll('.subs li');
|
|
const imgs = route.querySelectorAll('.imgs li');
|
|
|
|
const observerOptions = {
|
|
root: null,
|
|
rootMargin: '20px',
|
|
threshold: 0.5
|
|
};
|
|
|
|
const observerCallback = (entries) => {
|
|
entries.filter(entry => entry.isIntersecting).forEach(entry => {
|
|
const id = entry.target.id;
|
|
[tabs, subs, imgs].forEach(group =>
|
|
group.forEach((el, index) =>
|
|
el.classList.toggle('on', id === `sec${index + 1}`)
|
|
)
|
|
);
|
|
});
|
|
};
|
|
|
|
const observer = new IntersectionObserver(observerCallback, observerOptions);
|
|
sections.forEach(section => observer.observe(section));
|
|
});
|
|
|
|
|
|
// 듀얼모니터 시퀀스 애니메이션
|
|
$(function(){
|
|
|
|
// define images
|
|
var images = Array();
|
|
|
|
for (let i = 1; i < 105; i++) {
|
|
images.push(`../img/com_img/comp_${i}.png`);
|
|
}
|
|
|
|
// TweenMax can tween any property of any object. We use this object to cycle through the array
|
|
var obj = {curImg: 0};
|
|
|
|
// create tween
|
|
var tween = TweenMax.to(obj, 1,
|
|
{
|
|
curImg: images.length - 1, // animate propery curImg to number of images
|
|
roundProps: "curImg", // only integers so it can be used as an array index
|
|
// repeat 3 times
|
|
immediateRender: true, // load first image automatically
|
|
ease: Linear.easeNone, // show every image the same ammount of time
|
|
onUpdate: function () {
|
|
$("#myimg").attr("src", images[obj.curImg]); // set the image source
|
|
}
|
|
}
|
|
);
|
|
|
|
// init controller
|
|
var controller = new ScrollMagic.Controller();
|
|
|
|
// build scene
|
|
var scene = new ScrollMagic.Scene({triggerElement: "#dualm", duration: 2500, triggerHook: 0})
|
|
.setTween(tween)
|
|
.setPin('#dualm')
|
|
//.addIndicators() // add indicators (requires plugin)
|
|
.addTo(controller);
|
|
|
|
});
|
|
|