根據滾動位置來回動畫

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

根據此答案，您可以執行以下操作：

 /** * inViewport jQuery plugin by Roko CB * 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, Ht) : 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>