Javascript-форум (https://javascript.ru/forum/)
-   Ваши сайты и скрипты (https://javascript.ru/forum/project/)
-   -   Прокрутка чисел при скроллинге (https://javascript.ru/forum/project/67973-prokrutka-chisel-pri-skrollinge.html)

yourmaze 18.03.2017 12:03

Прокрутка чисел при скроллинге
 
Здравствуйте, уважаемые форумчане!
Начинаю изучать JS, написал скрипт, который при скроллинге прокручивает числа от 0 до значений которые указаны в html блоках.
И мне кажется, что код слишком далек от идеального. Например, как мне кажется, вечно срабатывает событие scroll, даже если прокрутка уже не требуется. Нужны ваши советы как можно улучшить код(оптимизировать, сделать более читаемым и вообще все что придет в голову). Спасибо:)

<section id="numbers">
				<div class="number-block">
					<div class="number">160</div>
				</div>
				<div class="number-block">
					<div class="number">600</div>
				</div>
				<div class="number-block">
					<div class="number">73</div>
				</div>
				<div class="number-block">
					<div class="number">96</div>
				</div>
				<div class="number-block">
					<div class="number">200000</div>
				</div>
				<div class="number-block">
					<div class="number">200</div>
				</div>
	</section>


$(function() {
        var distance_for_numbers = $('#numbers').offset().top - $(window).height();
        var flag = 0;

        $(window).scroll(function(){
            if($(window).scrollTop() > distance_for_numbers && flag == 0){
                flag = 1;

                $(".number").each(function (i, el) {
                    var currValue = $(this).text();
                    console.log(currValue);
                    
                    var props = {
                        "from": {
                            "count": 0
                        },
                        "to": {
                            "count": currValue
                        }
                    };

                    $(props.from).animate(props.to, {
                        duration: 1700 * 1,
                        step: function (now, fx) {
                            $(el).text(Math.ceil(now));
                        },
                        complete:function() {
                            if (el.dataset.sym !== undefined) {
                                el.textContent = el.textContent.concat(el.dataset.sym)
                            }
                        }
                    });

                });
            }
        });
    });

рони 18.03.2017 12:21

yourmaze,
анимация чисел в зоне видимости jquery

Paguo-86PK 18.03.2017 16:26

http://jsfiddle.net/Alikberov/u9ott31p/


Часовой пояс GMT +3, время: 11:22.