Scribd
Upload
103 views

Image Slider Code For Adding On Blogger

This CSS code creates an animated banner with sliding images and text. It uses keyframe animations to slide the images and content within a fixed container with overlapping elements. Text and images are positioned using absolute positioning and CSS animates their properties like opacity, position and visibility over multiple keyframes to create a smooth transition between each slide.

Uploaded by

apt stiegemawidyabangsa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
103 views

Image Slider Code For Adding On Blogger

This CSS code creates an animated banner with sliding images and text. It uses keyframe animations to slide the images and content within a fixed container with overlapping elements. Text and images are positioned using absolute positioning and CSS animates their properties like opacity, position and visibility over multiple keyframes to create a smooth transition between each slide.

Uploaded by

apt stiegemawidyabangsa
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
You are on page 1/ 5

<style>

#slider{
width: 900px;
height: 290px;
border: 5px solid white;
box-shadow: 0px 0px 5px #bbb;
overflow: hidden;
margin: 0 auto;
padding: 0px;
}

figure{
/*width: 3615px;*/
width: 1850px;
height: 290px;
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: #FF0;
position:relative;
text-shadow:0px -5px 5px #CCCCCC;
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: #FFF;
position:relative;
margin: 0;
padding: 0;
text-shadow:0px -5px 5px #CCCCCC;
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://1.bp.blogspot.com/-zsa-
cQWGAlo/YHQMKTCT5OI/AAAAAAAAIQo/ay3-
psngYC4zLPlmW01_YytS_lXNcBTPACLcBGAsYHQ/s16000/banner3.jpg" />
<img src="https://1.bp.blogspot.com/-
0kWcDUsNWnQ/YHQMKnhQt7I/AAAAAAAAIQs/nOoKBV4u9SEwlDleEuNppNLDM8gpDR_qwCLcBGAsYHQ/s16
000/banner2.jpg" />
<img src="https://1.bp.blogspot.com/-
JuaAnOWJE5Y/YHQMK5gzNqI/AAAAAAAAIQw/a9vIKmm_2T4CCdZoo13KQ7JdkCKzUGhrQCLcBGAsYHQ/s16
000/banner1.jpg" />
<img src="https://1.bp.blogspot.com/-zsa-
cQWGAlo/YHQMKTCT5OI/AAAAAAAAIQo/ay3-
psngYC4zLPlmW01_YytS_lXNcBTPACLcBGAsYHQ/s16000/banner3.jpg" />
</figure>
<div class="bglayer">
<h1 class="one"> Welcome !! </h1>
<h1 class="two"> Logo Designs </h1>
<h1 class="three"> Graphics Designs </h1>
<h1 class="four"> Web Designs </h1>

<p class="one"> You are welcome to Aptech Designers, designed by


Pratik from Nepal. </p>
<p class="two"> Creativity is my passion. Logo describes your
details about company. </p>
<p class="three"> Graphics Design needs vision to create yours
unique digital concept. </p>
<p class="four"> Responsive and All Browser Compatible Dynamic Web
Layouts our target. </p>
</div>
</div>

You might also like