그냥 개발자 블로그

gsap 활용 가로스크롤 구현 팁 본문

퍼블리싱팁

gsap 활용 가로스크롤 구현 팁

마음이파파 2022. 3. 16. 10:55 
<!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 워크식스

저작자표시 비영리 변경금지

'퍼블리싱팁' 카테고리의 다른 글

gsap 활용 세로스크롤 팁  (0) 2022.03.16
갤럭시 폴드 웹 반응형 가로사이즈  (0) 2020.12.07
[워크식스] CSS만으로 마우스 애니메이션 만들기  (0) 2018.12.06
[워크식스] CSS만 이용해서 움직이는 화살표 버튼 만들기  (0) 2018.11.08
[워크식스] CSS만 이용해서 로딩 애니메이션 만들기  (0) 2018.10.14
'퍼블리싱팁' Related Articles more