ユーザーのスクロールで不透明度のSVGパスを順番にアニメ化

Question

アニメーション化したいSVGを構築しました.3つのパート/レイヤーを持ち、それぞれに定義済みのパスがあります。

SVGは円のロゴタイプのもので、円の上部に単語があり、残りのスペースをダッシュ​​してから円の真ん中に入力します。

このようが、単純な：私は何をしたいか http://pixelcurse.com/wp-content/uploads/2015/11/logo-badges-8.jpg

はこれです：それは、ビューポート

に入ってくる前に、

1. SVGのセットの不透明度を0にSVGを開始すると検出はビューポートに入る
2. 最初の2つの<g>ブロックの各パスの不透明度をスクロール位置（スクロールダウン）に基づいて順番に変更する
3. シーケンスを上にスクロールすると、

を逆転させたとき、私は失敗したが何もオンとオフの2日間のためにこれを行うにしようとしてきました。私はシンプルなjqueryアニメーションとCSSアニメーション（下のコードを参照）を使って作業を成功させましたが、スクロール位置ではうまく再生できませんでした。

スクロール位置に基づいて複数のif/elseを持つことは、非常に面倒で逆動作しないことに気がついたことですが、別の解決策のために明示的な数値を持たせたくありません。取り組まなければならない。

HTML： CSS

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 640 640" style="enable-background:new 0 0 640 640;" xml:space="preserve"> 
    <g id="mainsvg"> 
     <g id="top-circle-words"> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
     </g> 

     <g id="bot-circle-dashes"> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
      <path/> 
     </g> 

     <g id="middle-words"> 
      <path/> 
      <path/> 
     </g> 
    </g> 
</svg> 

- アニメーションの試み - 作品が、ノーコントロールが - ちょうど負荷で再生：

svg {width:100%;max-width:50%;margin:50% auto;display:block;} 

@-webkit-keyframes animIn { 0% { opacity: 0; } 100% { opacity:1; } } 
@-webkit-keyframes animOut { 0% { opacity: 1; } 100% { opacity:0; } } 

.animIn { -webkit-animation: animIn 500ms 1.5s normal backwards; -webkit-animation-fill-mode: both; } 
.animOut { -webkit-animation: animOut 500ms 3s reverse backwards; -webkit-animation-fill-mode: both; } 

g#top-circle-words path:nth-child(1) { -webkit-animation-delay: 50ms } 
g#top-circle-words path:nth-child(2) { -webkit-animation-delay: 100ms } 
g#top-circle-words path:nth-child(3) { -webkit-animation-delay: 150ms } 
g#top-circle-words path:nth-child(4) { -webkit-animation-delay: 200ms } 
g#top-circle-words path:nth-child(5) { -webkit-animation-delay: 250ms } 
g#top-circle-words path:nth-child(6) { -webkit-animation-delay: 300ms } 
g#top-circle-words path:nth-child(7) { -webkit-animation-delay: 350ms } 
g#top-circle-words path:nth-child(8) { -webkit-animation-delay: 400ms } 
g#top-circle-words path:nth-child(9) { -webkit-animation-delay: 450ms } 
g#top-circle-words path:nth-child(10) { -webkit-animation-delay: 500ms } 

g#bot-circle-dashes path:nth-child(1) {-webkit-animation-delay: 550ms } 
g#bot-circle-dashes path:nth-child(2) {-webkit-animation-delay: 600ms } 
g#bot-circle-dashes path:nth-child(3) {-webkit-animation-delay: 650ms } 
g#bot-circle-dashes path:nth-child(4) {-webkit-animation-delay: 700ms } 
g#bot-circle-dashes path:nth-child(5) {-webkit-animation-delay: 750ms } 
g#bot-circle-dashes path:nth-child(6) {-webkit-animation-delay: 800ms } 
g#bot-circle-dashes path:nth-child(7) {-webkit-animation-delay: 850ms } 
g#bot-circle-dashes path:nth-child(8) {-webkit-animation-delay: 900ms } 
g#bot-circle-dashes path:nth-child(9) {-webkit-animation-delay: 1s } 
g#bot-circle-dashes path:nth-child(10) {-webkit-animation-delay: 1.1s } 
g#bot-circle-dashes path:nth-child(11) {-webkit-animation-delay: 1.2s } 

g#middle-words {-webkit-animation-delay: 300ms; -webkit-animation-duration: 2s} 

JS - useing .each（）;

$("g#top-circle-words path, g#bot-circle-dashes path").each(function(index) { 
    $(this).delay(20*index).animate({opacity: 1}, 50); 
}); 

$("g#middle-words").delay(50).animate({opacity: 1}, 500); 

だから、あなたは上記のコードを取るならば、それは動作するはずです、それは私が権利を取得することができないことを、それのコントロールですか？ CSSで見ることができるのは、JQを使用せずにアニメーション化するすべての要素に.animInクラスを手動で追加する場合にも機能します。

私はOPが私と同じような問題（ちょっと）があったところで別の記事を見つけましたが、私は正しいとマークされたコードを適合させようとしましたが、

$(function() { 
    var prevRange = -1; 
    var range = -1; 

    $(document).on('scroll', function() { 
     var top = $(document).scrollTop();  
     if (top >= 2200 && top < 2401) { 
      range = Math.floor(top/10)-220; 
     } else { 
      range = -1; 
     } 

     if(range != prevRange) { 
      prevRange = range; 
      var leftPx = (826 - range*5) + "px"; 
      $('path').stop().animate({left: leftPx}, 300, "easeOutQuad"); 
     } 
    }); 
}); 

もこれは私が書いたものですが、私はこれは私が複数の文IF使用した場合で動作するように痛みをされて見ることができる：

// $(document).ready(function() { 
// $(window).scroll(function() { 
//  if ($(this).scrollTop() > 100){ 
//   $('g#top-circle-words path:nth-child(1)').css({ 'opacity': '.5' }); 
//  } 
//  else { 
//   $('path').css({ 
//    'opacity': '.9', 
//    "border": "0" 
//   }); 
//  } 
//  console.log($(document).scrollTop()); 
// }); 
// }); 

は、誰もがこれで私を助けてください - やって私はまだJSとJQを学んでいるので、私の脳は謝罪しています。誰かが私に正しい方向を教えてもらうか、説明を与えるための洞察を与えることができたら、本当に感謝します。

Answer 1

ScrollMagicと、可能であればGSAPを使用することをおすすめします。

これは、右の設定にする必要がありますが、あなたの正確なSVGに応じて微調整する必要があるかもしれません：スラックチャットと上記返信@shshawため

var tween = TweenMax.fromTo("path", 1, { opacity: 0 }, { opacity: 1 }); 
var scene = new ScrollMagic.Scene({triggerElement: "#mySvg" }) 
       .setTween(tween) 
       .addIndicators({name: "tween css class"}) // add indicators (requires plugin) 
       .addTo(controller);