Bootstrap Snippet Animation using HTML CSS Bootstrap Javascript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--This code works on live site -->
<section id="works">
    <div class="container">
        <div class="section-heading text-center anim d06 t24 fadeInUp">
            <h1>This code works on live site, Try using it, its based on https://daneden.github.io/animate.css/</h2>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed aliquam a libero non porttitor. Maecenas sit amet libero id est dignissim ornare. Integer sagittis, elit ut rhoncus lacinia, enim diam semper dolor</p>
        </div>
        <div class="row main-content">
            <div class="col-md-4 col-sm-4 anim d06 t24 fadeInUp">
                <div class="main-wrap text-center">
                    <div class="img-wrap">
                        <img src="images/work-1.png" class="img-responsive">
                    </div>
                    <div class="text-wrap">
                        <h3>Create your account</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum rhoncus nibh, a ultricies ipsum iaculis eu. Nam congue augue...</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 anim d06 t24 fadeInUp">
                <div class="main-wrap text-center">
                    <div class="img-wrap">
                        <img src="images/work-2.png" class="img-responsive">
                    </div>
                    <div class="text-wrap">
                        <h3>choose your Favorite activity</h3>
                        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec fermentum rhoncus nibh, a ultricies ipsum iaculis eu. Nam congue augue...</p>
                    </div>
                </div>
            </div>
            <div class="col-md-4 col-sm-4 anim d06 t24 fadeInUp">
                <div class="main-wrap text-center">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* Animation Delay */
.d01{ animation-delay:0.1s; -moz-animation-delay:0.1s; -webkit-animation-delay:0.1s; }
.d02{ animation-delay:0.2s; -moz-animation-delay:0.2s; -webkit-animation-delay:0.2s; }
.d03{ animation-delay:0.3s; -moz-animation-delay:0.3s; -webkit-animation-delay:0.3s; }
.d04{ animation-delay:0.4s; -moz-animation-delay:0.4s; -webkit-animation-delay:0.4s; }
.d05{ animation-delay:0.5s; -moz-animation-delay:0.5s; -webkit-animation-delay:0.5s; }
.d06{ animation-delay:0.6s; -moz-animation-delay:0.6s; -webkit-animation-delay:0.6s; }
.d07{ animation-delay:0.7s; -moz-animation-delay:0.7s; -webkit-animation-delay:0.7s; }
.d08{ animation-delay:0.8s; -moz-animation-delay:0.8s; -webkit-animation-delay:0.8s; }  
.d09{ animation-delay:0.9s; -moz-animation-delay:0.9s; -webkit-animation-delay:0.9s; }
.d10{ animation-delay:1s; -moz-animation-delay:1s; -webkit-animation-delay:1s; }
.d11{ animation-delay:1.1s; -moz-animation-delay:1.1s; -webkit-animation-delay:1.1s; }
.d12{ animation-delay:1.2s; -moz-animation-delay:1.2s; -webkit-animation-delay:1.2s; }
.d13{ animation-delay:1.3s; -moz-animation-delay:1.3s; -webkit-animation-delay:1.3s; }
.d14{ animation-delay:1.4s; -moz-animation-delay:1.4s; -webkit-animation-delay:1.4s; }
.d15{ animation-delay:1.5s; -moz-animation-delay:1.5s; -webkit-animation-delay:1.5s; }
.d16{ animation-delay:1.6s; -moz-animation-delay:1.6s; -webkit-animation-delay:1.6s; }
.d17{ animation-delay:1.7s; -moz-animation-delay:1.7s; -webkit-animation-delay:1.7s; }
.d18{ animation-delay:1.8s; -moz-animation-delay:1.8s; -webkit-animation-delay:1.8s; }
.d19{ animation-delay:1.9s; -moz-animation-delay:1.9s; -webkit-animation-delay:1.9s; }
.d21{ animation-delay:2.1s; -moz-animation-delay:2.1s; -webkit-animation-delay:2.1s; }
.d26{ animation-delay:2.6s; -moz-animation-delay:2.6s; -webkit-animation-delay:2.6s; }
.t14{
    animation-duration: 1.4s !important;
}
.t24{
    animation-duration: 2.4s !important;
}
/*Animation ends*/
.anim,.anima {
    opacity: 0;
}
.anim.animated,.anima.animated {
    opacity: 1;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
    <script>
            var $animation_elements = $('.anim');
            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);
            //check to see if this current container is within viewport
            if ((element_bottom_position >= window_top_position) &&
            (element_top_position <= window_bottom_position)) {
            $element.addClass('animated');
            } else {
            $element.removeClass('animated');
            }
            });
            }
            $window.on('scroll resize', check_if_in_view);
            $window.trigger('scroll');
        </script>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Animation"
Bootstrap 4.0.0 Snippet by abhimanyusankhyan4

Related: See More

Questions / Comments:

"Animation" Bootstrap 4.0.0 Snippet by abhimanyusankhyan4

Related: See More

Questions / Comments:

"Animation"
Bootstrap 4.0.0 Snippet by abhimanyusankhyan4