Question

使用TimelineMax进行转换时，图像之间存在巨大空间。有没有解决方案来避免差距？

这是移动的脚本

// Animate the hat up, letter A in and fade in content of section 2
var iphoneContentHat = new TimelineMax();
iphoneContentHat
    .to($screenHat, 1, 
        {yPercent: -50, ease: Power4.easeOut}
    )
    .fromTo($screenA, 1, 
        {xPercent: 10, yPercent: -20, autoAlpha: 0, scale: 0.1}, 
        {xPercent: 0, yPercent: 0, autoAlpha: 1, scale: 1, ease: Power4.easeOut},
    '0')
    .from($innerS2, 1, 
        {autoAlpha: 0}, 
    '-=0.3');
new ScrollMagic.Scene({
    offset: wh*0.6,
    triggerElement: $('body')[0],
    duration: '80%'
})
.setTween(iphoneContentHat)
.addIndicators()
.addTo(ctrl);

代码段：http://plnkr.co/edit/vKJyHxMPZer5gPMKzTSX?p=preview

$(document).ready(function() {
  var wh = window.innerHeight,
    $iphone = $('.frame'),
    $innerS1 = $('.innerS1'),
    $innerS2 = $('.innerS2'),
    $innerS3 = $('.innerS3'),
    $innerS4 = $('.innerS4'),
    $screenHat = $('.screenHat'),
    $screenA = $('.screenA'),
    $screenB = $('.screenB'),
    $screenC = $('.screenC');
  // init
  var ctrl = new ScrollMagic.Controller({
    globalSceneOptions: {
      triggerHook: 'onLeave'
    }
  });
  // Create scene
  $("section").each(function() {
    new ScrollMagic.Scene({
        triggerElement: this,
        duration: '50%'
      })
      .setPin(this)
      .addTo(ctrl);
  });
  // Animate the hat up, letter A in and fade in content of section 2
  var iphoneContentHat = new TimelineMax();
  iphoneContentHat
    .to($screenHat, 1, {
      yPercent: -50,
      ease: Power4.easeOut
    })
    .fromTo($screenA, 1, {
        xPercent: 10,
        yPercent: -20,
        autoAlpha: 0,
        scale: 0.1
      }, {
        xPercent: 0,
        yPercent: 0,
        autoAlpha: 1,
        scale: 1,
        ease: Power4.easeOut
      },
      '0')
    .from($innerS2, 1, {
      autoAlpha: 0
    }, '-=0.3');
  new ScrollMagic.Scene({
      offset: wh * 0.6,
      triggerElement: $('body')[0],
      duration: '80%'
    })
    .setTween(iphoneContentHat)
    .addIndicators()
    .addTo(ctrl);
  // Animate letter A out, letter B in and fade in content of section 3
  var iphoneContent1Tl = new TimelineMax();
  iphoneContent1Tl
    .to($innerS2, 1, {
      autoAlpha: 0
    }, '-=0.3')

  .to($screenA, 1, {
      xPercent: -100,
      ease: Power4.easeInOut
    })
    .fromTo($screenB, 1, {
      xPercent: 100,
      autoAlpha: 1
    }, {
      xPercent: 0,
      autoAlpha: 1,
      ease: Power4.easeInOut
    })
    .from($innerS3, 1, {
      autoAlpha: 0
    }, '-=0.7');

  new ScrollMagic.Scene({
      triggerElement: $('.innerS2 h2')[0],
      duration: '50%'
    })
    .setTween(iphoneContent1Tl)
    .addTo(ctrl);
  // Animate letter B out, letter C in and fade in content of section 4
  var iphoneContent2Tl = new TimelineMax();
  iphoneContent2Tl
    .to($screenB, 0.3, {
      xPercent: -100,
      ease: Power4.easeInOut
    })
    .fromTo($screenC, 1, {
      xPercent: 100,
      autoAlpha: 1
    }, {
      xPercent: 0,
      autoAlpha: 1,
      ease: Power4.easeInOut
    })
    .from($innerS4, 1, {
      autoAlpha: 0
    }, '-=0.7');

  new ScrollMagic.Scene({
      triggerElement: $('.innerS3 h2')[0],
      duration: '50%'
    })
    .setTween(iphoneContent2Tl)
    .addTo(ctrl);
});

/* Styles go here */

html {
  height: 100%;
}
body {
  margin: 0;
  min-height: 100%;
}
section {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  height: 100vh;
  border: 10px solid $border-color;
}
article {
  width: 50%;
  float: right;
  border: 1px solid tomato;
}
.frame {
  height: 736px;
  width: 360px;
  background-color: #fff;
  border: 3px solid #d8e2e7;
  border-radius: 50px;
  box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.05);
  z-index: 99;
  position: fixed;
  top: 0;
  bottom: 0;
  left: 10%;
  margin: auto;
}
.frame:before {
  content: "";
  display: block;
  width: 70px;
  height: 10px;
  background-color: #d8e2e7;
  border-radius: 5px;
  margin: 30px auto;
}
.frame:after {
  content: "";
  height: 62px;
  width: 62px;
  border-radius: 31px;
  border: 3px solid #d8e2e7;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  bottom: 15px;
  right: 0;
  margin: auto;
}
.screen {
  width: 320px;
  height: 568px;
  background-color: tomato;
  border: 2px solid #d8e2e7;
  margin: auto;
  position: relative;
  overflow: hidden;
}
.screen .screen-letter {
  width: 100%;
  height: 100%;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* Letters hidden by default */

.screenA,
.screenB,
.screenC {
  opacity: 0;
  visibility: hidden;
}
/* ScrollMagic hat on top of letters */

.screenHat {
  height: 100%;
  background-color: tomato;
}

<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/gsap/1.16.0/TweenMax.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.2/plugins/debug.addIndicators.min.js'></script>

<section id="one">
  <article class="inner innerS1">
    <h2>Simple ScrollMagic Tutorial</h2>
    <p>Learn how to create a <strong>simple scrolling website</strong> using ScrollMagic</p>
  </article>
</section>
<section id="two">
  <article class="innerText innerS2">
    <h2>Why to learn Inner S2</h2>
    <ul class="features">
      <li>It's great for <strong>story telling websites</strong>
      </li>
      <li>It gives you <strong>endless creative power</strong>
      </li>
      <li>It's <strong>easy to use</strong> once you get it</li>
    </ul>
  </article>
</section>
<section id="three">
  <article class="innerText innerS3">
    <h2>When to use ScrollMagic?</h2>
    <ul class="features">
      <li>When building <strong>interactive infographics</strong>
      </li>
      <li>When introducing your <strong>product or service</strong>
      </li>
      <li>When sharing your <strong>unique story or timeline</strong>
      </li>
    </ul>
  </article>
</section>
<section id="four">
  <article class="innerText innerS4">
    <h2>Want to learn more about ScrollMagic?</h2>
    <ul class="features">
      <li>Read the full article <a href="https://ihatetomatoes.net/simple-scrollmagic-tutorial/">Simple ScrollMagic Tutorial</a>
      </li>
    </ul>
  </article>
  <div class="frame">
    <div class="screen">
      <span class="screen-letter screenHat"></span>
      <img class="screen-letter screenA" src="http://placehold.it/250/FF6347/efefef">
      <img class="screen-letter screenA" src="http://placehold.it/250/ff0000/ffffff">
      <img class="screen-letter screenB" src="http://placehold.it/250/E8117F/ffffff">
      <img class="screen-letter screenC" src="http://placehold.it/250/333333/ffffff">
    </div>
  </div>
</section>

如何在TimelineMax中移动时避免图像之间的差距？

0 个答案: