jQuery：滾動動畫圖像

Question

當頁面滾動到該區域時，我想為頁面的特定部分設置圖像動畫。 動畫應如下所示：當頁面加載時，該圖像是不可見的，並且當我們向下滾動時，該圖像fadeIn並從右向左移動100px。

這是我做的以獲得滾動位置

jQuery(document).ready(function($){
 $('.myimages').hide();
 var target = $(".img-div").offset().top; 
 var interval = setInterval(function() {
  if ($(window).scrollTop() >=target)
   {                 
     $('.myimages').fadeIn();
   }
   }, 250);
  });

現在，按照上面提到的標准，我不再需要為它進行動畫處理而使圖像褪色，而是嘗試了類似的方法

$('.myimages').animate({right:'100'}, 200);

但這沒有用，請幫我

Answer 1

您可以將其綁定到window的scroll事件，而不是每隔幾秒鍾觸發一次setInterval 。

$(window).scroll(function () {
  if ($(window).scrollTop() >= target)
    $('.myimages').fadeIn();
});

動畫的right和其他類似的CSS屬性，你需要設置.image的地位比別的static 。

$('.myimages').animate({
  right: 100
}, 200);

因此，您需要在CSS中使用：

.myimages {position: absolute;}

工作片段

 $(function () { $("img").hide(); $(window).scroll(function () { if ($(window).scrollTop() > $("img").scrollTop()) $("img").show().addClass("bounceInRight"); }); }); 

 .animated { -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; -webkit-animation-timing-function: linear; animation-timing-function: linear; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); } 60% { opacity: 1; -webkit-transform: translateX(-30px); } 80% { -webkit-transform: translateX(10px); } 100% { -webkit-transform: translateX(0); } } @keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); } 60% { opacity: 1; transform: translateX(-30px); } 80% { transform: translateX(10px); } 100% { transform: translateX(0); } } .bounceInRight { -webkit-animation-name: bounceInRight; animation-name: bounceInRight; } img {max-width: 100%;} 

 <script src="https://code.jquery.com/jquery-1.9.1.js"></script> <h1>Animation</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sequi, unde amet a repellat tempora ipsum! Maiores minima sapiente blanditiis, asperiores necessitatibus corporis incidunt! Ex, praesentium aliquam omnis dicta quo. Quisquam.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Libero eius eligendi praesentium doloremque voluptatibus, vero sed aspernatur officia eum repellat unde dolore ut eaque esse, officiis natus harum vel eos.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta atque beatae temporibus et officiis enim, rem facere! Voluptatibus adipisci, odit in necessitatibus explicabo eveniet culpa. Nisi praesentium quasi error ducimus!</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus autem facere ipsa ratione excepturi praesentium. Reiciendis aut praesentium earum laboriosam, architecto quasi error, corporis, nesciunt maxime distinctio quo nisi debitis.</p> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati eos, consequatur voluptatibus harum deserunt! Fugit voluptatem veniam atque, odio aut qui iste laudantium, nemo error vero natus eaque unde sunt!</p> <p><img src="https://assets.keycdn.com/img/cdn-network.svg" alt="" class="animated" /></p>