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

滚动页面时为div设置动画

3 个答案: