移动时的视差滚动 word/letters

Question

我正在做一个项目，它需要基本上复制网站标题的字母随着滚动移动的效果（就像这里：https://en.playkot.com/，这个词 PLAYKOT）。

你知道当字母在滚动过程中以不同的方向和不同的长度移动时如何实现这种效果吗？我不确定 scrollmagic and/or tweens.

之间的相互作用

Answer 1

我设法解决了问题，请看这里：请使用完整页面视图（最好在我的 CODEPEN 上）正确查看效果，因为这不是（但可以很容易地变成）响应版本。

jQuery(document).ready(function( $ ) {
    var $main = $("#header");
    var $header_container = $(".header-container");
    var $image = $(".h-image");
    var $parallax_word = $(".parallax-word");
    var $pw_item = $(".pw-item");
    var winH = $(window).height();

    var controller = new ScrollMagic.Controller();
    var scene1p = new ScrollMagic.Scene({
     duration: winH
    });

    var tween1 = new TimelineMax();
    tween1.to($main, 1, {
              y: -winH / 4,
              ease: Linear.easeNone
    });

    scene1p.setTween(tween1);
    controller.addScene(scene1p);

    var scene2p = new ScrollMagic.Scene({
     duration: winH
    });

    var tween2 = new TimelineMax();
    tween2.to($image, 1, {
     opacity: 0.65,
        ease: Linear.easeNone
    });

    scene2p.setTween(tween2);
    controller.addScene(scene2p);

    $pw_item.each(function(index, element) {

     var $symbol = $(this);
     var shiftH = $symbol.data("shift");

     var tweenI = new TimelineMax();
     tweenI.fromTo($symbol, 1, {
      y: shiftH * winH / 2
            }, {
            y: 0
            });

     var scenep = new ScrollMagic.Scene({
      duration: .7 * $main.height()
     });

     scenep.setTween(tweenI);
     controller.addScene(scenep);
    });

    var scene4p = new ScrollMagic.Scene({
     duration: winH
    });

    var tween4 = new TimelineMax();
    tween4.to($parallax_word, 1, {
        y: -winH / 5,
        ease: Linear.easeNone

    });

    scene4p.setTween(tween4);
    controller.addScene(scene4p);
 });

#header {
        background-color: #ebebed;
        position: fixed;
        left: 0;
        width: 100%;
        height: 100%;
        transform-style: preserve-3d;
        backface-visibility: hidden;
    }

    .header-container {
        background: #000;
        opacity: 1;
        height: 100%;
        transition: opacity .35s;
        transition-duration: .175s;
    }

    .header-background, .header-background .h-image {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .header-background {
        z-index: 0;
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

    .header-background .h-image {
         background: linear-gradient( rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2) ), url(http://eskipaper.com/images/universe-background-1.jpg);
        background-size: cover;
        background-position: 80% 80%;
        position: relative;
        display: block;
        left: 0px;
        top: 0px;
        transform-style: preserve-3d;
        backface-visibility: hidden;
    }

    .parallax-word {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        display: -webkit-flex;
        display: -moz-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-justify-content: space-between;
        -moz-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        -webkit-align-items: center;
        -moz-box-align: center;
        -ms-flex-align: center;
        align-items: center;
        padding: 0 20%;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        z-index: 1;
    }

    .pw-item {
        position: relative;
        width: 120px;
        height: 200px;
        z-index: 1;
    }

    .pw-item.pw-item-1 {
      width: 110px;
    }
    .pw-item.pw-item-2 {
      width: 140px;
    }
    .pw-item.pw-item-3,
    .pw-item.pw-item-4 {
        width: 140px;
    }
    .pw-item.pw-item-5.pw-item-shift {
      width: 120px;
    }
    .pw-item.pw-item-6 {
      width: 160px;
    }

    .pw-letter {
        font-family: 'Arial';
        font-size: 160px;
        font-weight: 700;
        color: #fff;
        line-height: 1;
        position: absolute;
        display: block;
        left: 0px;
        top: 0px;
        transform-style: preserve-3d;
        backface-visibility: hidden;
        opacity: 1 !important;
    }

    .symbol {
        display: block;
        opacity: 1;
    }

    #body_content {
        background-color: #000;
        height: 2000px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.2/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/plugins/animation.gsap.min.js"></script>

<div id="project"> 
  <section id="header"> 
    <div class="header-container">
   <div class="header-background">
    <div class="h-image"></div>
   </div>
   <div class="parallax-word">
    <div class="pw-item pw-item-1" data-shift="-0.25">
     <div class="pw-letter h-image">
      <span class="symbol">y</span>
     </div>
    </div>
    <div class="pw-item pw-item-2" data-shift="0.15">
     <div class="pw-letter h-image">
      <span class="symbol">w</span>
     </div>
    </div>
    <div class="pw-item pw-item-item_3" data-shift="-0.3">
     <div class="pw-letter h-image">
      <span class="symbol">e</span>
     </div>
    </div>
    <div class="pw-item pw-item-4 pw-item-shift" data-shift="0">
     <div class="pw-letter h-image">
      <span class="symbol">t</span>
     </div>
    </div>
    <div class="pw-item pw-item-5" data-shift="-0.35">
     <div class="pw-letter h-image">
      <span class="symbol">k</span>
     </div>
    </div>
    <div class="pw-item pw-item-6" data-shift="0.15">
     <div class="pw-letter h-image">
      <span class="symbol">a</span>
     </div>
    </div>
   </div>
  </div>
  </div>  
  <div id="body_content">
  </div>
</div>

感谢大家的关注！ :-) 我希望它能帮助别人。 PS：这个片段是一个更大项目的一部分，所以可能有一些未使用的部分，很抱歉，但这个想法应该很明显。

移动时的视差滚动 word/letters

Parallax scrolling with moving word/letters

javascript

jquery

scroll

parallax