滚动页面时为div设置动画

Question

i want to annimate 3 divs when the user scroll down the page, i followed many ttorials, it didn't work any suggestions how to do it, because the divs haz a defined css classes this is the divs . i wante them to fade up or down or any cool anniation how to acomplish this . please .

  <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

This javascript will allow you to move a div.

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

and this will allow you to make an object appear (fade) on scroll:

$('.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;
});
});

So, what you may want is:

$('#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;
});
});

See if this works.

Answer 3

you can animate like this.

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

    });
});

Demo: http://codesheet.org/cs/ZWLNfwqa