Получение тикера / скрипта для выполнения на путевой точке - PullRequest
Новая
       32

Получение тикера / скрипта для выполнения на путевой точке

0 голосов
/ 05 октября 2019

Я пытаюсь использовать модуль тикера, чтобы начать отсчет, когда отображается #ticker. Для этого я использую waypoints.

. Однако сценарий не запускается, когда отображается #ticker, не знаете, почему?

Текущий подход: 

$(document).ready(function() {

	$('#ticker').waypoint(function(direction) {
	    $('.count').each(function() {
	        const initial = $(this).text()
	        const format = formatter(initial)

	        $(this).prop('Counter', 0).animate({
	            Counter: format.value
	        }, {
	            duration: 3000,
	            easing: 'swing',
	            step: function(now) {
	                $(this).text(format.revert(Math.ceil(now)));
	            }
	        });
	    });
	});

})

function formatter(str) {
    // const delimeter = '-'
    const char = 'x'
    const template = str.replace(/\d/g, char)
    const value = str.replace(/\D/g, '')

    function revert(val) {
        // need better solution
        const valStr = val.toString()
        let result = ''
        let index = 0
        for (let i = 0; i < template.length; i++) {
            const holder = template[i]
            if (holder === char) {
                result += valStr.slice(index, index + 1)
                index++
            } else {
                result += holder
            }
        }
        return result
    }
    return {
        template: template,
        value: value,
        revert: revert
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/waypoints/4.0.1/jquery.waypoints.min.js"></script>


<div id="ticker">
  <span class="count counter">16,000+</span>
</div>

Если я удаляю: $('#ticker').waypoint(function(direction) { тикер работает, но я хочу, чтобы он начинал считать при просмотре.

Также пробовал: 

$('#ticker').waypoint(function() {
...