Animasyonlu CSS3 Fotoğraf Yığını
Bu eğitimde, bir dizi fotoğraf arasında geçiş için her türlü kullanabileceğiniz bir animasyonlu fotoğraf yığını yapacağız.
Efektler, tamamen CSS3 ile gerçekleşmektedir. Modern tarayıcılar ve mobil cihazlarda sorunsuz çalışmaktadır.
Otomatik olarak ilerleyecek fotoğraf yığını kullanarak bir slayt gösterisi olarak da kullanabilirsiniz.
Her zaman olduğu gibi, ilk adım örnek biçimlendirme…
CSS / JS dosyalarının bir dizisi de dahil olmak üzere düzenli bir HTML5 belge ile başlıyoruz:
[html]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Animasyonlu CSS3 Fotoğraf Yığını | Demo</title>
<!– CSS dahil ediliyor –>
<link href="assets/css/style.css" rel="stylesheet" />
<link href="assets/css/animate.css" rel="stylesheet" />
</head>
<body>
<ul id="photos">
<li><a href="http://www.flickr.com/photos/brockwhittaker/8500935165/" style="background-image:url(…)">Manzara 5</a></li>
<!– daha fazla fotoğraf buraya –>
</ul>
<a href="#" class="arrow previous"></a>
<a href="#" class="arrow next"></a>
<!– Kütüphaneler –>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="assets/js/script.js"></script>
</body>
</html>
[/html]
Yukarıdaki kodlarda ul id=”photos” animasyonlu olacak fotoğrafları tutar. Her fotoğraf için, içine bir anchor elemanı ile “li” etiketi tanımlanır. Görüntü, bağlantının arka plan görüntüsü özelliği olarak ayarlanır. CSS bölümünde göreceğiniz gibi, background-size özelliği bağlantının tüm enini ve boyunu kapsayacak şekilde görüntüyü zorlamak için kullanılır. Daha fazla fotoğraf eklerken, unutmayın! Onlar kesinlikle ters sırayla (son fotoğraf üstünde olacak şekilde) konumlandırılmalıdır.
Belgenin “head” bölümünde, ana stil dosyasını dahil ediyoruz ve bize bu harika CSS3 animasyonları veren kütüphaneyi kapanış gövde etiketinden önce ekliyoruz.
Bu efektleri tetikleyen ise JavaScript kütüphanesidir. Bu uygulamada fotoğraflar arasında geçiş yapmak için kullanacağınız oklara tıkladığınızda otomatik geçiş duracaktır. Kullanmanız gereken javascript kodu aşağıdaki gibidir:
[javascript]
$(function() {
var exits = [‘fadeOut’, ‘fadeOutDown’, ‘fadeOutUpBig’, ‘bounceOut’, ‘bounceOutDown’,
‘hinge’, ‘bounceOutUp’, ‘bounceOutLeft’, ‘rotateOut’, ‘rotateOutUpLeft’,
‘lightSpeedOut’, ‘rollOut’];
var entrances = [‘fadeIn’, ‘fadeInDown’, ‘fadeInRight’, ‘bounceIn’, ‘bounceInRight’,
‘rotateIn’, ‘rotateInDownLeft’, ‘lightSpeedIn’, ‘rollIn’, ‘bounceInDown’];
var photos = $(‘#photos’),
ignoreClicks = false;
$(‘.arrow’).click(function(e, simulated){
if(ignoreClicks){
// If clicks on the arrows should be ignored,
// stop the event from triggering the rest
// of the handlers
e.stopImmediatePropagation();
return false;
}
// Otherwise allow this click to proceed,
// but raise the ignoreClicks flag
ignoreClicks = true;
if(!simulated){
// Once the user clicks on the arrows,
// stop the automatic slideshow
clearInterval(slideshow);
}
});
// Listen for clicks on the next arrow
$(‘.arrow.next’).click(function(e){
e.preventDefault();
// The topmost element
var elem = $(‘#photos li:last’);
// Apply a random exit animation
elem.addClass(‘animated’)
.addClass( exits[Math.floor(exits.length*Math.random())] );
setTimeout(function(){
// Reset the classes
elem.attr(‘class’,”).prependTo(photos);
// The animation is complate!
// Allow clicks again:
ignoreClicks = false;
},1000);
});
// Listen for clicks on the previous arrow
$(‘.arrow.previous’).click(function(e){
e.preventDefault();
// The bottom-most element
var elem = $(‘#photos li:first’);
// Move the photo to the top, and
// apply a random entrance animation
elem.appendTo(photos)
.addClass(‘animated’)
.addClass( entrances[Math.floor(entrances.length*Math.random())] );
setTimeout(function(){
// Remove the classess
elem.attr(‘class’,”);
// The animation is complate!
// Allow clicks again:
ignoreClicks = false;
},1000);
});
// Start an automatic slideshow
var slideshow = setInterval(function(){
// Simulate a click every 1.5 seconds
$(‘.arrow.next’).trigger(‘click’,[true]);
}, 1500);
});
[/javascript]
Yapılması gereken kalan tek şey, bir kaç CSS stili yazmak olacaktır:
[css]
#photos{
margin:0 auto;
padding-top:120px;
width:450px;
position:relative;
}
#photos li{
position:absolute;
width:450px;
height:450px;
overflow:hidden;
background-color:#fff;
box-shadow: 1px 1px 1px #ccc;
z-index:10;
-webkit-animation-duration: 1s;
-moz-animation-duration: 1s;
animation-duration: 1s;
}
#photos li a{
position:absolute;
top:6px;
left:6px;
right:6px;
bottom:6px;
background-size: cover;
text-indent:-9999px;
overflow:hidden;
}
[/css]
Animasyonlar süresini değiştirmek için, animasyon-duration özelliği kullanılır. Yukarıdaki kod parçasında, 1 saniye olarak ayarlandığını görebilirsiniz.
