** In this Aptana Studio 3 Turkish Tutorial, I will show you make sliderbar photo effect with CSS. Slider effects are frequently used elements in web site designs. You will find some practical information on this video.**
Aptana Studio 3 programın da CSS metodu ile kolay ve anlaşılabilir bir şekilde geçiş efektli bir resim çalışması yapacağız. Web siteleri bu yöntemi program ne olursa olsun başladıkları günlerden beri kullanmaktadırlar.
** Aptana Studio 3 derleyiciler içinde sanırım en sorunsuz çalışıp bize katkı sağlayanıdır. Animasyonlu efekt olaylarında da anında görüntüleyip sonucu bize vermektedir.**
SLIDER PHOTO
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slider Photo</title>
<style>
#container{
width: 800px;
overflow:hidden;
}
#sliderbox{
position: relative;
width: 3200px;
animation-name: slideranimation;
animation-duration: 20s;
animation-iteration-count: infinite;
}
#sliderbox img{
float: left;
}
@keyframes slideranimation{
0%
{
left: 0px;
}
20%
{
left: 0px;
}
25%
{
left: -800px;
}
45%
{
left: -800px;
}
50%
{
left: -1600px;
}
70%
{
left: -1600px;
}
}
</style>
</head>
<body bgcolor="black">
<div id="container">
<div id="sliderbox">
<img src="img/1.jpg" />
<img src="img/2.jpg" />
<img src="img/3.jpg" />
</div>
</div>
</body>
</html>
Bir sonraki aşamada görüşmek üzere…
Githup link: Aptana Studio 3
İndirme Link Sitesi: Aptana Studio 3
Posted on Utopian.io - Rewarding Open Source Contributors