Question

我制作了一个漂亮的技能栏，它运作正常。但是，我只想在滚动到该部分时启动我的技能栏效果。例如：当我向下滚动到技能部分时，我会在我的介绍部分中触发效果。

以下是代码：

;( 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>

演示：JsFiddle

Answer 1

您可以检查用户是否将窗口滚动到页面底部，然后再调用启动动画的代码部分：

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 {
	margin: 0 auto;
	width: 40%;
}

	#skills li {
		position: relative;
		margin-bottom: 32px;
		padding-left: 6px;
	}

		.bar_container,
		.bar {	
			position: absolute;
			left: 0;
			height: 5px;	
			border-radius: 5px;
			content: "";
		}

		.bar_container {
			bottom: -8px;
			width: 100%;
			background-color: #333;
			text-align: right;
		}			

			.bar {
				top: 0;
			}

				.pct {
					position: absolute;
					top: -19px;
					right: 0;
					opacity: 0;
					transition: opacity 0.3s linear;
				}

    <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">	
	<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>

Answer 2

您可以使用(window).scrollTop()或只使用插件jquery appear 您可以通过它跟踪视口中的元素

滚动到该部分时如何开始技能栏效果？

2 个答案: