:

:




?


- 9$.
!!!
- 8 !!!

 

CSS3.

: 07.12.2013
: 
: bulatlab.ru

, !   , HTML CSS, . CSS3,   .

 

c html- :

index.html 

<!DOCTYPE html>
<html>
<head>
	<link href="style.css" rel="stylesheet"/>
	<link href="animate.css" rel="stylesheet"/>
   <script src="jquery.min.js"></script>
	<script src="script.js"></script>
</head>
<body>

	<ul id="photos">
		<li><a href="#" style="background-image:url(1.jpg)">5</a></li>
		<li><a href="#" style="background-image:url(2.jpg)">4</a></li>
		<li><a href="#" style="background-image:url(3.jpg)">3</a></li>
		<li><a href="#" style="background-image:url(4.jpg)">2</a></li>
		<li><a href="#" style="background-image:url(5.jpg)">1</a></li>
	</ul>
	<a href="#" class="arrow previous"></a>
	<a href="#" class="arrow next"></a>
	

</body>
</html>

. , – style.css, , , - animate.css, ,   CSS3. jQuery , .

 

 , bacrground-image. background-size: cover , .

 

:

 style.css

*{margin:0;	padding:0;}
body{position:relative;>min-height:500px;}
a, a:visited {outline:none;	color:#1c4f64;}
a:hover{	text-decoration:none;}
section, footer, header{display: block;}
/*----------------------------*/
#photos{
	margin:0 auto;
	padding-top:120px;
	width:650px;
	position:relative;
}
#photos li{
	position:absolute;
	width:650px;
	height:650px;
	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;
}

/*----------------------------*/
a.arrow{
	width:33px;
	height:33px;
	background:url('arrows.png') no-repeat;
	position:absolute;
	top:440px;
	opacity:0.9;
}
a.arrow:hover{
	opacity:1;
}

a.arrow.previous{
	left:50%;
	background-position:0 0;
	margin-left:-380px;
}
a.arrow.next{
	right:50%;
	background-position:-33px 0;
	margin-right:-380px;
}

 

script.js:

$(function() {
	var ss = [  'fadeOut', 
               'fadeOutDown', 
               'fadeOutUpBig', 
               'bounceOut', 
               'bounceOutDown', 
               'hinge',
               'bounceOutUp', 
               'bounceOutLeft', 
               'rotateOut', 
               'rotateOutUpLeft', 
               'lightSpeedOut', 
               'rollOut'];
	var mm = [  'fadeIn', 
               'fadeInDown', 
               'fadeInRight', 
               'bounceIn', 
               'bounceInRight', 
               'rotateIn', 
               'rotateInDownLeft', 
               'lightSpeedIn', 
               'rollIn', 
               'bounceInDown' ]; 
	var photos = $('#photos'),	ignoreClicks = false;
   
	//   Ш
	$('.arrow.next').click(function(e){
		e.preventDefault();
		//    (*)
		var elem = $('#photos li:last');
		//    
		elem.addClass('animated')
		elem.addClass( ss[Math.floor(ss.length*Math.random())] );
		setTimeout(function(){
      elem.attr('class','').prependTo(photos);},2000);
	});
   
   
	//    
	$('.arrow.previous').click(function(e){
		e.preventDefault();
		//   ()
		var elem = $('#photos li:first');
		//       
		elem
         .appendTo(photos)
			.addClass('animated')
			.addClass( mm[Math.floor(mm.length*Math.random())]);
		setTimeout(function(){elem.attr('class','');},2000);
	});

	
});

, , .

! ! :)

 

  

 

 
: 246
: 0
: (0)