See Example here >>> http://webtricker.com/projects/e-Marefa-v2/

Scroll Reveal Effect.html

<!--  Html Markup -->
<div class="product-details-wrap" id="product-details-wrap">
    <div class="product-item-info scroll-effect">
        <span class="economic"> Economics</span>
        <h6>e-Marefa DataBank for Islamic Economics and Finance</h6>
        <p>An integrated set of databases containing tens of thousands of records from 300 institutions in 40 countries.</p>
        <a href="#">View Service</a>
    </div>
    <div class="product-item-info scroll-effect">
        <span class="polls">Polls</span>
        <h6>e-Marefa Databank for Arabic Polls</h6>
        <p>A service provides Arab polls, whether conducted in the Arab World or carried out by International bodies.</p>
        <a href="#">View Service</a>
    </div>
    <div class="product-item-info scroll-effect">
        <span>e-Books</span>
        <h6>e-Marefa Database for the Publications of the Center for Arab Unity Studies</h6>
        <p>14000 records describing the publications of the Center for Arab Unity Studies.</p>
        <a href="#">View Service</a>
    </div>
</div>
<!-- //End Markup -->

<script type="text/javascript">
// Scroll reval effect
        if($(window).width() > 991){
            if($(".scroll-effect").length){

                window.sr = ScrollReveal({ 
                    reset: true, 
                    mobile:   false
                });
                sr.reveal('.scroll-effect', { duration: 1200 });
                
            }
        }
        
        
        $(window).on("resize", function(){
            $(".scroll-effect").css({
                "visibility" : "visible",
                "opacity" : 1,
                "transform" : "translateY(0) scale(1)"
            })
        }) 
</script>