-1

i' m making a fullpage Js website and i have animations in evry sections of my page, and i want that my animation play when i'm on the section, so i know have an after render option in this plugin but i dont know how to syntax it for make the css animation play there is my code ( in this example i'm trying to get the animation of the line of the section2 play only when i' m on the section2)

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>
Junyna
  • 165
  • 2
  • 13

1 Answers1

2

Check out this video: https://www.youtube.com/watch?v=qiCVPpI9l3M

That's ideal to deal with CSS animations, if you are looking for javascript or jQuery animations, then you should use the callbacks provided by fullPage.js such as afterLoad or 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");
        }
    }
});
Alvaro
  • 40,778
  • 30
  • 164
  • 336
  • i understand my problem is that i dont know how to write the code for make the css play when i m on the section : something like if( index == 3 ){ $('media').css(0).play(); } ...? actually i make my animation with css and i want to call it with javascript for make it play to each section – Junyna Mar 28 '15 at 19:57
  • Then you should start learning CSS and Javascript before trying to use them... Or ask for your specific questions rather than a general one. I have answered your question. If you have any other issues, you should open new questions for them. – Alvaro Mar 29 '15 at 11:50