Code:
<style>
#slider{
width: 900px;
height: 350px;
border: 5px solid white;
box-shadow: 0px 0px 5px #dd00ae; /* Over all Box colour */
overflow: hidden;
margin: 0 auto;
padding: 0px;
}
figure{
/*width: 3615px;*/
width: 1850px;
height: 350px;
margin: 0px;
padding: 0px;
position: relative;
animation: pdslider 20s linear infinite;
}
@keyframes pdslider{
0%{left: 0; top: 0;}
23%{left: 0; top: 0;}
25%{left: -905px; top: 0;}
48%{left: -905px; top: 0;}
50%{left: -905px; top: -295px;}
73%{left: -905px; top: -295px;}
75%{left: 0; top: -295px;}
98%{left: 0; top: -295px;}
100%{left: 0; top: 0;}
}
.bglayer{
width: 370px;
height: 120px;
background: rgba(65,167,222,0.3);
padding: 15px;
position:relative;
animation: bglayer 20s linear infinite;
z-index: 1000;
border-radius: 10px;
}
@keyframes bglayer{
0%{left: 20px; top: 0; visibility:hidden;}
2%{left: 20px; top: -220px; visibility:visible;}
23%{left: 20px; top: -220px; visibility:visible;}
25%{left: 20px; top: -500px; visibility:hidden;}
27%{left: 20px; top: -220px; visibility:visible;}
48%{left: 20px; top: -220px; visibility:visible;}
50%{left: -500px; top: -500; visibility:hidden;}
52%{left: 20px; top: -220px; visibility:visible;}
73%{left: 20px; top: -220px; visibility:visible;}
75%{left: 500px; top: -500px; visibility:hidden;}
77%{left: 20px; top: -220px; visibility:visible;}
98%{left: 20px; top: -220px; visibility:visible;}
100%{left: 20px; top: 0; visibility:hidden;}
}
.bglayer h1{
color: #e90000;
position:relative;
text-shadow:0px -5px 5px #ffffff; /*Text Colour & Shadow*/
z-index: 1000;
}
.bglayer h1.one{
animation: header1 20s linear infinite;
position: absolute;
top: 0;
left: 0;
}
.bglayer h1.two{
animation: header2 20s linear infinite;
position: absolute;
top: 0;
left: 0;
}
.bglayer h1.three{
animation: header3 20s linear infinite;
position: absolute;
top: 0;
left: 0;
}
.bglayer h1.four{
animation: header4 20s linear infinite;
position: absolute;
top: 0;
left: 0;
}
@keyframes header1{
0%{left: 20px; top: 0; opacity:0;}
2%{left: 20px; top: -500px; opacity:1;}
4%{left: 20px; top: 0px;; opacity:1;}
23%{left: 20px; top: 0px; opacity:1;}
24%{opacity:0;}
100%{left: 20px; top: 0; opacity:0;}
}
@keyframes header2{
0%{left: 20px; top: 0; opacity:0;}
25%{left: -20px; top: 500px; opacity:0;}
27%{left: -200px; top: 0px; opacity:0;}
29%{left: 20px; top: 0px; opacity:1;}
48%{left: 20px; top: 0px; opacity:1;}
49%{opacity:0;}
100%{left: 20px; top: 0; opacity:0;}
}
@keyframes header3{
0%{left: 20px; top: 0; opacity:0;}
50%{left: 500px; top: 500px; opacity:0;}
52%{left: 20px; top: 200px; opacity:1;}
54%{left: 20px; top: 0px; opacity:1;}
73%{left: 20px; top: 0px; opacity:1;}
74%{opacity:0;}
100%{left: 20px; top: 0; opacity:0;}
}
@keyframes header4{
0%{left: 20px; top: 0; opacity:0;}
75%{left: 500px; top: -500; opacity:0;}
77%{left: 1000px; top: 0px; opacity:1;}
79%{left: 20px; top: 0px; opacity:1;}
98%{left: 20px; top: 0px; opacity:1;}
99%{opacity: 0;}
100%{left: 20px; top: 0; opacity:0;}
}
.bglayer p{
color: #000be9;
position:relative;
margin: 0;
padding: 0;
text-shadow:0px -5px 5px #ffffff;
font-weight:bold;
font-size: 16px;
font-family: Arial, Helvetica, sans-serif;
z-index: 1000;
}
.bglayer p.one{
animation: paragraph1 20s linear infinite;
position: absolute;
top: 0;
left: 0;
}
.bglayer p.two{
animation: paragraph2 20s linear infinite;
position: absolute;
top: 0;
left: 0;
}
.bglayer p.three{
animation: paragraph3 20s linear infinite;
position: absolute;
top: 0;
left: 0;
}
.bglayer p.four{
animation: paragraph4 20s linear infinite;
position: absolute;
top: 0;
left: 0;
}
@keyframes paragraph1{
0%{left: 20px; top: 0; opacity:0;}
2%{left: 20px; top: -500px; opacity:0;}
4%{left: 1000px; top: 70px; opacity:0;}
6%{left: 20px; top: 70px;; opacity:1;}
23%{left: 20px; top: 70px; opacity:1;}
24%{opacity:0;}
100%{left: 20px; top: 0; opacity:0;}
}
@keyframes paragraph2{
0%{left: 20px; top: 0; opacity:0;}
25%{left: -20px; top: 500px; opacity:0;}
27%{left: 20px; top: -5000px; opacity:0;}
29%{left: 20px; top: -500px; opacity:0;}
31%{left: 20px; top: 70px; opacity:1;}
48%{left: 20px; top: 70px; opacity:1;}
49%{opacity:0;}
100%{left: 20px; top: 0; opacity:0;}
}
@keyframes paragraph3{
0%{left: 20px; top: 0; opacity:0;}
50%{left: 500px; top: 500px; opacity:0;}
52%{left: 20px; top: 200px; opacity:0;}
54%{left: -1000px; top: 70px; opacity:0;}
56%{left: 20px; top: 70px; opacity:1;}
73%{left: 20px; top: 70px; opacity:1;}
74%{opacity:0;}
100%{left: 20px; top: 0; opacity:0;}
}
@keyframes paragraph4{
0%{left: 20px; top: 0; opacity:0;}
75%{left: 500px; top: -500; opacity:0;}
77%{left: 1000px; top: 0px; opacity:0;}
79%{left: 1000px; top: 500px; opacity:0;}
81%{left: 20px; top: 70px; opacity:1;}
98%{left: 20px; top: 70px; opacity:1;}
99%{opacity: 0;}
100%{left: 20px; top: 70px; opacity:0;}
}
</style>
<div id="slider">
<figure>
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPTtB81799kPkxjf6woeRaD5Edvgt0PRgjt2TubMY7685ik8biqeBdnIRdm_-I9lV2-2dM_xWhyphenhyphenjvzJ7ry9NQzt-BRPEqQlaP7-OvtUNRhbAiqsK2-YpoaVAqNshknuifbqU3S2yxUD_o4jukTJDJppr3CnH_IyV2lYrq2tUQzGZvE71Dmrh6C4eRwsBuV/s1600/image4.jpg" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPTtB81799kPkxjf6woeRaD5Edvgt0PRgjt2TubMY7685ik8biqeBdnIRdm_-I9lV2-2dM_xWhyphenhyphenjvzJ7ry9NQzt-BRPEqQlaP7-OvtUNRhbAiqsK2-YpoaVAqNshknuifbqU3S2yxUD_o4jukTJDJppr3CnH_IyV2lYrq2tUQzGZvE71Dmrh6C4eRwsBuV/s1600/image4.jpg" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPTtB81799kPkxjf6woeRaD5Edvgt0PRgjt2TubMY7685ik8biqeBdnIRdm_-I9lV2-2dM_xWhyphenhyphenjvzJ7ry9NQzt-BRPEqQlaP7-OvtUNRhbAiqsK2-YpoaVAqNshknuifbqU3S2yxUD_o4jukTJDJppr3CnH_IyV2lYrq2tUQzGZvE71Dmrh6C4eRwsBuV/s1600/image4.jpg" />
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgPTtB81799kPkxjf6woeRaD5Edvgt0PRgjt2TubMY7685ik8biqeBdnIRdm_-I9lV2-2dM_xWhyphenhyphenjvzJ7ry9NQzt-BRPEqQlaP7-OvtUNRhbAiqsK2-YpoaVAqNshknuifbqU3S2yxUD_o4jukTJDJppr3CnH_IyV2lYrq2tUQzGZvE71Dmrh6C4eRwsBuV/s1600/image4.jpg" />
</figure>
<div class="bglayer">
<h1 class="one"> Welcome !! </h1>
<h1 class="two"> APR Goat Farm </h1>
<h1 class="three"> Salem Black Goat </h1>
<h1 class="four"> Mechari Semmari Goat </h1>
<p class="one"> You are welcome to AAPR Goat Farm, Please contact Ravi - 8489257126 </p>
<p class="two"> You are welcome to AAPR Goat Farm, Please contact Ravi - 8489257126 </p>
<p class="three"> You are welcome to AAPR Goat Farm, Please contact Ravi - 8489257126. </p>
<p class="four"> You are welcome to AAPR Goat Farm, Please contact Ravi - 8489257126. </p>
</div>
</div>
0 Comments