Форум

kn1ght · #1 (**permalink**) 15.01.2015, 10:12

Добрый день,
пытаюсь сделать нечто похожее на прогресс бар, шкала которого растет в зависимости от количества прокрученных пикселей сверху

реализовал я это крайне топорно http://jsfiddle.net/bqb5b8fb/ (крутить вниз)

есть баги: если не докрутить до самого низа, а скажем до 25%, 50% или 75%, а потом вверх, текст о количестве процентов меняется

и хотелось бы сделать так, чтобы проценты постепенно увеличивались от 0 до 25% на первой итерации, затем от 25% до 50% на 2ой итерации и так далее

но мои скудные познания в js и jquery не дают возможности мне это реализовать

возможно кто-нибудь поможет, либо подскажет готовые решения, чтобы мне не велосипедить)

рони · #2 (**permalink**) 15.01.2015, 10:56

kn1ght,
помогите реализовать эффект

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
body{
  height: 1500px;
}

.progress-bar {
    position: fixed;
    margin-top: 40px;
	height: 48px;
	border: 1px solid #cfcfcf;
	padding: 5px;
    width: 80%;
}

.progress-bar__inner {
	position: relative;
	width: 100%;
	height: 100%;
	background-color: #e9ebec;
}

.progress-bar__scale {
	position: absolute;
	top: 0px;
	left: 0px;
	height: 48px;
	width: 0px;
	background-color: #00adef;
	-webkit-transition: all 0.8s 0.2s;
	transition: all 0.8s 0.2s;
}

.progress-bar__scale-25 {width: 25%;}
.progress-bar__scale-50 {width: 50%;}
.progress-bar__scale-75 {width: 75%;}
.progress-bar__scale-100 {width: 100%;}
.invis {visibility: hidden;}

.knowledge-bl__txt-cont {position: relative;}

.knowledge-bl__percentage {
   position: fixed;
	float: left;
	width: 260px;
	margin-top: 90px;
	margin-left: 7px;
	font-size: 98px;
	font-weight: 700;
	color: #00adef;
    margin-bottom: 1000px;
}

.percentage-reserve-100 {
	position: absolute;
	width: 260px;
	top: 36px;
	left: 7px;
	font-size: 98px;
	font-weight: 700;
	color: #00adef;
	display: none;
}

.db {display: block !important;}

</style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
     $(window).scroll(function() {
  var o = 100*$(window).scrollTop()/($(document).height()- $(window).height());
  $(".progress-bar__scale").css({"width" : (o|0)+"%"});
  $(".knowledge-bl__percentage").html((o|0)+"%");
})
});


  </script>
</head>

<body>
<div class="progress-bar">
    <div class="progress-bar__inner">
        <div class="progress-bar__scale"></div>
    </div>
</div>
<div class="knowledge-bl__percentage">0%</div>
<div class="knowledge-bl__txt-cont">
    <div class="percentage-reserve-100">100%</div>
</div>



</body>

</html>

kn1ght · #3 (**permalink**) 15.01.2015, 12:02

на уменьшение не должно работать

рони · #4 (**permalink**) 15.01.2015, 12:49

kn1ght,
добавьте проверку что новое значение больше тогда строки 79 -80

kn1ght · #5 (**permalink**) 15.01.2015, 14:24

все равно немного не то, дошел до такой стадии: http://jsfiddle.net/bs2qr5m0/3/

все работает так, как мне надо, но есть баг: если очень быстро прокрутить, проценты начинают прокручиваться до бесконечности
пока не знаю, как исправить

рони · #6 (**permalink**) 15.01.2015, 14:36

Сообщение от kn1ght

проценты начинают прокручиваться до бесконечности

у вас бесконечное число setInterval грузится

рони · #7 (**permalink**) 15.01.2015, 14:40

Сообщение от kn1ght

все равно немного не то

чтобы получить то, надо как то проще обьяснить чего вы хотите - мне вот непонятно само разделение на 4 части когда сам скрол может быть любым а не только 25% и тд.

kn1ght · #8 (**permalink**) 15.01.2015, 14:48

Сообщение от рони

у вас бесконечное число setInterval грузится

почему? создаю же я только 4

Сообщение от рони

чтобы получить то, надо как то проще обьяснить чего вы хотите - мне вот непонятно само разделение на 4 части когда сам скрол может быть любым а не только 25% и тд.

этот анимационный прогресс бар никак не связан с тем, какое количество страницы проскроллено

просто анимационный элемент, грубо говоря, рядом с ним текст "наши знания увеличиваются каждый день"

пользователь заходит на сайт, скроллится вниз, видит этот элемент, скроллится вниз дальше, а он анимируется таким вот способом

так понятнее?))

Форум

Справочник

Discord чат

Курсы javascript