Skip to main content
replaced http://stackoverflow.com/ with https://stackoverflow.com/
Fonte Link

Função adaptada desta outra: progress-bar-when-scrollprogress-bar-when-scroll

Função adaptada desta outra: progress-bar-when-scroll

Função adaptada desta outra: progress-bar-when-scroll

adicionou 53 caracteres ao conteúdo
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361
$('.circle').circleProgress({
  value: 0,
  fill: {
    color: '#0000ff'
  }
})

var myFunction = function(window_offset) {
  if (window_offset < 100) {
    myFunction = function() {};
    $('".circle'circle").circleProgress({
      value: 0.85,
      fill: {
        color: '#0000ff'
      }
    });

    myFunction = function() {};
    return 1;
};

$(window).scrollbind("scroll resize", function() {
  var $circle = $(".circle");
  var window_offsetwin = $(window);

  var isVibile = win.scrollTop() + win.height() > $circle.offset().top -+ $(window)$circle.scrollTopouterHeight(); 

  $("#window_offset").html(window_offsetisVibile ? "Visível" : "Invisível");

  if (isVibile) {
     myFunction(window_offset$circle);
  }
});
.circle {
  margin: 6px 6px 20px;
  display: inline-block;
  position: relative;
  text-align: center;
  line-height: 1.2;
}
.circle strong {
  position: absolute;
  top: 51px;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 60px;
}
.circle strong i {
  font-style: normal;
  font-size: 1.4em;
  font-weight: 300;
}
.fixo {
  position: fixed!important;
  top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<div id="skills" class="container content center-align skill-progress">
  <br/>
  <br/>
  <label class="fixo" id="window_offset"></label>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <div class="circle">
    <strong></strong>
  </div>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
</div>
$('.circle').circleProgress({
  value: 0,
  fill: {
    color: '#0000ff'
  }
})

var myFunction = function(window_offset) {
  if (window_offset < 100) {
    myFunction = function() {};
    $('.circle').circleProgress({
      value: 0.85,
      fill: {
        color: '#0000ff'
      }
    })
  }
  return 1;
};

$(window).scroll(function() {
  var $circle = $(".circle");
  var window_offset = $circle.offset().top - $(window).scrollTop();
  $("#window_offset").html(window_offset);
  myFunction(window_offset);
});
.circle {
  margin: 6px 6px 20px;
  display: inline-block;
  position: relative;
  text-align: center;
  line-height: 1.2;
}
.circle strong {
  position: absolute;
  top: 51px;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 60px;
}
.circle strong i {
  font-style: normal;
  font-size: 1.4em;
  font-weight: 300;
}
.fixo {
  position: fixed!important;
  top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<div id="skills" class="container content center-align skill-progress">
  <br/>
  <br/>
  <label class="fixo" id="window_offset"></label>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <div class="circle">
    <strong></strong>
  </div>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
</div>
$('.circle').circleProgress({
  value: 0,
  fill: {
    color: '#0000ff'
  }
})

var myFunction = function () {
    $(".circle").circleProgress({
      value: 0.85,
      fill: {
        color: '#0000ff'
      }
    });

    myFunction = function() {};
    return 1;
};

$(window).bind("scroll resize", function() {
  var $circle = $(".circle");
  var win = $(window);

  var isVibile = win.scrollTop() + win.height() > $circle.offset().top + $circle.outerHeight(); 

  $("#window_offset").html(isVibile ? "Visível" : "Invisível");

  if (isVibile) {
     myFunction($circle);
  }
});
.circle {
  margin: 6px 6px 20px;
  display: inline-block;
  position: relative;
  text-align: center;
  line-height: 1.2;
}
.circle strong {
  position: absolute;
  top: 51px;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 60px;
}
.circle strong i {
  font-style: normal;
  font-size: 1.4em;
  font-weight: 300;
}
.fixo {
  position: fixed!important;
  top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<div id="skills" class="container content center-align skill-progress">
  <br/>
  <br/>
  <label class="fixo" id="window_offset"></label>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <div class="circle">
    <strong></strong>
  </div>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
</div>
adicionou 3957 caracteres ao conteúdo
Fonte Link
MarceloBoni
  • 6,4mil
  • 3
  • 30
  • 62

Pelo queNão entendi gostariadireito o objetivo final da pergunta, existem duas interpretações do que necessita

1)

Gostaria que fosse uma barra de progresso pro conteúdo da pagina?

Se foifor isso mesmo, função: Podes usar window.addEventListener('scroll', function() { pegando o tamanho da tela do usuário (var height = document.body.getBoundingClientRect().height - window.innerHeight;) com a posição atual da tela (var top = window.scrollY;) para ir recalculando a porcentagem atual e recarregando o script $('.circle').circleProgress({ com o valor da porcentagem.

Função adaptada daquidesta outra: progress-bar-when-scroll

function updateProgress(num1, num2) {
  var percent = Math.ceil(num1 / num2 * 100);
  $('.circle').circleProgress({
    value: percent / 100,
    animation: false,
    fill: {color: '#0000ff'}
  })
}

window.addEventListener('scroll', function() {
  var top = window.scrollY;
  var height = document.body.getBoundingClientRect().height - window.innerHeight;
  updateProgress(top, height);
});
.circle {
  margin: 6px 6px 20px;
  display: inline-block;
  position: relative;
  text-align: center;
  line-height: 1.2;
}
.circle strong {
  position: absolute;
  top: 51px;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 60px;
}
.circle strong i {
  font-style: normal;
  font-size: 1.4em;
  font-weight: 300;
}
.fixo {
  position: fixed!important;
  top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<div id="skills" class="container content center-align skill-progress">
  <div class="fixo">
    <div class="circle">
      <strong></strong>
    </div>
  </div>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
</div>


2)

Gostaria que a animação iniciasse assim que chegar no elemento?

Pode fazer algo parecido: Ao iniciar a pagina chamar a função $('.circle').circleProgress({ com value: 0, criar uma função que calcule qual a distancia do elemento levando em consideração a atual visualização da tela:

$(window).scroll(function() {
  var $circle = $(".circle");
  var window_offset = $circle.offset().top - $(window).scrollTop();
});

E dentro desta função chamar outra função que se "alto destrua" quando ultrapassar um certo limite estipulado:

var myFunction = function(window_offset) {
  if (window_offset < 100) {
    myFunction = function() {};

Dentro desse limite estipulado ainda chamar novamente a função $('.circle').circleProgress({ com o valor da porcentagem que você gostaria.

$('.circle').circleProgress({
  value: 0,
  fill: {
    color: '#0000ff'
  }
})

var myFunction = function(window_offset) {
  if (window_offset < 100) {
    myFunction = function() {};
    $('.circle').circleProgress({
      value: 0.85,
      fill: {
        color: '#0000ff'
      }
    })
  }
  return 1;
};

$(window).scroll(function() {
  var $circle = $(".circle");
  var window_offset = $circle.offset().top - $(window).scrollTop();
  $("#window_offset").html(window_offset);
  myFunction(window_offset);
});
.circle {
  margin: 6px 6px 20px;
  display: inline-block;
  position: relative;
  text-align: center;
  line-height: 1.2;
}
.circle strong {
  position: absolute;
  top: 51px;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 60px;
}
.circle strong i {
  font-style: normal;
  font-size: 1.4em;
  font-weight: 300;
}
.fixo {
  position: fixed!important;
  top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<div id="skills" class="container content center-align skill-progress">
  <br/>
  <br/>
  <label class="fixo" id="window_offset"></label>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <div class="circle">
    <strong></strong>
  </div>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
</div>

Pelo que entendi gostaria que fosse uma barra de progresso pro conteúdo da pagina?

Se foi isso mesmo, função adaptada daqui: progress-bar-when-scroll

function updateProgress(num1, num2) {
  var percent = Math.ceil(num1 / num2 * 100);
  $('.circle').circleProgress({
    value: percent / 100,
    animation: false,
    fill: {color: '#0000ff'}
  })
}

window.addEventListener('scroll', function() {
  var top = window.scrollY;
  var height = document.body.getBoundingClientRect().height - window.innerHeight;
  updateProgress(top, height);
});
.circle {
  margin: 6px 6px 20px;
  display: inline-block;
  position: relative;
  text-align: center;
  line-height: 1.2;
}
.circle strong {
  position: absolute;
  top: 51px;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 60px;
}
.circle strong i {
  font-style: normal;
  font-size: 1.4em;
  font-weight: 300;
}
.fixo {
  position: fixed!important;
  top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<div id="skills" class="container content center-align skill-progress">
  <div class="fixo">
    <div class="circle">
      <strong></strong>
    </div>
  </div>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
</div>

Não entendi direito o objetivo final da pergunta, existem duas interpretações do que necessita

1)

Gostaria que fosse uma barra de progresso pro conteúdo da pagina?

Se for isso mesmo: Podes usar window.addEventListener('scroll', function() { pegando o tamanho da tela do usuário (var height = document.body.getBoundingClientRect().height - window.innerHeight;) com a posição atual da tela (var top = window.scrollY;) para ir recalculando a porcentagem atual e recarregando o script $('.circle').circleProgress({ com o valor da porcentagem.

Função adaptada desta outra: progress-bar-when-scroll

function updateProgress(num1, num2) {
  var percent = Math.ceil(num1 / num2 * 100);
  $('.circle').circleProgress({
    value: percent / 100,
    animation: false,
    fill: {color: '#0000ff'}
  })
}

window.addEventListener('scroll', function() {
  var top = window.scrollY;
  var height = document.body.getBoundingClientRect().height - window.innerHeight;
  updateProgress(top, height);
});
.circle {
  margin: 6px 6px 20px;
  display: inline-block;
  position: relative;
  text-align: center;
  line-height: 1.2;
}
.circle strong {
  position: absolute;
  top: 51px;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 60px;
}
.circle strong i {
  font-style: normal;
  font-size: 1.4em;
  font-weight: 300;
}
.fixo {
  position: fixed!important;
  top: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<div id="skills" class="container content center-align skill-progress">
  <div class="fixo">
    <div class="circle">
      <strong></strong>
    </div>
  </div>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
</div>


2)

Gostaria que a animação iniciasse assim que chegar no elemento?

Pode fazer algo parecido: Ao iniciar a pagina chamar a função $('.circle').circleProgress({ com value: 0, criar uma função que calcule qual a distancia do elemento levando em consideração a atual visualização da tela:

$(window).scroll(function() {
  var $circle = $(".circle");
  var window_offset = $circle.offset().top - $(window).scrollTop();
});

E dentro desta função chamar outra função que se "alto destrua" quando ultrapassar um certo limite estipulado:

var myFunction = function(window_offset) {
  if (window_offset < 100) {
    myFunction = function() {};

Dentro desse limite estipulado ainda chamar novamente a função $('.circle').circleProgress({ com o valor da porcentagem que você gostaria.

$('.circle').circleProgress({
  value: 0,
  fill: {
    color: '#0000ff'
  }
})

var myFunction = function(window_offset) {
  if (window_offset < 100) {
    myFunction = function() {};
    $('.circle').circleProgress({
      value: 0.85,
      fill: {
        color: '#0000ff'
      }
    })
  }
  return 1;
};

$(window).scroll(function() {
  var $circle = $(".circle");
  var window_offset = $circle.offset().top - $(window).scrollTop();
  $("#window_offset").html(window_offset);
  myFunction(window_offset);
});
.circle {
  margin: 6px 6px 20px;
  display: inline-block;
  position: relative;
  text-align: center;
  line-height: 1.2;
}
.circle strong {
  position: absolute;
  top: 51px;
  left: 0;
  width: 100%;
  text-align: center;
  line-height: 60px;
}
.circle strong i {
  font-style: normal;
  font-size: 1.4em;
  font-weight: 300;
}
.fixo {
  position: fixed!important;
  top: 0px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kottenator/jquery-circle-progress/1.2.1/dist/circle-progress.js"></script>
<div id="skills" class="container content center-align skill-progress">
  <br/>
  <br/>
  <label class="fixo" id="window_offset"></label>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <div class="circle">
    <strong></strong>
  </div>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
  <br/>
</div>
conteúdo editado
Fonte Link
MarceloBoni
  • 6,4mil
  • 3
  • 30
  • 62
Carregando
Fonte Link
MarceloBoni
  • 6,4mil
  • 3
  • 30
  • 62
Carregando