Wie funktioniert der Skill-Bar-Effekt, wenn Sie zum Abschnitt scrollen?

Ich habe einen schönen Skill Bar gemacht und es funktioniert einwandfrei. Wie auch immer, ich möchte nur, dass mein Skillbar-Effekt startet, wenn ich zu diesem Abschnitt scrolle. Zum Beispiel: Ich bin in meinem Einführungsabschnitt, wenn ich zum Fertigkeitsabschnitt hinunter scrolle, wird es den Effekt auslösen. HierWie funktioniert der Skill-Bar-Effekt, wenn Sie zum Abschnitt scrollen?

ist der 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>

Demo: JsFiddle

Quelle

2017-08-11 sami

Verwendung window.scroll –

können Sie überprüfen, ob der Benutzer das Fenster auf den unteren Rand der Seite gescrollt und erst dann rufen Sie den Teil des Codes dass starten die 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>

Quelle

2017-08-11 11:40:31 Dekel

Ihr Code gearbeitet verfolgen können aber nur dann, wenn die Scroll abgeschlossen ist :(, dass Mittel Der Benutzer muss zum Ende der Seite blättern und den Code ausführen.
Ihr Code: https://jsfiddle.net/bo3ggtx5/ – sami

Sie haben Recht. Meine Antwort ist für Ihre ursprüngliche Frage :) Sie können es gerne annehmen. Sie können diesen Code basierend auf Ihren Bedürfnissen ändern (anstatt die Höhe Ihrer Seite zu überprüfen - überprüfen Sie die Position des Elements, das sichtbar sein soll ...) – Dekel

Leider kann ich nicht programmieren, und mein Code gehört jemandem sonst :( – sami

können Sie (window).scrollTop() verwenden oder einfach nur ein Plugin verwenden jquery appear , über die Sie das Element im Ansichtsfenster

Quelle

2017-08-11 11:42:01

danke Ich habe versucht, aber ich habe ein Problem Bitte korrigieren Sie meinen Code wenn möglich - mein Code: https://jsfiddle.net/bo3ggtx5/ – sami

Wie funktioniert der Skill-Bar-Effekt, wenn Sie zum Abschnitt scrollen?

Antwort

Verwandte Themen