JSFiddle - React, Tailwind, and code Playground

by md mostofa billa Ashik

HTML

<section class="nm nm_1">
		</section>
		<section class="nm nm_2">
		</section>
		<section class="nm nm_3">
		</section>
		<section class="nm nm_4">
			<div class="container text-c">
				
				<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
					<div class="row">
					
				<span class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='192' data-delay='19' data-increment="2">0</span>
						<span class="c-section4"> </span>
						<h3> کارکنان ما </h3>
						
					</div>
				</div>
				<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
					<div class="row">
					
						<span class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='282' data-delay='19' data-increment="2">0</span>

							<h3> کارکنان ما </h3>
					</div>
				</div>
				<div class="col-xs-6 col-sm-4 col-md-4 col-lg-4">
					<div class="row">
						
				<span class='numscroller numscroller-big-bottom' data-slno='1' data-min='0' data-max='82' data-delay='19' data-increment="2">0</span>

				<h3> کارکنان ما </h3>
					</div>
				</div>
				
			</div>

CSS

.nm {
	height: 400px;
	background: #f5f5f5;
	display: block;
}
.nm_1 {
	background-color: #632525;
}
.nm_2 {
	background-color: grad;
}
.nm_3 {
	background-color: gray;
}
.nm_4 {
	background-color: green;
}
.nm_5 {
	background-color: georgian;
}

JavaScript

/**
* jQuery scroroller Plugin 1.0
*
* http://www.tinywall.net/
* 
* Developers: Arun David, Boobalan
* Copyright (c) 2014 
*/
(function($){
    $(window).on("load",function(){
        $(document).scrollzipInit();
        $(document).rollerInit();
    });
    $(window).on("load scroll resize", function(){
        $('.numscroller').scrollzip({
            showFunction    :   function() {
                                    numberRoller($(this).attr('data-slno'));
                                },
            wholeVisible    :     false,
        });
    });
    $.fn.scrollzipInit=function(){
        $('body').prepend("<div style='position:fixed;top:0px;left:0px;width:0;height:0;' id='scrollzipPoint'></div>" );
    };
    $.fn.rollerInit=function(){
        var i=0;
        $('.numscroller').each(function() {
            i++;
           $(this).attr('data-slno',i); 
           $(this).addClass("roller-title-number-"+i);
        });        
    };
    $.fn.scrollzip = function(options){
        var settings = $.extend({
            showFunction    : null,
            hideFunction    : null,
            showShift       : 0,
            wholeVisible    : false,
            hideShift       : 0,
        }, options);
        return this.each(function(i,obj){
            $(this).addClass('scrollzip');
            if ( $.isFunction( settings.showFunction ) ){
                if(
                    !$(this).hasClass('isShown')&&
                    ($(window).outerHeight()+$('#scrollzipPoint').offset().top-settings.showShift)>($(this).offset().top+((settings.wholeVisible)?$(this).outerHeight():0))&&
                    ($('#scrollzipPoint').offset().top+((settings.wholeVisible)?$(this).outerHeight():0))<($(this).outerHeight()+$(this).offset().top-settings.showShift)
                ){
                    $(this).addClass('isShown');
                    settings.showFunction.call( this );
                }
            }
            if ( $.isFunction( settings.hideFunction )...