"Background Image Animation"
Bootstrap 4.1.1 Snippet by sumi9xm

1
2
3
4
5
6
7
8
9
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/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 ---------->
<div id="banner">
<div id="cloud-scroll"></div>
</div>
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
#banner {
background-image: linear-gradient(120deg, #91C4FF 0%, #F0F7FF 87%);
position: relative;
width: 100%;
height: 950px;
}
#cloud-scroll {
background: url(https://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1485547918/new-york-city-skyline-BIGCITY0117.jpg?itok=po0Op8ou) repeat-x;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
position: absolute;
-webkit-animation: 900000s backgroundScroll infinite linear;
-moz-animation: 900000s backgroundScroll infinite linear;
-o-animation: 900000s backgroundScroll infinite linear;
-ms-animation: 900000s backgroundScroll infinite linear;
animation: 900000s backgroundScroll infinite linear;
}
@-webkit-keyframes backgroundScroll {
from {
background-position: 0 0;
}
to {
background-position: -99999999px 0;
}
}
@keyframes backgroundScroll {
from {
background-position: 0 0;
}
to {
background-position: -99999999px 0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: