從滾動到另一個元素後從頭開始動畫

在我的頁面上我有一定的動畫。當我滾動整個頁面時，我想確保動畫從一開始就開始，而不是在我的頁面上完成動畫。檢查了這一點： http://jsfiddle.net/ykto7uu9/49/從滾動到另一個元素後從頭開始動畫

$(document).ready(function(){ 
 
     $("button").click(function(){ 
 
      $("#animation").animate({left: '250px'}); 
 
     }); 
 
    });

html,body { 
 
      height: 100%; 
 
    } 
 
    
 
    .first { 
 
     background-color: green; 
 
     height: 100%; 
 
     width: 100%; 
 
    } 
 
    
 
    .second { 
 
     background-color: yellow; 
 
     height: 100%; 
 
     width: 100%; 
 
    } 
 
    
 
    .third { 
 
     background-color: red; 
 
     height: 100%; 
 
     width: 100%; 
 
    } 
 
    
 
    .button { 
 
     position: absolute; 
 
     margin-top: 50%; 
 
    } 
 
    
 
    .animation { 
 
     background:#98bf21; 
 
     height:100px; 
 
     width:100px; 
 
     position:absolute; 
 
     margin-top: 20%; 
 
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="first" class="first"></div> 
 
    <div id="second" class="second"> 
 
    <button id="button" class="button">Start Animation</button> 
 
    Click on the button Start Animation!<br> 
 
    Now every time I scroll up to green or red div, I want Block to be placed at the first position before animation. 
 
    <div id="animation" class="animation">Block</div> 
 
    </div> 
 
    <div id="third" class="third"></div>

來源

2017-03-07 newbie_girl

如果要重置動畫當有人滾動通過它，你需要刪除的元素像這樣的風格屬性：

$('#animation').removeAttr('style')

Check out the fiddle here

來源

2017-03-07 12:53:35 Zorken17

這真的在一個例子中有效。不過，我正在處理真正的頁面問題。此條件不可識別：if（$（document）.scrollTop（）<$（'＃section-one'）。offset（）。top || $（document）.scrollTop（）== $（'＃section- 3'）。偏移（）。頂部）。任何想法呢？ –

你也許應該用$（window）去代替，或者展示你真實的代碼。你會得到什麼樣的錯誤？ – Zorken17

啊，我已經改變了條件的順序，我把第一部分放在第三部分，然後是第一部分。現在它的工作！ –

你可以做這樣的事情

$("#animation") 
    .animate({left: '250px'}) 
    .animate({left: '0px'});

鏈的另一個動畫重置塊的位置

來源

2017-03-07 12:23:10 Vikram

謝謝。不過，我的例子只是我的案例的簡化版本。我已經有了這樣的東西，我的問題指的是別的東西。所以我想要的是確保每次滾動到另一個不包含動畫的div時，當我滾動回包含動畫的div時，該動畫將從頭開始。我認爲這將包括滾動，高度方法，但我無法應用它們。 –

然後，您可以跟蹤包含動畫框的div的滾動位置，並且每當DIV從頂部或底部進入視圖時，都會重置動畫框的位置。 – Vikram

你有一個很好的JS庫，只是你所需要的。它被稱爲smoove。

CSS

<style> 
html,body { 
     height: 100%; 
} 

.first { 
background-color: green; 
height: 100%; 
width: 100%; 
} 

.second { 
background-color: yellow; 
height: 100%; 
width: 100%; 
} 

.third { 
background-color: red; 
height: 100%; 
width: 100%; 
} 

.button { 
position: absolute; 
margin-top: 50%; 
} 

.animation { 
background:#98bf21; 
height:100px; 
width:100px; 
position:absolute; 
    margin-top: 20%; 
    left: 300px; 
    opacity: 1 !important; 
} 
</style>

HTML

<div id="first" class="first"></div> 
<div id="second" class="second"> 
<button id="button" class="button">Start Animation</button> 
Click on the button Start Animation!<br> 
Now every time I scroll up to green or red div, I want Block to be placed at the first position before animation. 
<div id="animation" class="animation block" data-move-x="-300px">Block</div> 
</div> 
<div id="third" class="third"></div> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-smoove/0.2.6/jquery.smoove.min.js"></script>

<script> 
$(document).ready(function(){ 
    $('.block').smoove({offset:'10%'}); 
}); 
</script>

下面是一個簡單的例子，但你可以tweek它自己的方式

sample

來源

2017-03-07 12:45:50 kekacbre

您必須添加滾動（）上「窗口」選擇器的下一行。這是您的解決方案：

$(document).ready(function(){ 
$("button").click(function(){ 
    $("#animation").animate({left: '250px'}); 
}); 
$(window).scroll(function(){ 
    $("#animation").css({left: '10px'}); 
});

}）;

來源

2017-03-07 12:58:08 andfra

從滾動到另一個元素後從頭開始動畫

回答

相關問題