Enable javascript effect when it is in the center of the screen

Question

Enable javascript effect when it is in the center of the screen

Navigation

#1 by (1 votes)

0

I have this effect in javascript.

// [email protected] version is used
// Docs: http://progressbarjs.readthedocs.org/en/1.0.0/

var bar = new ProgressBar.Circle(container, {
  color: '#aaa',
  // This has to be the same size as the maximum width to
  // prevent clipping
  strokeWidth: 4,
  trailWidth: 1,
  easing: 'easeInOut',
  duration: 1400,
  text: {
    autoStyleContainer: false
  },
  from: { color: '#aaa', width: 1 },
  to: { color: '#333', width: 4 },
  // 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);
    }

  }
});
bar.text.style.fontFamily = '"Raleway", Helvetica, sans-serif';
bar.text.style.fontSize = '2rem';

bar.animate(.75);  // Number from 0.0 to 1.0

#container {
  margin: 20px;
  width: 200px;
  height: 200px;
  position: relative;
}

<script src="https://rawgit.com/kimmobrunfeldt/progressbar.js/1.0.0/dist/progressbar.js"></script>
<link href="https://fonts.googleapis.com/css?family=Raleway:400,300,600,800,900" rel="stylesheet" type="text/css">
<div id="container"></div>

And the effect it creates is also reproduced in jsfiddle

I have already used and functional, the problem is that I need other 3 and also activate only when you scroll to the window, I know it can be done with scrollmagic, but I have no idea how to do it. Can somebody help me? Thanks

javascript html script

asked by Dario B. 06.07.2018 в 08:39

source

1 answer

Cumulate in column - could not be converted to int That a checkbox retains an old value

score 1 · Accepted Answer

Nothing, in the end I solved it like this:

 var werwirsind = $('#werwirsind'),
    abstand_nach_oben = werwirsind.offset().top;
$(document).scroll(function () {
    var abstand_gescrollt = $(this).scrollTop() + 100;
    if (abstand_nach_oben <= abstand_gescrollt) {
        bar1.animate(.9);
        bar2.animate(.7);
        bar3.animate(.6);
        bar4.animate(.75);
        $(this).unbind('scroll');
    }

});