ページをスクロールするときにアニメーションを表示する

Question

ユーザーがページをスクロールするときに3つのdivをアニメートしたい場合は、多くのttorialをたどりました。divsハザードは定義済みのCSSクラスですdivs。私はそれらを衰退させるか、またはこれを成し遂げる方法を冷静にすることを望む。お願いします 。

<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