shoydullo adminstrator

Fotobaner animatsiya

Muallif: Mengliyev SH.

Qo`shilgan sana: 2014-08-13

Animatsiya fotobaner

Saytingizda rasmlarning harakatini hosil qilish quyidagi g’oya asosida olib boriladi harakat gorizaltal holatda rasmlar chapga yo’naltirilgan.

CSS kodi yordamida amalga oshiramiz.
HTML
Div orqali bir nechta elementlarni bog’lanadi, rasmlar to’plami. Bu erda 6 ta rasm harakati keltiriladi takrorlash uchun yana 4 rasm harakati keltirilgan.
<div id="container">
<header>
<h1>animatsiya fotobaner</h1>
<p>Lorem ipsum dolor...</p>
</header>

<!—har bir rasmning o`lchami 350px Х 233px -->
<div class="photobanner">
<img class="first" src="1.jpg" alt="" />
<img src="2.jpg" alt="" />
<img src="3.jpg" alt="" />
<img src="4.jpg" alt="" />
<img src="5.jpg" alt="" />
<img src="6.jpg" alt="" />
<img src="1.jpg" alt="" />
<img src="2.jpg" alt="" />
<img src="3.jpg" alt="" />
<img src="4.jpg" alt="" />
</div>
</div>

CSS
CSS kod ramka rasm 1000px kengligi bo’lishi kerak.
* {margin: 0; padding: 0;}

body {

background: url('dark_geometric.png');
}

#container {
width: 1000px;
overflow: hidden;
margin: 50px auto;
background: white;
}

/*yuqori bo`limi*/
header {
width: 800px;
margin: 40px auto;
}

header h1 {
text-align: center;
font: 100 60px/1.5 Helvetica, Verdana, sans-serif;
}

header p {
font: 100 15px/1.5 Helvetica, Verdana, sans-serif;
text-align: justify;
}

/*Fotobaner*/

.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}

/*animatsiya kadr*/
.first {
-webkit-animation: bannermove 30s linear infinite;
-moz-animation: bannermove 30s linear infinite;
-ms-animation: bannermove 30s linear infinite;
-o-animation: bannermove 30s linear infinite;
animation: bannermove 30s linear infinite;
}

@keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}

}

@-moz-keyframes bannermove {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}

}

@-webkit-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}

}

@-ms-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}

}

@-o-keyframes "bannermove" {
0% {
margin-left: 0px;
}
100% {
margin-left: -2125px;
}

}

.photobanner {
height: 233px;
width: 3550px;
margin-bottom: 80px;
}

.photobanner img {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

.photobanner img:hover {
-webkit-transform: scale(1.1);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
cursor: pointer;

-webkit-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
-moz-box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
box-shadow: 0px 3px 5px rgba(0,0,0,0.2);
}