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:

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

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.

animated-photo-stack

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:

Bunu da Oku:  CSS3 ile Metin Döndürme
$(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);

});

Yapılması gereken kalan tek şey, bir kaç CSS stili yazmak olacaktır:

#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;
}

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.

demo indir

Bu yazı 79 kez okundu

Emrah

1981 Samsun doğumlu ve Gazi Üniversitesi, Bilgisayar ve Öğretim Teknolojileri Eğitimi mezunu. Bilişim Teknolojileri Öğretmeni olarak görev yapmakta olup DMOZ Editörü, Web-Grafik Tasarımı ve SEO eğitmeni.

Bunları da sevebilirsiniz

Yorum Yap

ataşehir escort escort kadıköy escort taksim escort mecidiyeköy escort şişli escort pendik escort ümraniye escort halkalı escort ataköy escort beylikdüzü escort

sikiş izle porn izle sex hikayeleri kartal escort anadolu yakası escort avrupa yakası escort