滾動頁面時為div設置動畫

Question

我想在用戶向下滾動頁面時生成3個div，我跟着很多ttorials，它沒有任何建議怎么做，因為divs定義了css類這就是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>

Answer 1

我想你可以在這個網站上找到如何制作它： https ： //css-tricks.com/aos-css-driven-scroll-animation-library/

Answer 2

這個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;
});
});

看看這是否有效。

Answer 3

你可以像這樣動畫。

$("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