Element Count UP scroll

Element Count UP scroll JSON

{"component":{"id":2,"name":"ct_section","options":{"ct_id":2,"ct_parent":0,"selector":"section-2-57","original":[],"nicename":"Element Count Section"},"depth":1,"children":[{"id":57,"name":"ct_div_block","options":{"ct_id":57,"ct_parent":2,"selector":"div_block-57-57","original":[],"nicename":"Element Count","classes":["full-width","is-center"],"activeselector":"is-center"},"depth":2,"children":[{"id":58,"name":"ct_code_block","options":{"ct_id":58,"ct_parent":57,"selector":"code_block-58-57","original":{"code-js":"function counter() {\n\n  \tif( window.angular ) return;\n  \n    var xCountElements = document.querySelectorAll('.x-count');\n    xCountElements.forEach(function(element) {\n        if (element.classList.contains('x-start')) {\n            var elementTop = element.offsetTop;\n            var elementHeight = element.offsetHeight;\n            var elementBottom = elementTop + elementHeight;\n            var viewportTop = window.pageYOffset || document.documentElement.scrollTop;\n            var viewportBottom = viewportTop + window.innerHeight;\n            if (elementBottom > viewportTop && elementTop < viewportBottom) {\n                var decimalpoint = 0;\n                var elementText = element.textContent;\n                if (elementText.indexOf('.') !== -1) {\n                    decimalpoint = elementText.split(\".\")[1].length;\n                }\n                element.classList.remove('x-start');\n                var startValue = parseFloat(elementText.replace(/,/g, ''));\n                var duration = 4000;\n                var startTime = null;\n                function animateCounter(timestamp) {\n                    if (!startTime) startTime = timestamp;\n                    var progress = timestamp - startTime;\n                    var currentValue = startValue * (progress / duration);\n                    if (progress < duration) {\n                        element.textContent = currentValue.toFixed(decimalpoint).toLocaleString('en');\n                        requestAnimationFrame(animateCounter);\n                    } else {\n                        element.textContent = startValue.toFixed(decimalpoint).toLocaleString('en');\n                    }\n                }\n                requestAnimationFrame(animateCounter);\n            }\n        }\n    });\n}\n\ndocument.addEventListener('DOMContentLoaded', counter);\nwindow.addEventListener('scroll', counter);\n","code-php":"<!---->"},"nicename":"Code Count"},"depth":3},{"id":59,"name":"ct_div_block","options":{"ct_id":59,"ct_parent":57,"selector":"div_block-59-57","original":[],"nicename":"Div (#24)","classes":["columns-3","gap-3","max-width-640"],"activeselector":"max-width-640"},"depth":3,"children":[{"id":60,"name":"ct_div_block","options":{"ct_id":60,"ct_parent":59,"selector":"div_block-60-57","original":[],"nicename":"Count Wrap","activeselector":"is-center","classes":["is-center"]},"depth":4,"children":[{"id":61,"name":"ct_div_block","options":{"ct_id":61,"ct_parent":60,"selector":"div_block-61-57","original":[],"nicename":"Count Wrap","classes":["x-count-wrap"],"activeselector":"x-count-wrap"},"depth":5,"children":[{"id":62,"name":"ct_text_block","options":{"ct_id":62,"ct_parent":61,"selector":"text_block-62-57","original":{"line-height":"1"},"nicename":"Count Number","ct_content":"250","classes":["x-count","x-start"],"activeselector":false},"depth":6},{"id":63,"name":"ct_text_block","options":{"ct_id":63,"ct_parent":61,"selector":"text_block-63-57","original":[],"nicename":"Count Symbol","ct_content":"+","classes":["x-count-symbol"],"activeselector":"x-count-symbol"},"depth":6}]},{"id":64,"name":"ct_text_block","options":{"ct_id":64,"ct_parent":60,"selector":"text_block-64-57","original":[],"nicename":"Text (#40)","ct_content":"Components","classes":["size-1"],"activeselector":false},"depth":5}]},{"id":65,"name":"ct_div_block","options":{"ct_id":65,"ct_parent":59,"selector":"div_block-65-57","original":[],"nicename":"Count Wrap","activeselector":"is-center","classes":["is-center"]},"depth":4,"children":[{"id":66,"name":"ct_div_block","options":{"ct_id":66,"ct_parent":65,"selector":"div_block-66-57","original":[],"nicename":"Count Wrap","classes":["x-count-wrap"]},"depth":5,"children":[{"id":67,"name":"ct_text_block","options":{"ct_id":67,"ct_parent":66,"selector":"text_block-67-57","original":{"line-height":"1"},"nicename":"Count Number","ct_content":"160","classes":["x-count","x-start"],"activeselector":"max-width-640"},"depth":6},{"id":68,"name":"ct_text_block","options":{"ct_id":68,"ct_parent":66,"selector":"text_block-68-57","original":[],"nicename":"Count Symbol","ct_content":"+","classes":["x-count-symbol"],"activeselector":"is-center"},"depth":6}]},{"id":69,"name":"ct_text_block","options":{"ct_id":69,"ct_parent":65,"selector":"text_block-69-57","original":[],"nicename":"Text (#44)","ct_content":"Starter Pages &amp; Examples<br>","classes":["size-1"],"activeselector":false},"depth":5}]},{"id":70,"name":"ct_div_block","options":{"ct_id":70,"ct_parent":59,"selector":"div_block-70-57","original":[],"nicename":"Count Wrap","activeselector":false,"classes":["is-center"]},"depth":4,"children":[{"id":71,"name":"ct_div_block","options":{"ct_id":71,"ct_parent":70,"selector":"div_block-71-57","original":[],"nicename":"Count Wrap","classes":["x-count-wrap"]},"depth":5,"children":[{"id":72,"name":"ct_text_block","options":{"ct_id":72,"ct_parent":71,"selector":"text_block-72-57","original":{"line-height":"1"},"nicename":"Count Number","ct_content":"10","classes":["x-count","x-start"],"activeselector":"x-count"},"depth":6},{"id":73,"name":"ct_text_block","options":{"ct_id":73,"ct_parent":71,"selector":"text_block-73-57","original":[],"nicename":"Count Symbol","ct_content":"+","classes":["x-count-symbol"],"activeselector":"x-count-symbol"},"depth":6}]},{"id":74,"name":"ct_text_block","options":{"ct_id":74,"ct_parent":70,"selector":"text_block-74-57","original":[],"nicename":"Text (#40)","ct_content":"Tailwind CSS Plugins","classes":["size-1"],"activeselector":false},"depth":5}]}]}]}]},"classes":{"full-width":{"key":"full-width","parent":"Framework","original":{"selector-locked":"true"}},"is-center":{"key":"is-center","parent":"Framework","original":{}},"columns-3":{"key":"columns-3","parent":"Framework","original":{"padding-top":"0"}},"gap-3":{"key":"gap-3","parent":"Framework","original":{}},"max-width-640":{"key":"max-width-640","parent":"Framework","original":{"margin-top":"0"}},"x-count-wrap":{"original":{"flex-direction":"row","display":"flex"},"key":"x-count-wrap"},"x-count":{"original":{"selector-locked":"false","font-size":"25","font-weight":"500","color":"#1f2937"},"key":"x-count"},"x-start":{"original":{"selector-locked":"true"},"key":"x-start"},"x-count-symbol":{"original":{"font-size":"25","line-height":"1","color":"#1f2937"},"key":"x-count-symbol"},"size-1":{"key":"size-1","parent":"Framework","original":{"selector-locked":"true"}}}}