當滾動頁面時動畫一個div

-1

當用戶向下滾動頁面時，我想註冊3個div，我跟着很多ttorials，它沒有任何建議如何做，因爲divs haz一個定義的css類，這是divs。我希望他們能夠淡化或淡化或任何酷炫的anniation如何實現這一點。請。當滾動頁面時動畫一個div

<section > 
     <div class="container"> 
      <h1> PRODUITS </h1> 
       <div class="row"> 

        <a href="pehdeauFrame.php"> 
        <div id="mudivsho" class="col-md-4 col-sm-4"> 
          <div class="panel panel-default"> 
          <div class="panel-body"> 
          <h4 style="text-align:center;" class="adjst">Tubes PEHD pour Eaux </h4> 
          <img id="imgeaudiv" src="assets/images/diveau.jpg"> 
          </div> 
          </div>  
        </div> 

       </a> 

        <a href="pehdTelecomFrame.php"> 
        <div id="mudivsho" class="col-md-4 col-sm-4"> 
          <div class="panel panel-default"> 
         <div class="panel-body"> 
          <h4 style="text-align:center;" class="adjst">PEHD pour gaine Fibre Optique</h4> 
          <img id="imgeaudiv" src="assets/images/divtelecom.jpg"> 
         </div> 
        </div>  
        </div> 
        </a> 

        <a href="http://www.mansouriplast.com/"> 
        <div id="mudivsho" class="col-md-4 col-sm-4"> 
          <div class="panel panel-default"> 
         <div class="panel-body"> 
          <h4 style="text-align:center;" class="adjst">Tubes PVC</h4> 
          <img id="imgeaudiv" src="assets/images/divpvc.jpg"> 
         </div> 
        </div>  
        </div> 
        </a> 

       </div> 

     </div> 
    </section>

來源

2017-02-08 salah 2019

我知道，我不希望這樣的答案，至少你可以用一個工作教程，或一些代碼來尋找它回答。跟隨 –

薩拉，請谷歌「研究努力」***。在你問這裏之前，你需要搜索和閱讀工作教程，其他例子***，只有在問題沒有產生任何有用的結果時才問這裏。您還需要指定您嘗試的內容。請閱讀[問]瞭解詳情。 –

好的，謝謝提醒。我會嘗試其他的例子。 –

我想你可以找出如何使這個網站上： https://css-tricks.com/aos-css-driven-scroll-animation-library/

來源

2017-02-08 21:45:49 Plenarto

這個JavaScript可以讓你移動一個div。

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

，這將讓你做出一個對象出現（淡入）上滾動：

$('.back-to-top').css({"display": "none"}); 
jQuery(document).ready(function() { 
var offset = 25; 
var duration = 300; 
jQuery(window).scroll(function() { 
if (jQuery(this).scrollTop() > offset) { 
jQuery('.back-to-top').fadeIn(duration); 
} else { 
jQuery('.back-to-top').fadeOut(duration); 
} 
}); 
jQuery('.back-to-top').click(function(event) { 
event.preventDefault(); 
jQuery('html, body').animate({scrollTop: 0}, duration); 
return false; 
}); 
});

所以，你可能想的是：

$('#mudivsho').css({"display": "none"}); 
jQuery(document).ready(function() { 
var offset = 25; /* pixels you have to scroll to the div show up (fade) [you can change] */ 
var duration = 300; /* Duration of the fade (you can change) */ 
jQuery(window).scroll(function() { 
if (jQuery(this).scrollTop() > offset) { 
jQuery('#mudivsho').fadeIn(duration); 
} else { 
jQuery('#mudivsho').fadeOut(duration); 
} 
}); 
jQuery('#mudivsho').click(function(event) { 
event.preventDefault(); 
jQuery('html, body').animate({scrollTop: 0}, duration); 
return false; 
}); 
});

見，如果這個工程。

來源

2017-02-08 21:52:30 ExplodingPedro12

你可以這樣做動畫。

$("document").ready(function(){ 
    $(window).scroll(function(){ 

     $("#mudivsho1").animate({left: "10%",top: "30%",width: "20%",height: "30%",margin: "0 10%"}, 500); 
     $("#mudivsho2").animate({left: "50%",top: "50%",width: "40%",height: "30%",margin: "0 20%"}, 500); 
     $("#mudivsho3").animate({left: "100%",top: "70%",width: "80%",height: "30%",margin: "0 30%"}, 500); 

    }); 
});

演示：http://codesheet.org/cs/ZWLNfwqa

來源

2017-02-08 21:58:43

謝謝你這是有用的，我跟着這個例子，如果有人需要它https://michalsnik.github.io/aos/ –

當滾動頁面時動畫一個div

回答

相關問題