根据滚动位置来回动画

Question

我创建了一个基于滚动位置进出动画的两个盒子的小演示。但这并不是我想要实现的。我想要的是让框根据滚动位置进行动画处理，而不仅仅是在达到某个点时过渡进出。

例如，滚动应该控制动画，因此如果向下滚动，框将动画化，如果向上滚动，它们将动画化。如果您停止滚动中间动画，动画将停止。如果您反转滚动位置，动画将反转。所以动画只会在你滚动时发生。

我希望这足够清楚，您可以理解。我将尝试提供一个链接，指向我想要实现的目标。但现在这里是我的演示，只是使用过渡来为框设置动画。

jQuery(document).ready(function($){
	var scroll_pos = $(window).scrollTop();
    var box = $('#container').offset().top - 200;
    
    $(window).on('scroll', function(){
    	scroll_pos = $(window).scrollTop();
        
    	$('p').html(scroll_pos);
        
        if(scroll_pos >= box){
        	$('#left').addClass('animate');
        	$('#right').addClass('animate');
        }else{
        	$('#left').removeClass('animate');
        	$('#right').removeClass('animate');
        }
    });
  	
});

#container{
    width: 600px;
    height: 300px;
    margin: 1000px auto;
    overflow: hidden;
    font-size: 0;
}

#left{
    width: 55%;
    height: 300px;
    background-color: blue;
    display: inline-block;
    transform: translateX(-100%);
    transition: all 0.5s; 
}

#right{
    width: 45%;
    height: 300px;
    background-color: yellow;
    display: inline-block;
    transform: translateX(100%);
    transition: all 0.5s; 
}

#left.animate{
    transform: translateX(0%);
}

#right.animate{
    transform: translateX(0%);
}

p{
    position: fixed;
    top: 0;
    left: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<p></p>

<div id="container">
    <div id="left"></div>
    <div id="right"></div>
</div>

这是我想要实现的一个示例。如您所见，滚动控制指尖陀螺的动画https://ampbyexample.com/visual_effects/basics_of_scrollbound_effects/

Answer 1

基于this answer，您可以执行以下操作：

/**
 * inViewport jQuery plugin by Roko C.B.
 * http://stackoverflow.com/a/26831113/383904
 * Returns a callback function with an argument holding
 * the current amount of px an element is visible in viewport
 * (The min returned value is 0 (element outside of viewport)
 */
;(function($, win) {
  $.fn.inViewport = function(cb) {
     return this.each(function(i,el) {
       function visPx(){
         var elH = $(el).outerHeight(),
             H = $(win).height(),
             r = el.getBoundingClientRect(), t=r.top, b=r.bottom;
         return cb.call(el, Math.max(0, t>0? Math.min(elH, H-t) : Math.min(b, H)));  
       }
       visPx();
       $(win).on("resize scroll", visPx);
     });
  };
}(jQuery, window));


// Now our stuff:

var $container = $("#container");
var $left = $("#left");
var $right = $("#right");

$container.inViewport(function( px ) {
  var v = 1 - px / $container.height(); // Value from 1.0 to 0.0 and v.versa
  $("p").text(v);
  $left.css({transform: `translateX(${ -v * 100 }%)`});
  $right.css({transform: `translateX(${ v * 100 }%)`});
});

body {
  height: 500vh;
}

#container {
  position: relative;
  margin: 0 auto;
  top: 200vh;
  overflow: hidden;
  width: 60vw;
  height: 60vh;
}

#left,
#right {
  width: 50%;
  height: 100%;
  float: left;
}

#left {
  background-color: blue;
  transform: translateX(-100%);
}

#right {
  background-color: yellow;
  transform: translateX(100%);
}

p {position: fixed; top:0; left: 0;}

<div id="container">
  <div id="left"></div>
  <div id="right"></div>
</div>

<p></p>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>