A proof of concept sales page widget

scrolly-list.blade.php

<div class="card mb-4 shadow-sm">
    <div class="card-body">
        <div class="row">
            <div class="col-12">
                <h1 class="card-title pricing-card-title">Item list</h1>
            </div>
            <div class="col-sm-11 offset-sm-1 col-12">
                <div class="card card-body mb-3">
                    <h2 class="card-title pricing-card-title mb-0" id="customers-check"><i class="fas fa-user text-muted mr-3" id="customers-check-icon"></i>&nbsp;Customers</h2>
                </div>
            </div>
            <div class="col-sm-11 offset-sm-1 col-12">
                <div class="card card-body mb-3">
                    <h2 class="card-title pricing-card-title mb-0" id="vendors-check"><i class="fas fa-user-tie text-muted mr-3" id="vendors-check-icon"></i>&nbsp;Vendors</h2>
                </div>
            </div>
            <div class="col-sm-11 offset-sm-1 col-12">
                <div class="card card-body mb-3">
                    <h2 class="card-title pricing-card-title mb-0" id="work-orders-check"><i class="fas fa-file-invoice text-muted mr-3" id="work-orders-check-icon"></i>&nbsp;Work Orders</h2>
                </div>
            </div>
            <div class="col-sm-11 offset-sm-1 col-12">
                <div class="card card-body mb-3">
                    <h2 class="card-title pricing-card-title mb-0" id="purchase-orders-check"><i class="fas fa-file-invoice text-muted mr-3" id="purchase-orders-check-icon"></i>&nbsp;Purchase Orders</h2>
                </div>
            </div>
            <div class="col-sm-11 offset-sm-1 col-12">
                <div class="card card-body mb-3">
                    <h2 class="card-title pricing-card-title mb-0" id="leads-check"><i class="fas fa-user-tag text-muted mr-3" id="leads-check-icon"></i>&nbsp;Leads</h2>
                </div>
            </div>
            <div class="col-sm-11 offset-sm-1 col-12">
                <div class="card card-body mb-3">
                    <h2 class="card-title pricing-card-title mb-0" id="contacts-check"><i class="fas fa-address-card text-muted mr-3" id="contacts-check-icon"></i>&nbsp;Contacts</h2>
                </div>
            </div>
            <div class="col-sm-11 offset-sm-1 col-12">
                <div class="card card-body">
                    <h2 class="card-title pricing-card-title mb-0" id="calendar-check"><i class="fas fa-calendar-alt text-muted mr-3" id="calendar-check-icon"></i>&nbsp;Calendar &amp; Appointments</h2>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
    $(document).on('scroll',function(){

        // customers check transition
        
        rotateIconCheck( 'customers-check', 'fa-user' );
        rotateIconCheck( 'vendors-check', 'fa-user-tie' );
        rotateIconCheck( 'work-orders-check', 'fa-file-invoice' );
        rotateIconCheck( 'purchase-orders-check', 'fa-file-invoice' );
        rotateIconCheck( 'leads-check', 'fa-user-tag' );
        rotateIconCheck( 'contacts-check', 'fa-address-card' );
        rotateIconCheck( 'calendar-check', 'fa-calendar-alt' );
    });

    var rotateIconCheck = function( whichDivID, whichIcon )
    {
        var windowHeight = $( window ).height();

        var detectThreshold = 0.5; //it only has top "this" percentage of the page view port height to trigger the icon change

        var detectionHeight = windowHeight - ( windowHeight * detectThreshold );
 


        var yPosOfElement = windowHeight - document.getElementById( whichDivID ).getBoundingClientRect().y;//get y and convert it to "normal" y to make calcs easier 

        var icon = $('#' + whichDivID + '-icon' );

        if( yPosOfElement > detectionHeight ){ 

            if( icon.hasClass( 'fa-check' ) == false )
            {

                icon.addClass( 'fa-spin' ).addClass( 'fa-spinner').removeClass( whichIcon );

                setTimeout(() => {
                    if( icon.hasClass( 'fa-spin' ) == true )
                    {
                        icon.addClass( 'fa-check' ).removeClass( 'fa-spinner' ).removeClass( 'fa-spin' ).addClass( 'text-success' ).removeClass( 'text-muted' );
                    }

                }, 2000 );
            }
            
            
        }
        else{
            if( icon.hasClass( 'fa-check' ) == true )
            {

                icon.addClass( 'fa-spin' ).addClass( 'fa-spinner').removeClass( 'fa-check' );

                setTimeout(() => {
                    if( icon.hasClass( 'fa-spin' ) == true )
                    {
                        icon.addClass( whichIcon ).removeClass('fa-spinner').removeClass( 'fa-spin' ).addClass( 'text-muted' ).removeClass( 'text-success' );
                    }

                }, 2000 );
            }
        }
    }
</script>