第节上的全页JS动画

fullpage JS animation on section

本文关键字：JS 动画第节更新时间：2023-09-26

我正在制作一个完整的Js网站，我的页面的每个部分都有动画，我希望我的动画在我所在的部分播放，所以我知道这个插件中有一个后渲染选项，但我不知道如何用语法使css动画播放这是我的代码（在这个例子中，我试图让第2节的行的动画只在我在第2节时播放）

var smallCircles= ['top','right','bottom','left','top'];
$(document).ready(function() {
			$('#fullpage').fullpage({
				anchors: ['firstPage', 'secondPage', '3rdPage', '4thPage', 'lastPage'],
				scrollingSpeed: 1000,	
       
			
				   });
				});

body {
	height:100%;
	margin:0;
	padding:0;
	overflow:hidden;
}
.fp-section {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
	text-align:center;
}
.fp-section.fp-table, .fp-slide.fp-table {
    display: table;
    table-layout:fixed;
    width: 100%;
}
.fp-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
.fp-scrollable {
    overflow: scroll;
}
.fp-notransition {
    -webkit-transition: none !important;
    transition: none !important;
}
#line{
    position:absolute;
	width:340px;
	margin-top:20px;
	height:4px;
	background:rgba(0,0,0,1);
	  -moz-animation-duration: 1s;
      -webkit-animation-duration: 1s;
      -moz-animation-name: slidein;
      -webkit-animation-name: slidein;
}
 @-moz-keyframes slidein {
      from {
        margin-left:100%;
        width:300%
      }
      
      to {
        margin-left:0%;
        width:600%;
      }
    }
 @-webkit-keyframes slidein {
      from {
        margin-left:0%;
        width:0%
      }
      
      to {
        margin-left:0%;
        width:340px;
      }
    }

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
	<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/jquery.fullPage.js"></script>
  <div id="fullpage">
          
            <div class="section " id="accueil">
                <h2>section1</h2>
                <p></p>
            </div>
            <div class="section" id="don">
              <h2>section2</h2>
              <div id="line"></div>
 
          
            </div>
            <div class="section" id="tri">
           
                    <h2>3</h2>
             
            </div>
            <div class="section" id="recycle">
                    <h2>4</h2>
                    </div>
    
        </div>

查看此视频：https://www.youtube.com/watch?v=qiCVPpI9l3M

这是处理CSS动画的理想方法，如果您正在寻找javascript或jQuery动画，那么您应该使用fullPage.js提供的回调，如afterLoad或onLeave:

 $('#fullpage').fullpage({
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    afterLoad: function(anchorLink, index){
        var loadedSection = $(this);
        //using index
        if(index == 3){
            alert("Section 3 ended loading");
        }
        //using anchorLink
        if(anchorLink == 'secondSlide'){
            alert("Section 2 ended loading");
        }
    }
});