linkedin facebook linkedin facebook nod32

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 {
<!-- src: http://subtlepatterns.com/?p=1045 -->
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);
}

Tayyorladi: Mengliyev Shoydullo
Dars beruvchi: ruseller.com
Dars beruvchi: designshack.net/articles/css/infinitephotobanner/

2146 marta o`qildi.

Parol:
Eslab qolish.


Ro`yhatdan o`tish

testing

+998915878681

Siz o`z maxsulotingizni 3D reklama ko`rinishda bo`lishini xohlaysizmi? Unda xamkorlik qilamiz.

3D Reklama


Рейтинг@Mail.ru
Рейтинг@Mail.ru

Besucherzahler
счетчик посещений