页面滚动上的技巧栏动画

时间：2017-08-28 14:30:26

标签： jquery html css

如何在页面滚动的特定部分上实现技能栏动画。我试图制作一个滑动技能栏动画，但没有达到我想要的效果。它在起始页面开始动画，但我想让它在特定的页面部分滚动上开始动画。

在我的下面的代码中，我想要在第三秒的页面滚动时启动动画。但它没有发生。请使用附加的固定代码片段修复代码。

HTML 

<section id="first-sec"></section>
<section id="second-sec"></section>
<section id="third-sec">

  <div class="container">
    <!-- First bar -->
    <div class="progress-bar" data-percentage="95%">
      <h4 class="progress-title-holder">
        <span class="progress-title">HTML5</span>
         <span class="progress-number-wrapper">
      <span class="progress-number-mark">
        <span class="percent"></span>
         <span class="down-arrow"></span>
        </span>
        </span>
        </h4>
      <div class="progress-content-outter">
        <div class="progress-content"></div>
      </div>
    </div>
    <!-- Second bar -->
    <div class="progress-bar" data-percentage="90%">
      <h4 class="progress-title-holder clearfix">
            <span class="progress-title">CSS3</span>
                <span class="progress-number-wrapper">
      <span class="progress-number-mark">
        <span class="percent"></span>
            <span class="down-arrow"></span>
                </span>
                </span>
                </h4>
      <div class="progress-content-outter">
        <div class="progress-content"></div>
      </div>
    </div>

CSS 

body{
  margin:0;
}

#first-sec {
  height:100vh;
  background-color:#283c86;
}

#second-sec {
  height:100vh;
  background-color:#45a247;}

#third-sec {

}

/*====Skill Bar=====*/

.container {
    height: 300px;
    max-width: 100%;
  width:70%;
  margin: 10% auto;
}

.progress-bar {
    margin: 20px 0 10px;
    overflow: hidden;
    /*padding-left:20px;
  padding-right: 25px; /* Separate bars from container */
}

.progress-title-holder {
    padding-bottom: 7px;
    position: relative;
    margin: 5px 0;
    font-family: Montserrat, sans-serif;
    font-size: 2e;
    line-height: 15px;
    font-weight: 400;
    color: #2e2e2e;
}

.progress-title {
    z-index: 100;
    font-weight: bold;
}

.progress-number-wrapper {
    width: 100%;
    z-index: 10;
}

.progress-number-mark {
    margin-bottom: 4px;
    border-radius: 3px;
    background-color: #00d2ff;
    padding: 0 8px;
    position: absolute;
    bottom: 0;
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.progress-number-wrapper,
.progress-number-mark {
    font-family: Open Sans, sans-serif;
    font-size: 11px;
    line-height: 24px;
    height: 24px;
    letter-spacing: 0px;
    font-weight: 600;
    font-style: normal;
    text-transform: none;
    color: #ffffff;
}

.down-arrow {
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 3px solid #00d2ff;
    position: absolute;
    left: 50%;
    top: 100%;
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.progress-content-outter {
    height: 12px;
    background-color: #E1E1E0;
}

.progress-content {
    height: 21px;
    background-color: #00d2ff;
    width: 0%;
}

JQUERY 

// Skill Bar Animation

jQuery(document).ready(function() {
  jQuery(".progress-bar").each(function() {
    jQuery(this).find(".progress-content").animate(
      {
        width: jQuery(this).attr("data-percentage")
      },
      2000
    );

    jQuery(this).find(".progress-number-mark").animate(
      {
        left: jQuery(this).attr("data-percentage")
      },
      {
        duration: 2000,
        step: function(now, fx) {
          var data = Math.round(now);
          jQuery(this).find(".percent").html(data + "%");
        }
      }
    );
  });
});

1 个答案:

答案 0 :(得分：1)

布局是否保持这样？最快的方法是比较滚动时的scrollTop()值，并在第三部分即将可见时触发动画。

编辑：您当然可以offset到if条件，以增加必须滚动以启动动画的像素数量。

这是一个工作小提琴：

＆＃13;
＆＃13; 
jQuery(document).ready(function() {
/*MODIFICATION START*/
  jQuery(document).on('scroll', function(){
    if(jQuery('html,body').scrollTop() > jQuery('#first-sec').height()){
/*MODIFICATION END*/
      jQuery(".progress-bar").each(function() {
        jQuery(this).find(".progress-content").animate({
          width: jQuery(this).attr("data-percentage")
        },2000);

        jQuery(this).find(".progress-number-mark").animate({
          left: jQuery(this).attr("data-percentage")
        },{
          duration: 2000,
          step: function(now, fx) {
            var data = Math.round(now);
            jQuery(this).find(".percent").html(data + "%");
          }
        });
      });
/*MODIFICATION START*/
    }
  });
/*MODIFICATION END*/
});
＆＃13; 
body{
  margin:0;
}

#first-sec {
  height:100vh;
  background-color:#283c86;
}

#second-sec {
  height:100vh;
  background-color:#45a247;}

#third-sec {

}

/*====Skill Bar=====*/

.container {
    height: 300px;
    max-width: 100%;
  width:70%;
  margin: 10% auto;
}

.progress-bar {
    margin: 20px 0 10px;
    overflow: hidden;
    /*padding-left:20px;
  padding-right: 25px; /* Separate bars from container */
}

.progress-title-holder {
    padding-bottom: 7px;
    position: relative;
    margin: 5px 0;
    font-family: Montserrat, sans-serif;
    font-size: 2e;
    line-height: 15px;
    font-weight: 400;
    color: #2e2e2e;
}

.progress-title {
    z-index: 100;
    font-weight: bold;
}

.progress-number-wrapper {
    width: 100%;
    z-index: 10;
}

.progress-number-mark {
    margin-bottom: 4px;
    border-radius: 3px;
    background-color: #00d2ff;
    padding: 0 8px;
    position: absolute;
    bottom: 0;
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.progress-number-wrapper,
.progress-number-mark {
    font-family: Open Sans, sans-serif;
    font-size: 11px;
    line-height: 24px;
    height: 24px;
    letter-spacing: 0px;
    font-weight: 600;
    font-style: normal;
    text-transform: none;
    color: #ffffff;
}

.down-arrow {
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 3px solid #00d2ff;
    position: absolute;
    left: 50%;
    top: 100%;
    -moz-transform: translateX(-50%);
    -o-transform: translateX(-50%);
    transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
}

.progress-content-outter {
    height: 12px;
    background-color: #E1E1E0;
}

.progress-content {
    height: 21px;
    background-color: #00d2ff;
    width: 0%;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="first-sec"></section>
<section id="second-sec"></section>
<section id="third-sec">

  <div class="container">
    <!-- First bar -->
    <div class="progress-bar" data-percentage="95%">
      <h4 class="progress-title-holder">
        <span class="progress-title">HTML5</span>
         <span class="progress-number-wrapper">
      <span class="progress-number-mark">
        <span class="percent"></span>
         <span class="down-arrow"></span>
        </span>
        </span>
        </h4>
      <div class="progress-content-outter">
        <div class="progress-content"></div>
      </div>
    </div>
    <!-- Second bar -->
    <div class="progress-bar" data-percentage="90%">
      <h4 class="progress-title-holder clearfix">
            <span class="progress-title">CSS3</span>
                <span class="progress-number-wrapper">
      <span class="progress-number-mark">
        <span class="percent"></span>
            <span class="down-arrow"></span>
                </span>
                </span>
                </h4>
      <div class="progress-content-outter">
        <div class="progress-content"></div>
      </div>
    </div>
＆＃13;
＆＃13;
＆＃13;

相关问题
最新问题