how to animate on scroll webpage

Posted by on

Animation When Doing scroll a webpage:

 HTML:-


<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/jscript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    </head>

 <body>
    <div class="main-container">
        <div class="container cf">
            <div class="animation-element slide-left testimonial">
                <div class="header">
                    <div class="left">
                        <img src="Images/150.png" />
                    </div>
                    <div class="right">
                        <h3>
                            Johnathon Richard Smith</h3>
                        <h4>
                            CEO / Manager - Auto Incorporated</h4>
                    </div>
                </div>
                <div class="content">
                    <i class="fa fa-quote-left"></i>When I started using their service I was skeptical.
                    They promised me a 300% return on my initial investment. However they came through
                    on their word and now my business is flourishing.. <i class="fa fa-quote-right">
                    </i>
                </div>
                <div class="rating">
                    <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i
                        class="fa fa-star"></i><i class="fa fa-star-half-o"></i>
                </div>
            </div>
            <div class="animation-element slide-left testimonial">
                <div class="header">
                    <div class="left">
                        <img src="Images/150.png" />
                    </div>
                    <div class="right">
                        <h3>
                            Joanna Hammerlton</h3>
                        <h4>
                            Marketing Manager - Omega Creative</h4>
                    </div>
                </div>
                <div class="content">
                    <i class="fa fa-quote-left"></i>Our company first enlisted their services when we
                    had a down-turn in sales and revene. They outlined a series of steps we could take
                    to improve our position and within a year we are making signifcant improvements..
                    <i class="fa fa-quote-right"></i>
                </div>
                <div class="rating">
                    <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i
                        class="fa fa-star"></i><i class="fa fa-star-o"></i>
                </div>
            </div>
            <div class="animation-element slide-left testimonial">
                <div class="header">
                    <div class="left">
                        <img src="Images/150.png" />
                    </div>
                    <div class="right">
                        <h3>
                            Mark Jamerson</h3>
                        <h4>
                            CEO - Generic Business</h4>
                    </div>
                </div>
                <div class="content">
                    <i class="fa fa-quote-left"></i>We entered into a 12 month period of service with
                    this company in the hopes to improve our returns. After this period we have a return
                    of double our initial investment.. <i class="fa fa-quote-right"></i>
                </div>
                <div class="rating">
                    <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i
                        class="fa fa-star"></i><i class="fa fa-star"></i>
                </div>
            </div>
            <div class="animation-element slide-left testimonial">
                <div class="header">
                    <div class="left">
                        <img src="Images/150.png" />
                    </div>
                    <div class="right">
                        <h3>
                            Susan Hilton</h3>
                        <h4>
                            Financial Officer - People Tech</h4>
                    </div>
                </div>
                <div class="content">
                    <i class="fa fa-quote-left"></i>Our involvement in this company has been mutually
                    beneficial. We were hoping for slightly higher returns, however the current level
                    of returns are sufficient.. <i class="fa fa-quote-right"></i>
                </div>
                <div class="rating">
                    <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><i
                        class="fa fa-star-o"></i><i class="fa fa-star-o"></i>
                </div>
            </div>
        </div>

    </div>
</body>
</html>


CSS:-

 
     
        strong, b
        {
            font-weight: 600;
        }
     
        h1, h2, h3, h4, h5, h6
        {
            font-weight: 300;
            line-height: 150%;
        }
     
        i.fa
        {
            color: #000;
        }
     
        *, *:before, *:after
        {
            box-sizing: border-box;
            -moz-box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }
     
        .cf:before, .cf:after
        {
            content: " ";
            display: table;
        }
     
        .cf:after
        {
            clear: both;
        }
     
        .main-container
        {
            background: #fff;
         
            margin: 25px auto 25px auto;
            position: relative;
        }
     
     
     
        .animation-element
        {
            opacity: 1;
            position: relative;
        }
     
        .animation-element.slide-left
        {
            opacity: 0;
            -moz-transition: all 500ms linear;
            -webkit-transition: all 500ms linear;
            -o-transition: all 500ms linear;
            transition: all 500ms linear;
            -moz-transform: translate3d(-100px, 0px, 0px);
            -webkit-transform: translate3d(-100px, 0px, 0px);
            -o-transform: translate(-100px, 0px);
            -ms-transform: translate(-100px, 0px);
            transform: translate3d(-100px, 0px, 0px);
        }
     
        .animation-element.slide-left.in-view
        {
            opacity: 1;
            -moz-transform: translate3d(0px, 0px, 0px);
            -webkit-transform: translate3d(0px, 0px, 0px);
            -o-transform: translate(0px, 0px);
            -ms-transform: translate(0px, 0px);
            transform: translate3d(0px, 0px, 0px);
        }
     
        .animation-element.slide-left.testimonial
        {
            float: left;
            width: 47%;
            margin: 0% 1.5% 3% 1.5%;
            background: #F5F5F5;
            padding: 15px;
            box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.2);
            border: solid 1px #EAEAEA;
        }
        .animation-element.slide-left.testimonial:hover, .animation-element.slide-left.testimonial:active
        {
            box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.25);
        }
     
        .animation-element.slide-left.testimonial:nth-of-type(odd)
        {
            width: 48.5%;
            margin: 0% 1.5% 3.0% 0%;
        }
     
        .animation-element.slide-left.testimonial:nth-of-type(even)
        {
            width: 48.5%;
            margin: 0% 0% 3.0% 1.5%;
        }
     
        .animation-element.slide-left.testimonial .header
        {
            float: left;
            width: 100%;
            margin-bottom: 10px;
        }
        .animation-element.slide-left.testimonial .left
        {
            float: left;
            margin-right: 15px;
        }
        .animation-element.slide-left.testimonial .right
        {
            float: left;
        }
     
        .animation-element.slide-left.testimonial img
        {
            width: 65px;
            height: 65px;
            border-radius: 50%;
            box-shadow: 0px 1px 3px rgba(51, 51, 51, 0.5);
        }
     
        .animation-element.slide-left.testimonial h3
        {
            margin: 0px 0px 5px 0px;
        }
     
        .animation-element.slide-left.testimonial h4
        {
            margin: 0px 0px 5px 0px;
        }
     
        .animation-element.slide-left.testimonial .content
        {
            float: left;
            width: 100%;
            margin-bottom: 10px;
        }
     
        .animation-element.slide-left.testimonial .rating
        {
        }
     
        .animation-element.slide-left.testimonial i
        {
            color: #aaa;
            margin-right: 5px;
        }
     
     
     
        @media screen and (max-width: 678px)
        {
            .animation-element.slide-left.testimonial, .animation-element.slide-left.testimonial:nth-of-type(odd), .animation-element.slide-left.testimonial:nth-of-type(even)
            {
                width: 100%;
                margin: 0px 0px 20px 0px;
            }
            .animation-element.slide-left.testimonial .right, .animation-element.slide-left.testimonial .left, .animation-element.slide-left.testimonial .content, .animation-element.slide-left.testimonial .rating
            {
                text-align: center;
                float: none;
            }
            .animation-element.slide-left.testimonial img
            {
                width: 85px;
                height: 85px;
                margin-bottom: 5px;
            }
     
        }


 Java script:-



  <script type="text/javascript">

        var $animation_elements = $('.animation-element');
        var $window = $(window);

        function check_if_in_view() {
            var window_height = $window.height();
            var window_top_position = $window.scrollTop();
            var window_bottom_position = (window_top_position + window_height);

            $.each($animation_elements, function () {
                var $element = $(this);
                var element_height = $element.outerHeight();
                var element_top_position = $element.offset().top;
                var element_bottom_position = (element_top_position + element_height);


                if ((element_bottom_position >= window_top_position) &&
        (element_top_position <= window_bottom_position)) {
                    $element.addClass('in-view');
                } else {
                    $element.removeClass('in-view');
                }
            });
        }

        $window.on('scroll resize', check_if_in_view);
        $window.trigger('scroll');


or download a HTML page of animation on scroll

Download Animation



Comments

Post a Comment