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="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 ---------->
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script
  src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<p align="center">
  scroll page to start animation
</p>
<div class="container-fluid sa" style="dir="ltr" >
<div class="container hidden-xs hidden-sm sa" style="margin-bottom: 80px">
    <div class="row sa">
        <div class="col-lg-9 col-md-9 col-sm-12 col-xs-12 sa" style="position: relative;height: 560px">
           
            <span class="one1">
            </span>
            <span class="one2">
            </span>
            <span class="one3">
            </span>
            <span class="two1">
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
.col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9
{
    float:right !important;
}
.words{
    font-size: 10px;
    width: 74%;
    margin-right: 16%;
}
.fore1{
    position: absolute;
    background-color: red;
    top: 49px;
    z-index: 9;
    right: 8.5%;
    width: 1px;
    height: 0%;
}
.fiv1{
    position: absolute;
    background-color: red;
    top: 45%;
    z-index: 9;
    left: 5%;
    width: 1px;
    height: 0%;
}
.one1{
    position: absolute;
    background-color: red;
    top: 49px;
    z-index: 9;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
$(window).scroll(function() {
$(".bulb").addClass("fi");
            $(".one1").addClass("one11");
            $(".testt").addClass("testt1");
            $(".one2").addClass("one22");
            $(".test1").addClass("test11");
            $(".one3").addClass("one33");
            $(".fore1").addClass("fore11");
            $(".two1").addClass("two11");
            $(".test2").addClass("test22");
            $(".two2").addClass("two22");
            $(".fiv1").addClass("fiv11");
            $(".three1").addClass("three11");
            $(".test3").addClass("test33");
});
            
        
    
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"animation "
Bootstrap 3.2.0 Snippet by moatazfrontend

Related: See More

Questions / Comments:

"animation " Bootstrap 3.2.0 Snippet by moatazfrontend

Related: See More

Questions / Comments:

"animation "
Bootstrap 3.2.0 Snippet by moatazfrontend