Wie jQuery in der Seitenansicht ausgelöst wird?

Question

Ich möchte, dass diese Animation startet, wenn der Teil entweder aus der Navigationsleiste ausgewählt ist oder beim Scrollen sichtbar ist.
Beispielcode:
HTML:

<section id="section-skills" class="section appear clearfix"> 
      <div class="container"> 
       <div class="row mar-bot40"> 
        <div class="col-md-offset-3 col-md-6"> 
         <div class="section-header"> 
          <h2 class="section-heading animated" data-animation="bounceInUp">Skills</h2> 
    </div> 
</div> 
</div> 
</div> 
<div class="container"> 
       <div class="row" > 
       <div class="col-md-6"> 
<div class="skillbar clearfix " data-percent="80%"> 
    <div class="skillbar-title" style="background: #333333;"><span>Java</span></div> 
    <div class="skillbar-bar" style="background: #525252;"></div> 
    <div class="skill-bar-percent">75%</div> 
</div> <!-- End Skill Bar --> 

<!--REST OF THE CODE FOLLOWS AS IN THE EXAMPLE LINK PROVIDED--> 

</section> 

Ich versuchte waypoint in jQuery verwenden, aber es funktioniert nicht.

jQuery(document).ready(function(){ 
    $('#section-skills').waypoint(function(direction) { 
    jQuery('.skillbar').each(function(){ 
     jQuery(this).find('.skillbar-bar').animate({ 
      width:jQuery(this).attr('data-percent') 
     },6000); 
    }); 
}); 
}); 

Jede Lösung wäre wirklich hilfreich.

Answer 1

Verwenden Sie .position(). Top, um die oberste Position der .skillbar zu erhalten.

Dann nutzen Sie die .scroll() Ereignis die aktuelle Position erhalten das Fenster mit .scrollTop(). ValueOf() gescrollt wird.

Wenn der Wert .scrollTop nahe genug an der oberen Position der .skillbar ist, muss das Element angezeigt werden, sodass Sie diese Bedingung als Voraussetzung für den Aufruf der Animation festlegen können.

jQuery(document).ready(function(){ 
    var skillBarTopPos = jQuery('.skillbar').position().top; 
    jQuery(document).scroll(function(){ 
    var scrolled_val = $(document).scrollTop().valueOf(); 
    if(scrolled_val>skillBarTopPos-250) startAnimation(); 
    }); 

    function startAnimation(){ 
    jQuery('.skillbar').each(function(){ 
     jQuery(this).find('.skillbar-bar').animate({ 
     width:jQuery(this).attr('data-percent') 
     },6000); 
    }); 
    }; 

}); 

http://api.jquery.com/position/

How to detect scroll position of page using jQuery

http://api.jquery.com/scrollTop/#scrollTop2

Answer 2

Verwenden jQuery Appear Repository die Animation zu starten, wenn die Elemente in Ansichtsfenster sind. Hier

ist der Beispielcode

HTML:

<!-- Progress Bars --> 
<div class="skills-wrap"> 
    <div class="container"> 
     <!-- Blue progress bars --> 
     <h1 class="text-center">BLUE PROGRESS BARS</h1> 
     <div class="skills progress-bar1"> 
      <ul class="col-md-6 col-sm-12 col-xs-12"> 
       <li class="progress"> 
        <div class="progress-bar" data-width="85"> 
         Wordpress 85% 
        </div> 
       </li> 
       <li class="progress"> 
        <div class="progress-bar" data-width="65"> 
         Graphic Design 65% 
        </div> 
       </li> 
       <li class="progress"> 
        <div class="progress-bar" data-width="90"> 
         HTML/CSS Design 90% 
        </div> 
       </li> 
       <li class="progress"> 
        <div class="progress-bar" data-width="60"> 
         SEO 60% 
        </div> 
       </li> 
      </ul> 
      <ul class="col-md-6 col-sm-12 col-xs-12 wow fadeInRight"> 
       <li class="progress"> 
        <div class="progress-bar" data-width="75"> 
         Agencying 75% 
        </div> 
       </li> 
       <li class="progress"> 
        <div class="progress-bar" data-width="95"> 
         App Development 95% 
        </div> 
       </li> 
       <li class="progress"> 
        <div class="progress-bar" data-width="70"> 
         IT Consultency 70% 
        </div> 
       </li> 
       <li class="progress"> 
        <div class="progress-bar" data-width="90"> 
         Theme Development 90% 
        </div> 
       </li> 
      </ul> 
     </div> 
     <!-- /Blue progress bars --> 
    </div> 
</div> 

Die CSS:

.progress { 
    height: 35px; 
    line-height: 35px; 
    margin-bottom: 45px; 
    background: #fff; 
    border-radius: 0; 
    box-shadow: none; 
    list-style: none; 
} 

.progress-bar { 
    font-weight: 600; 
    line-height: 35px; 
    padding-left: 20px; 
    text-align: left; 
} 

.progress-bar1 .progress-bar { 
    background: #026ea6; 
} 

Script:

jQuery(document).ready(function() { 

/*----------------------------------------------------*/ 
/* Animated Progress Bars 
/*----------------------------------------------------*/ 

    jQuery('.skills li').each(function() { 
     jQuery(this).appear(function() { 
      jQuery(this).animate({opacity:1,left:"0px"},800); 
      var b = jQuery(this).find(".progress-bar").attr("data-width"); 
      jQuery(this).find(".progress-bar").animate({ 
      width: b + "%" 
      }, 1300, "linear"); 
     }); 
    }); 

}); 

Die Live-Demo ist hier bei Bootstrap Animated Progress Bar

Answer 3

Hier gehen Sie. Ich habe einen neuen Stift erstellt Progress Bars

Alles, was Sie tun müssen, ist, dieses Skript zu verwenden, um die Animation auszuführen, wenn sie im Ansichtsfenster erscheint.

jQuery(document).ready(function(){ 
    jQuery('.skillbar').each(function(){ 
     jQuery(this).appear(function() { 
      jQuery(this).find('.skillbar-bar').animate({ 
       width:jQuery(this).attr('data-percent') 
      },6000); 
     }); 
    }); 
}); 

Und nicht zu vergessen die jQuery Appear Skript auf Ihrer Website hinzuzufügen. Wenn Sie noch ein Problem haben, lassen Sie es mich bitte wissen.