JSFiddle - React, Tailwind, and code Playground
by Ayri Rin
HTML
<script src="http://github.hubspot.com/odometer/odometer.js"></script>
<link rel="stylesheet" href="http://github.hubspot.com/odometer/themes/odometer-theme-minimal.css">
<div id="mytext" class="mytext"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec congue pretium arcu, ac maximus orci mattis id. Phasellus dignissim odio non velit euismod, a venenatis tellus maximus. Nulla condimentum leo sit amet elit sollicitudin tincidunt. Integer quis suscipit risus. Vestibulum eget faucibus urna. Donec molestie purus vitae magna interdum, vel placerat dolor rutrum. Ut consequat vulputate justo et venenatis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nullam commodo, urna a posuere vestibulum, justo ipsum sollicitudin magna, vel venenatis tortor nisl non nulla. Nunc posuere, ex ut volutpat imperdiet, sem enim tincidunt sem, a venenatis dui arcu quis arcu. Etiam erat diam, rhoncus vel dolor ut, tincidunt placerat ligula. Fusce accumsan efficitur ante vitae vulputate.
Nunc eu diam gravida, vulputate mauris sit amet, ultrices quam. Etiam at augue tincidunt, commodo erat eu, vulputate quam. Nullam congue quam massa, at ultrices sapien consequat non. Pellentesque tristique id ex nec pretium. Integer rhoncus congue fringilla. Suspendisse potenti. Duis dictum suscipit dolor, et finibus justo pretium id.
Vivamus in ultricies quam. In blandit eros nec vestibulum ultricies. Donec vel convallis urna. Fusce quam quam, finibus ac mattis eget, imperdiet tincidunt nibh. Maecenas vel odio neque. Maecenas pretium lacus eu aliquam faucibus. Maecenas ut ante semper, bibendum mi in, tempus sem. Proin pretium odio lacus, in porta enim suscipit vitae. Mauris laoreet dolor at velit dapibus consequat. Morbi tincidunt eros sapien, eget posuere sapien mattis vel. Aliquam in ultrices orci, ut iaculis libero. Maecenas bibendum cursus enim, vel faucibus ipsum bibendum in. Duis euismod congue magna quis vestibulum. Nam tempor, nisi non viverra...
CSS
.odometer {
font-size: 40px;
border:1px solid red;
}
.box1 {height:50px}
JavaScript
window.addEventListener("scroll",function() {
if(window.scrollY > (mytext.clientHeight - window.innerHeight)) {
odometerOne.innerHTML = 456;
odometerbis.innerHTML = 2009;
}
},false);