垂直方向にスクロールするときにDIVを水平方向に移動

Question

私はdivをユーザーが垂直にスクロールするときに右から左に移動するスクリプトを作成しようとしています。これは "sidepara"のクラスを持つdivにこの効果をもたらすはずです。表示されている（ユーザーがスクロールしている）場合にのみdivを移動する必要があります。私は数学の権利を得るのに苦労しています... divを水平スクロール位置に比例して動かす正しい式は何ですか？最後に数学を考え出し

$(function() { 
 
    $(window).scroll(function() { 
 
    console.clear(); 
 
    $(".sidepara").each(function() { 
 

 
     var sY = $(this).position().top - $(window).scrollTop(), 
 
     dY = $(this).position().top, 
 
     wH = window.innerHeight; 
 

 
     var scrollPercent = (sY/(dY - wH)); 
 
     var position = (scrollPercent * ($(document).width())); 
 
     position = window.innerWidth - position; 
 
     $(this).css("margin-left", position); 
 

 

 
     console.log("scoll Y: " + sY); 
 
     console.log("div Y: " + dY); 
 
     console.log("div X: " + position); 
 
     console.log("window height: " + wH); 
 
     console.log("scrollPercent: " + scrollPercent); 
 
     console.log("----"); 
 

 
     //print number for debugging 
 
     $(this).html(position); 
 
    }); 
 

 
    }) 
 
});

html, 
 
body { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
.stretch { 
 
    height: 2000px; 
 
} 
 

 
.sidepara { 
 
    color: red; 
 
} 
 

 
.parallaxContainer { 
 
    overflow: hidden; 
 
    width: 100%; 
 
    height: 256px; 
 
    background: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="stretch"></div> 
 
<div class="parallaxContainer"> 
 
    <!-- <img src="helloworld.png" class="sidepara" /> --> 
 
    <div class="sidepara"></div> 
 
</div> 
 
<div class="stretch"></div> 
 

 
<div class="parallaxContainer"> 
 
    <!-- <img src="helloworld.png" class="sidepara" /> --> 
 
    <div class="sidepara"></div> 
 
</div> 
 
<div class="stretch"></div> 
 

 
<div class="parallaxContainer"> 
 
    <!-- <img src="helloworld.png" class="sidepara" /> --> 
 
    <div class="sidepara"></div> 
 
</div> 
 
<div class="stretch"></div>

Answer 1

！似たようなことをしたい人のためのコードです。

 $(function() { 
 
      $(window).scroll(function() { 
 
       $(".sidepara").each(function() { 
 
         var sY = $(this).position().top - $(window).scrollTop(), 
 
          dY = window.innerHeight, 
 
          wH = 0; 
 

 
         var scrollPercent = (sY/(dY - wH)); 
 
         var position = (scrollPercent * ($(document).width())); 
 
         $(this).css("margin-left", position); 
 
       }); 
 

 
      }) 
 
     });

 html, 
 
     body { 
 
      margin: 0; 
 
      padding: 0; 
 
     } 
 

 
     .stretch { 
 
      height: 2000px; 
 
     } 
 

 
     .sidepara { 
 
font-size: 5em; 
 
      color: red; 
 
      white-space: nowrap; 
 
     } 
 

 
     .parallaxContainer { 
 
      overflow: hidden; 
 
      width: 100%; 
 
      height: 256px; 
 
      background: black; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="stretch"></div> 
 
    <div class="parallaxContainer"> 
 
     
 
     <div class="sidepara">hello world!</div> 
 
    </div> 
 
    <div class="stretch"></div> 
 

 
    <div class="parallaxContainer"> 
 
     
 
     <div class="sidepara">hellow world!</div> 
 
    </div> 
 
    <div class="stretch"></div> 
 

 
    <div class="parallaxContainer"> 
 
     
 
     <div class="sidepara">hello world!</div> 
 
    </div> 
 
    <div class="stretch"></div>