SliderPhoto Effect In CSS – Aptana Studio 3 Turkish Tutorial

tarikhakan55(66)

Published in

#utopian-io

Words

116

Reading

1 min

Listen

Play

** 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.

Source

** 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>