Question

我已经把我的擦拭与ScrollMagic一起使用了，但我试图在中心有黑色和白色的“Waffless”，这样当用户滚动并且擦拭左侧覆盖黑色版本时，而是显示白色版本。

不确定这是否有意义。希望有人可以提供帮助

https://codepen.io/gabriel-dean-olivar/pen/rKObaB

HTML

<div id="pinContainer">
  <section class="panel one"><img class="logo_pos" src="http://gabrieldeanolivar.com/Waffless/i/logo_main.svg" id="logo_b"/></section>
  <section class="panel two"><img class="logo_pos" src="http://gabrieldeanolivar.com/Waffless/i/logo_main_w.svg" id="logo_w"/></section>
</div>
<section class="panel three"></section>

CSS

html, body {
  margin: 0;
  height: 100%;
}

#pinContainer {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.logo_pos {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 80%;
  position: absolute;
}

.panel {
  width: 100%;
  height: 100%;
  position: absolute;
}

.one {
  background: #ccc;
}

.two {
  background: #f7b284;
}

Scrollmagic和Greensock

var controller = new ScrollMagic.Controller();

var wipeLeft = new TimelineMax()
  .fromTo('section.panel.two', 1, {
    x: "-50%"
  }, {
    x: "0%",
    ease: Linear.easeNone
  });

var scene = new ScrollMagic.Scene({
  triggerElement: "#pinContainer",
  triggerHook: "onLeave",
  duration: "100%"
})
.setPin("#pinContainer")
.setTween(wipeLeft)
.addTo(controller);

Scrollmagic Wipe Mask或Clip Path

0 个答案: