視差滾動移動字/字母

我正在做一個項目，它需要基本上覆制網站標題的字母隨滾動一起移動的效果（完全像這裏：https://en.playkot.com/，這個詞PLAYKOT）。視差滾動移動字/字母

你有什麼想法，當字母在滾動期間，以不同的方向和不同的長度移動時，我該如何實現這種效果？我不確定scrollmagic和/或tween之間的相互作用。

2017-08-25 Iveta Tonhauserova

順便說一句，我發現這個https://codepen.io/vinsongrant/pen/XJLMjX，但我不知道如果這是方向去。 –

看起來像您找到的Codepen是一個很好的起點。 –

你可以證明你到目前爲止有什麼？這有助於瞭解究竟是什麼問題以及你卡在哪裏。你發佈的codepen看起來像一個好開始，如果我把你的權利。 – Fix3r

我設法解決了這個問題，看看這裏：使用全頁面視圖（最好在我的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({ 
 
    \t 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({ 
 
    \t duration: winH 
 
    }); 
 

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

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

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

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

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

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

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

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

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

 
    }); 
 

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

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

謝謝大家的關心！ :-)我希望它能幫助別人。 PS：這個片段是一個更大項目的一部分，所以可能會有一些未使用的部分，對此抱歉，但這個想法應該是非常明顯的。

來源

2017-09-21 09:36:40

視差滾動移動字/字母

回答

相關問題