在元素可见时执行javascript函数

Question

我想在我的网站中使用progressbar.js，但以其他方式。如果它可以代表我在一些领域的技能，那就太棒了。 我的主要想法是使用加载指定百分比量的动画的圆形进度条，但是jquery .onscroll（）事件实际上是非优化的并且使页面非常滞后... 有没有可能的方法来优化它？或者甚至是更好的方法吗？ My website＆lt; - 这是在网站上

var html , css , php , javascript , cpp , mysql ,csh, java;
$(document).ready(function(){
Dynamic_load();
});

$(window).scroll(function(){
  $('#skills_event').inViewport(function(px){
    if (px) {
      html.animate(0.99);
      css.animate(0.85);
      javascript.animate(0.75);
      php.animate(0.59);
      cpp.animate(0.89);
      mysql.animate(0.75);
      java.animate(0.45);
      csh.animate(0.32);
    }else {
      css.animate(0);
      javascript.animate(0);
      php.animate(0);
      cpp.animate(0);
      mysql.animate(0);
      java.animate(0);
      csh.animate(0);
    }
  });
});

function Dynamic_load()
{
   html = new ProgressBar.Circle("#knowlage_html", {
    color: '#aaa',
    // This has to be the same size as the maximum width to
    // prevent clipping
    strokeWidth: 6,
    trailWidth: 1,
    easing: 'easeInOut',
    duration: 1400,
    text: {
      autoStyleContainer: true
    },
    from: { color: '#aaa', width: 1 },
    to: { color: '#880e4f', width: 6 },
    // Set default step function for all animate calls
    step: function(state, circle) {
      circle.path.setAttribute('stroke', state.color);
      circle.path.setAttribute('stroke-width', state.width);

      var value = Math.round(circle.value() * 100);
      if (value === 0) {
        circle.setText('');
      } else {
        circle.setText(value + " % <br> HTML");
      }

    }
  });
  html.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
  html.text.style.fontSize = '1rem';
  html.animate(0);
   css = new ProgressBar.Circle("#knowlage_css", {
    color: '#aaa',
    // This has to be the same size as the maximum width to
    // prevent clipping
    strokeWidth: 6,
    trailWidth: 1,
    easing: 'easeInOut',
    duration: 1400,
    text: {
      autoStyleContainer: true
    },
    from: { color: '#aaa', width: 1 },
    to: { color: '#880e4f', width: 6 },
    // Set default step function for all animate calls
    step: function(state, circle) {
      circle.path.setAttribute('stroke', state.color);
      circle.path.setAttribute('stroke-width', state.width);

      var value = Math.round(circle.value() * 100);
      if (value === 0) {
        circle.setText('');
      } else {
        circle.setText(value + " % <br> CSS3.0");
      }

    }
  });
  css.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
  css.text.style.fontSize = '1rem';
  css.animate(0);
   javascript = new ProgressBar.Circle("#knowlage_javascript", {
    color: '#aaa',
    // This has to be the same size as the maximum width to
    // prevent clipping
    strokeWidth: 6,
    trailWidth: 1,
    easing: 'easeInOut',
    duration: 1400,
    text: {
      autoStyleContainer: true
    },
    from: { color: '#aaa', width: 1 },
    to: { color: '#880e4f', width: 6 },
    // Set default step function for all animate calls
    step: function(state, circle) {
      circle.path.setAttribute('stroke', state.color);
      circle.path.setAttribute('stroke-width', state.width);

      var value = Math.round(circle.value() * 100);
      if (value === 0) {
        circle.setText('');
      } else {
        circle.setText(value + " % <br> JavaScript");
      }

    }
  });
  javascript.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
  javascript.text.style.fontSize = '1rem';
  javascript.animate(0);
   php = new ProgressBar.Circle("#knowlage_php", {
    color: '#aaa',
    // This has to be the same size as the maximum width to
    // prevent clipping
    strokeWidth: 6,
    trailWidth: 1,
    easing: 'easeInOut',
    duration: 1400,
    text: {
      autoStyleContainer: true
    },
    from: { color: '#aaa', width: 1 },
    to: { color: '#880e4f', width: 6 },
    // Set default step function for all animate calls
    step: function(state, circle) {
      circle.path.setAttribute('stroke', state.color);
      circle.path.setAttribute('stroke-width', state.width);

      var value = Math.round(circle.value() * 100);
      if (value === 0) {
        circle.setText('');
      } else {
        circle.setText(value + " % <br> PHP");
      }

    }
  });
  php.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
  php.text.style.fontSize = '1rem';
  php.animate(0);
   cpp = new ProgressBar.Circle("#knowlage_cpp", {
    color: '#aaa',
    // This has to be the same size as the maximum width to
    // prevent clipping
    strokeWidth: 6,
    trailWidth: 1,
    easing: 'easeInOut',
    duration: 1400,
    text: {
      autoStyleContainer: true
    },
    from: { color: '#aaa', width: 1 },
    to: { color: '#880e4f', width: 6 },
    // Set default step function for all animate calls
    step: function(state, circle) {
      circle.path.setAttribute('stroke', state.color);
      circle.path.setAttribute('stroke-width', state.width);

      var value = Math.round(circle.value() * 100);
      if (value === 0) {
        circle.setText('');
      } else {
        circle.setText(value + " % <br> C++");
      }

    }
  });
  cpp.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
  cpp.text.style.fontSize = '1rem';
  cpp.animate(0);
   mysql = new ProgressBar.Circle("#knowlage_mysql", {
    color: '#aaa',
    // This has to be the same size as the maximum width to
    // prevent clipping
    strokeWidth: 6,
    trailWidth: 1,
    easing: 'easeInOut',
    duration: 1400,
    text: {
      autoStyleContainer: true
    },
    from: { color: '#aaa', width: 1 },
    to: { color: '#880e4f', width: 6 },
    // Set default step function for all animate calls
    step: function(state, circle) {
      circle.path.setAttribute('stroke', state.color);
      circle.path.setAttribute('stroke-width', state.width);

      var value = Math.round(circle.value() * 100);
      if (value === 0) {
        circle.setText('');
      } else {
        circle.setText(value + " % <br> MySQL");
      }

    }
  });
  mysql.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
  mysql.text.style.fontSize = '1rem';
  mysql.animate(0);
   java = new ProgressBar.Circle("#knowlage_java", {
    color: '#aaa',
    // This has to be the same size as the maximum width to
    // prevent clipping
    strokeWidth: 6,
    trailWidth: 1,
    easing: 'easeInOut',
    duration: 1400,
    text: {
      autoStyleContainer: true
    },
    from: { color: '#aaa', width: 1 },
    to: { color: '#880e4f', width: 6 },
    // Set default step function for all animate calls
    step: function(state, circle) {
      circle.path.setAttribute('stroke', state.color);
      circle.path.setAttribute('stroke-width', state.width);

      var value = Math.round(circle.value() * 100);
      if (value === 0) {
        circle.setText('');
      } else {
        circle.setText(value + " % <br> Java");
      }

    }
  });
  java.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
  java.text.style.fontSize = '1rem';
  java.animate(0);
   csh = new ProgressBar.Circle("#knowlage_Csharp", {
    color: '#aaa',
    // This has to be the same size as the maximum width to
    // prevent clipping
    strokeWidth: 6,
    trailWidth: 1,
    easing: 'easeInOut',
    duration: 1400,
    text: {
      autoStyleContainer: true
    },
    from: { color: '#aaa', width: 1 },
    to: { color: '#880e4f', width: 6 },
    // Set default step function for all animate calls
    step: function(state, circle) {
      circle.path.setAttribute('stroke', state.color);
      circle.path.setAttribute('stroke-width', state.width);

      var value = Math.round(circle.value() * 100);
      if (value === 0) {
        circle.setText('');
      } else {
        circle.setText(value + " % <br> C#");
      }

    }
  });
  csh.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
  csh.text.style.fontSize = '1rem';
  csh.animate(0);
}

.bigdiv{
min-height:300px;
background-color:blue;
}
.col{
max-width: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://mojastronadotestow.ugu.pl/js/viewpoint.js"></script>
<script src="http://mojastronadotestow.ugu.pl/js/progressbar.min.js"></script>
<div class="bigdiv"></div>
  <div id="skills_event" class="row">
        <div class="col s3">
          <div id="knowlage_html" style="text-algin: center; vertival-algin:center; position:relative;"></div>
        </div>
        <div class="col s3">
          <div id="knowlage_css" style="text-algin: center; vertival-algin:center; position:relative;"></div>
        </div>
        <div class="col s3">
          <div id="knowlage_javascript" style="text-algin: center; vertival-algin:center; position:relative;"></div>
        </div>
        <div class="col s3">
          <div id="knowlage_php" style="text-algin: center; vertival-algin:center; position:relative;"></div>
        </div>
        <div class="col s3">
          <div id="knowlage_cpp" style="text-algin: center; vertival-algin:center; position:relative;"></div>
        </div>
        <div class="col s3">
          <div id="knowlage_java" style="text-algin: center; vertival-algin:center; position:relative;"></div>
        </div>
        <div class="col s3">
          <div id="knowlage_mysql" style="text-algin: center; vertival-algin:center; position:relative;"></div>
        </div>
        <div class="col s3">
          <div id="knowlage_Csharp" style="text-algin: center; vertival-algin:center; position:relative;"></div>
        </div>
      </div>

Answer 1

您可以使用视口库来确定元素何时在浏览器视图中。

这是github的链接：https://github.com/patik/within-viewport