Предотвратить упругую прокрутку с ScrollMagic - PullRequest
Новая
       83

Предотвратить упругую прокрутку с ScrollMagic

0 голосов
/ 24 октября 2018

Я пытаюсь создать способ увеличения масштаба изображения с помощью прокрутки, используя ScrollMagic и TweenMax вместо стандартного режима прокрутки вниз по странице.Все работает так, как я хочу.Я даже добавил этот скрипт , чтобы сделать прокрутку более плавной при использовании колесика мыши.

Хотя я испытываю эффект прокрутки резинкой / упругой прокрутки на контейнере сцены ScrollMagic,Я не уверен, что вызывает это.Я попытался добавить #wrapper div ко всему документу в качестве первых дочерних элементов к body, а затем добавил overflow:hidden; к body и html.Но я не уверен, как заставить ScrollMagic слушать прокрутку на этом элементе #wrapper вместо body.

Вот код: 

$(function() {
  var $window = $(window);
  var scrollTime = 2;
  var scrollDistance = 500;

  $window.on("mousewheel DOMMouseScroll", function(event) {
    event.preventDefault();

    var delta =
      event.originalEvent.wheelDelta / 120 || -event.originalEvent.detail / 3;
    var scrollTop = $window.scrollTop();
    var finalScroll = scrollTop - parseInt(delta * scrollDistance);

    TweenMax.to($window, scrollTime, {
      scrollTo: { y: finalScroll, autoKill: true },
      ease: Power1.easeOut,
      overwrite: 5
    });
  });
});

var zIndex = $(".panel").length;

$(".panel").each(function() {
  $(this).css({
    "z-index": --zIndex
  });
});

function onResize() {
  var windowW = $(window).width();
  var windowH = $(window).height();
  $("#pinContainer").width(windowW);
  $("#pinContainer").height(windowH);
  $(".panel").width(windowW);
  $(".panel").height(windowH);
}

onResize();

$(window).on("resize", function() {
  onResize();
});

$(function() {
  // wait for document ready
  // init
  var controller = new ScrollMagic.Controller();

  // define movement of panels
  var wipeAnimation = new TimelineMax()
    // animate to second panel
    .to(["#1 .inner"], 10, { z: -500 }, "in1")
    .to(["#1 .overlay"], 10, { z: 100 }, "in1")
    .to(["#1 #flower-top-left"], 10, { x: -100, z: 25 }, "in1")
    .to(["#1 #flower-top-right"], 10, { x: 200 }, "in1")
    .to(["#1 #flower-bottom-left"], 10, { x: -25, y: 75, z: 75 }, "in1")
    .to(["#1 #flower-bottom-center"], 10, { y: 100 }, "in1")
    .to(["#1 .inner"], 10, { autoAlpha: 0 }, "out1")
    .to(["#1 .overlay"], 10, { autoAlpha: 0, z: 200 }, "out1")

    // animate to second panel
    .to(["#2 .inner"], 10, { z: -500 }, "=-1") // move back in 3D space
    .to(["#2 .inner"], 10, { autoAlpha: 0 }) // move back to origin in 3D space

    // animate to second panel
    .to("#3", 5, { autoAlpha: 1 }) // move back in 3D space
    .to("#3", 5, { autoAlpha: 0 }) // move back to origin in 3D space

    // animate to second panel
    .to("#4", 5, { autoAlpha: 1 }) // move back in 3D space
    .to("#4", 5, { autoAlpha: 0 }); // move back to origin in 3D space

  // create scene to pin and link animation
  new ScrollMagic.Scene({
    triggerElement: "#pinContainer",
    triggerHook: "onLeave",
    duration: "300%"
  })
    .setPin("#pinContainer")
    .setTween(wipeAnimation)
    .addIndicators() // add indicators (requires plugin)
    .addTo(controller);
});
* {
  padding: 0;
  margin: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  backfacevisibility: hidden;
}
html {
  font-size: 100%;
  overflow: hidden;
}
body {
  overflow: hidden;
  width: 100%;
  height: 100%;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-family: Optima;
}
* {
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
#wrapper {
  overflow: scroll;
}
#pinContainer {
  overflow: auto;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
}
#slideContainer {
  width: 100%;
  height: 100%;
}
.panel {
  height: 100%;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
.inner {
  width: 100%;
  height: 100%;
  position: absolute;
  text-align: center;
}
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999999;
}
.image-product {
  max-height: 100%;
  max-width: 100%;
  width: auto;
  height: auto;
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.flower {
  position: absolute;
}
.flower .flower-inner {
  position: relative;
  width: 100%;
  height: 0;
  background-size: contain;
  background-repeat: no-repeat;
}
#flower-top-left {
  width: 29%;
  top: 0;
  left: 0;
}
#flower-top-left .flower-inner {
  background-color: red;
  padding-top: 196.50655%;
}
#flower-top-right {
  width: 45%;
  top: 0;
  right: 0;
}
#flower-top-right .flower-inner {
  background-color: #00f;
  padding-top: 100.74166%;
}
#flower-bottom-left {
  width: 35%;
  bottom: 0;
  left: 0;
}
#flower-bottom-left .flower-inner {
  background-color: green;
  padding-top: 134.53888%;
}
#flower-bottom-center {
  width: 35%;
  bottom: 0;
  left: 30%;
}
#flower-bottom-center .flower-inner {
  background-color: #ff0;
  padding-top: 81.99052%;
}
#flower-bottom-right {
  width: 25%;
  bottom: 0;
  right: 0;
}
#flower-bottom-right .flower-inner {
  background-color: purple;
  padding-top: 134.98452%;
}
<div id="wrapper">
	<div id="pinContainer">
		<section class="panel blue" id="1">
			<div class="overlay">
				<div class="overlay-inner">
					<div class="flower" id="flower-top-left">
						<div class="flower-inner"></div>
					</div>
					<div class="flower" id="flower-top-right">
						<div class="flower-inner"></div>
					</div>
					<div class="flower" id="flower-bottom-left">
						<div class="flower-inner"></div>
					</div>
					<div class="flower" id="flower-bottom-center">
						<div class="flower-inner"></div>
					</div>
					<div class="flower" id="flower-bottom-right">
						<div class="flower-inner"></div>
					</div>
				</div>
			</div>
			<div class="inner">
				<img class="image-product" src="https://via.placeholder.com/350x150" alt="">
			</div>
		</section>
		<section class="panel turqoise" id="2">
			<div class="inner">
				<img class="image-product" src="https://via.placeholder.com/350x150" alt="">
			</div>
		</section>
		<section class="panel green" id="3">
			<div class="inner">
				<img class="image-product" src="https://via.placeholder.com/350x150" alt="">
			</div>
		</section>
		<section class="panel bordeaux" id="4">
			<b>FOUR</b>
		</section>
	</div>
</div>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
	<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js"></script>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.2/plugins/ScrollToPlugin.min.js'></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.0/ScrollMagic.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.0/plugins/animation.gsap.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.0/plugins/debug.addIndicators.js"></script>

Кто-нибудь знает, как предотвратить такое поведение с резинкой?

...