comment Skill barre d'effet commence lorsque faites défiler jusqu'à la section?

J'ai fait une belle Skill Bar et ça marche bien. Cependant, je veux juste que mon effet de barre de compétence commence quand je fais défiler cette section. Par exemple: je suis dans ma section d'introduction quand je descends à la section des compétences cela va déclencher l'effet.comment Skill barre d'effet commence lorsque faites défiler jusqu'à la section?

Voici le code:

;(function($) { 
    "use strict"; 

    $(".bar").each(function() { 

     var $bar = $(this), 
      $pct = $bar.find(".pct"), 
      data = $bar.data("bar"); 

     setTimeout(function() { 

      $bar 
       .css("background-color", data.color) 
       .animate({ 
        "width": $pct.html() 
       }, data.speed || 1000, function() { 

        $pct.css({ 
         "color": data.color, 
         "opacity": 1 
        }); 

       }); 

     }, data.delay || 0);   

    }); 

})(jQuery);

<ul id="skills">  
    <li> 
     HTML5 
     <div class="bar_container"> 
      <span class="bar" data-bar='{ "color": "#19f" }'> 
       <span class="pct">82%</span> 
      </span> 
     </div> 
    </li> 
    <li> 
     CSS3 
     <div class="bar_container"> 
      <span class="bar" data-bar='{ "color": "#27ae60", "delay": 600 }'> 
       <span class="pct">100%</span> 
      </span> 
     </div> 
    </li> 
    <li> 
     PHP 
     <div class="bar_container"> 
      <span class="bar" data-bar='{ "color": "#9b59b6", "delay": 1200 }'> 
       <span class="pct">60%</span> 
      </span> 
     </div> 
    </li> 
    <li> 
     SQL 
     <div class="bar_container"> 
      <span class="bar" data-bar='{ "color": "#ae8a33", "delay": 1800 }'> 
       <span class="pct">30%</span> 
      </span> 
     </div> 
    </li> 
</ul>

Démo: JsFiddle

Source

2017-08-11 sami

utilisation window.scroll –

Vous pouvez vérifier que l'utilisateur a fait défiler la fenêtre vers le bas de la page et alors seulement appeler la partie du code qui commencent l'animation:

function animateSkillBars() { 
 
    $(".bar").each(function() { 
 

 
      var $bar = $(this), 
 
       $pct = $bar.find(".pct"), 
 
       data = $bar.data("bar"); 
 

 
      setTimeout(function() { 
 

 
       $bar 
 
        .css("background-color", data.color) 
 
        .animate({ 
 
         "width": $pct.html() 
 
        }, data.speed || 1000, function() { 
 

 
         $pct.css({ 
 
          "color": data.color, 
 
          "opacity": 1 
 
         }); 
 

 
        }); 
 

 
      }, data.delay || 0);   
 

 
     }); 
 
} 
 

 
;(function($) { 
 
    "use strict"; 
 
    $(window).scroll(function() { 
 
     if($(window).scrollTop() + $(window).height() == $(document).height()) { 
 
      animateSkillBars(); 
 
     } 
 
    }); 
 
    
 
})(jQuery);

* { margin: 0; padding: 0; border: 0; outline: 0; box-sizing: border-box; } 
 
body { padding: 50px; background-color: #222; font-family: Arial; font-size: 14px; color: #ccc; } 
 
ul { list-style-type: none; } 
 

 
#skills { 
 
\t margin: 0 auto; 
 
\t width: 40%; 
 
} 
 

 
\t #skills li { 
 
\t \t position: relative; 
 
\t \t margin-bottom: 32px; 
 
\t \t padding-left: 6px; 
 
\t } 
 

 
\t \t .bar_container, 
 
\t \t .bar { \t 
 
\t \t \t position: absolute; 
 
\t \t \t left: 0; 
 
\t \t \t height: 5px; \t 
 
\t \t \t border-radius: 5px; 
 
\t \t \t content: ""; 
 
\t \t } 
 

 
\t \t .bar_container { 
 
\t \t \t bottom: -8px; 
 
\t \t \t width: 100%; 
 
\t \t \t background-color: #333; 
 
\t \t \t text-align: right; 
 
\t \t } \t \t \t 
 

 
\t \t \t .bar { 
 
\t \t \t \t top: 0; 
 
\t \t \t } 
 

 
\t \t \t \t .pct { 
 
\t \t \t \t \t position: absolute; 
 
\t \t \t \t \t top: -19px; 
 
\t \t \t \t \t right: 0; 
 
\t \t \t \t \t opacity: 0; 
 
\t \t \t \t \t transition: opacity 0.3s linear; 
 
\t \t \t \t }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque!Lorem ipsum dolor sit amet, consectetur adipisicing elit. Velit illum dolores fugit ut ratione quidem rem eveniet id, sapiente facilis maxime suscipit nostrum. Alias, voluptatum ipsa unde nemo magni atque! 
 
    <br><br><br><br><br><br><br><br> 
 

 
<ul id="skills"> \t 
 
\t <li> 
 
\t \t HTML5 
 
\t \t <div class="bar_container"> 
 
\t \t \t <span class="bar" data-bar='{ "color": "#19f" }'> 
 
\t \t \t \t <span class="pct">82%</span> 
 
\t \t \t </span> 
 
\t \t </div> 
 
\t </li> 
 
\t <li> 
 
\t \t CSS3 
 
\t \t <div class="bar_container"> 
 
\t \t \t <span class="bar" data-bar='{ "color": "#27ae60", "delay": 600 }'> 
 
\t \t \t \t <span class="pct">100%</span> 
 
\t \t \t </span> 
 
\t \t </div> 
 
\t </li> 
 
\t <li> 
 
\t \t PHP 
 
\t \t <div class="bar_container"> 
 
\t \t \t <span class="bar" data-bar='{ "color": "#9b59b6", "delay": 1200 }'> 
 
\t \t \t \t <span class="pct">60%</span> 
 
\t \t \t </span> 
 
\t \t </div> 
 
\t </li> 
 
\t <li> 
 
\t \t SQL 
 
\t \t <div class="bar_container"> 
 
\t \t \t <span class="bar" data-bar='{ "color": "#ae8a33", "delay": 1800 }'> 
 
\t \t \t \t <span class="pct">30%</span> 
 
\t \t \t </span> 
 
\t \t </div> 
 
\t </li> 
 
</ul>

Source

2017-08-11 11:40:31 Dekel

Votre code a fonctionné mais seulement si le défilement est terminée :(, cela signifie l'utilisateur doit faire défiler jusqu'à la fin de la page, puis exécuter le code.
votre code: https://jsfiddle.net/bo3ggtx5/ – sami

Vous avez raison. Ma réponse est pour votre question originale :) vous êtes les bienvenus pour l'accepter. Vous pouvez changer ce code en fonction de vos besoins (au lieu de vérifier la hauteur de votre page - vérifiez la position de l'élément que vous voulez voir visible ...) – Dekel

Malheureusement, je ne connais pas la programmation, et mon code appartient à quelqu'un else :( – sami

Vous pouvez utiliser (window).scrollTop() ou tout simplement utiliser un plugin jquery appear à travers lequel vous pouvez suivre l'élément dans la fenêtre

Source

2017-08-11 11:42:01

thanx J'ai essayé mais j'ai un problème S'il vous plaît corriger mon code si possible - mon code: https://jsfiddle.net/bo3ggtx5/ – sami

comment Skill barre d'effet commence lorsque faites défiler jusqu'à la section?

Répondre

Questions connexes