<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="ko">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="sample.css?v=2" />
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" />
</head>
<body>
<header><img src="/img/w_top.png"></header>
<div id="scrollbar">
<div class="wrapper d-flex flex-nowrap">
<section class="section section--large flex-shrink-0 vw-100 vh-100 d-flex justify-content-center align-items-center">
<video poster="" src="/img/movie.mp4" loop="" muted="" playsinline="" autoplay=""></video>
</section>
<section id="sectionOne" class="section section--large flex-shrink-0 vw-100 vh-100 d-flex justify-content-center align-items-center">
<img src="/img/w_01_2.jpg">
<img src="/img/word2.png" id="word2"/>
</section>
<section id="sectionTwo" class="section section--dark section--small vh-100 flex-shrink-0 d-flex justify-content-center align-items-center">
<img src="/img/w_02.jpg">
<span id="drop"><img src="/img/drop.jpg"></span>
</section>
<section class="section section--small vh-100 flex-shrink-0 d-flex justify-content-center align-items-center">
<img src="/img/w_03.jpg" id="history">
</section>
<section class="section section--large flex-shrink-0 vw-100 vh-100 d-flex justify-content-center align-items-center">
<img src="/img/w_04.jpg">
</section>
<section class="section section--large flex-shrink-0 vw-100 vh-100 d-flex justify-content-center align-items-center">
<img src="/img/w_05_2.jpg"/>
<img src="/img/word.png" id="word"/>
</section>
<section class="section section--large flex-shrink-0 vw-100 vh-100 d-flex justify-content-center align-items-center">
<img src="/img/w_06.jpg">
</section>
<section class="section section--large flex-shrink-0 vw-100 vh-100 d-flex justify-content-center align-items-center">
<img src="/img/w_07.jpg">
</section>
<section class="section section--large flex-shrink-0 vw-100 vh-100 d-flex justify-content-center align-items-center">
<img src="/img/w_08.jpg">
</section>
<section class="section section--large flex-shrink-0 vw-100 vh-100 d-flex justify-content-center align-items-center">
<img src="/img/w_09.jpg">
</section>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.6.0/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/ScrollTrigger.min.js"></script>
<script src="https://unpkg.com/smooth-scrollbar@latest/dist/smooth-scrollbar.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/smooth-scrollbar/8.3.1/plugins/overscroll.js"></script>
<script>
gsap.registerPlugin(ScrollTrigger);
const scrollbar = document.querySelector("#scrollbar");
class HorizontalScrollPlugin extends Scrollbar.ScrollbarPlugin {
static pluginName = "horizontalScroll";
transformDelta(delta, fromEvent) {
if (!/wheel/.test(fromEvent.type)) {
return delta;
}
const { x, y } = delta;
return {
y: 0,
x: Math.abs(x) > Math.abs(y) ? x : y
};
}
}
Scrollbar.use(HorizontalScrollPlugin, OverscrollPlugin);
const myHorizontalScrollbar = Scrollbar.init(scrollbar);
myHorizontalScrollbar.setPosition(0, 0);
ScrollTrigger.scrollerProxy(scrollbar, {
scrollLeft(value) {
if (arguments.length) {
myHorizontalScrollbar.scrollLeft = value;
}
return myHorizontalScrollbar.scrollLeft;
},
getBoundingClientRect() {
return {
top: 0,
left: 0,
width: window.innerWidth,
height: window.innerHeight
};
}
});
myHorizontalScrollbar.addListener(ScrollTrigger.update);
//
//
// const buttons = document.querySelectorAll("button");
// buttons.forEach((btn, index) => {
// gsap.to(btn, {
// scrollTrigger: {
// id: `btn--round-${index}`,
// trigger: btn,
// toggleClass: "enable",
// markers: true,
// horizontal: true,
// scroller: scrollbar,
// refreshPriority: -1,
// start: "0 80%",
// end: "0 20%"
// }
// });
// });
gsap.to("#drop",{
scrollTrigger: {
trigger: "#drop",
//toggleClass: "action",
// markers: true,
horizontal: true,
scroller: scrollbar,
refreshPriority: -1,
start: "0 50%",
end: "0 20%",
toggleActions: "restart none reverse none"
},
y: "25%"
});
gsap.to("#history",{
scrollTrigger: {
trigger: "#history",
//toggleClass: "action",
// markers: true,
horizontal: true,
scroller: scrollbar,
refreshPriority: -1,
start: "0 50%",
end: "0 20%",
toggleActions: "restart none reverse none"
},
opacity: "100%"
});
gsap.to("#word",{
scrollTrigger: {
trigger: "#word",
//toggleClass: "action",
// markers: true,
horizontal: true,
scroller: scrollbar,
refreshPriority: -1,
start: "0 70%",
end: "0 20%",
toggleActions: "restart none reverse none"
},
x:"-39%"
});
gsap.to("#word2",{
scrollTrigger: {
trigger: "#word2",
//toggleClass: "action",
// markers: true,
horizontal: true,
scroller: scrollbar,
refreshPriority: -1,
start: "0 70%",
end: "0 20%",
toggleActions: "restart none reverse none"
},
x:"-39%"
});
// Only necessary to correct marker position - not needed in production
if (document.querySelector(".gsap-marker-scroller-start")) {
const markers = gsap.utils.toArray('[class *= "gsap-marker"]');
myHorizontalScrollbar.addListener(({ offset }) => {
// gsap.set(markers, { marginLeft: -offset.x });
});
}
</script>
</html>
copyright 2022 워크식스