Вслед за галереей ImageFlow - рассказ еще об одной весьма эффектной анимации на основе jQuery; возможно, вы сумеете найти ей применение на вашем самом лучшем из всех сайтов.
<!doctype html>
<!--[if lt IE 7 ]> <html lang="en" class="ie6"> <![endif]-->
<!--[if IE 7 ]> <html lang="en" class="ie7"> <![endif]-->
<!--[if IE 8 ]> <html lang="en" class="ie8"> <![endif]-->
<!--[if IE 9 ]> <html lang="en" class="ie9"> <![endif]-->
<!--[if !IE]><!--> <html lang="en"> <!--<![endif]-->
<head>
<meta name="viewport" content="width = 600, user-scalable = no" />
<script type="text/javascript" src="/js/jquery.min.1.7.js"></script>
<script type="text/javascript" src="/js/modernizr.2.5.3.min.js"></script>
</head>
<body>
<div class="flipbook-viewport">
<div class="container">
<div class="flipbook">
<div style="background-image:url(pages/1.jpg)"></div>
<div style="background-image:url(pages/2.jpg)"></div>
<div style="background-image:url(pages/3.jpg)"></div>
<div style="background-image: url(/pages/4.jpg)"></div>
</div>
</div>
</div>
<script type="text/javascript">
function loadApp() {
// Create the flipbook
$('.flipbook').turn({
width:600,
height:389,
elevation: 50,
gradients: true,
autoCenter: true
});
}
yepnope({
test : Modernizr.csstransforms,
yep: ['lib/turn.js'],
nope: ['lib/turn.html4.min.js'],
both: ['css/basic.css'],
complete: loadApp
});
</script>
</body>
</html>
Вообще говоря, установка невероятно проста; вам всего-то и нужно, что разместить на страничке сайта указанный код, изменить под себя цвета и размеры, прописать пути к картинкам. Никаких больше стилей и скриптов, никаких иных столь нелюбимых джумловодами непонятных действий. :)
Сайт проекта; а демо может выглядеть примерно вот так... нажмите на уголочек, полистайте:
