Turn.js плагин добавляющий эффект похожий на перелистывание страниц в книгах для HTML5. Используется аппаратное ускорение. Работает на планшетах и смартфонах. Прост в управлении и весит всего 6Kb.

Разметка HTML

<div id='magazine'>
    <div> Страница 1 </div>
    <div> Страница 2 </div>
    <div> Страница 3 </div>
</div>

CSS

#magazine{
    width:800px;
    height:400px;
}
#magazine .turn-page{
    width:400px;
    height:400px;
    background-color:#ccc;
}

javascript

$('#magazine').turn();

Конструктор

$('селектор').turn([опции]);


Пример:
$('селектор').turn({page:1});


Параметры:
    опции

  • width - тип: number, default: $('селектор').width()
  • height - тип: number, default: $('селектор').height()
  • page - тип: number, default: 1
  • shadows - тип: boolean, default: true
  • duration - тип: number, default: 600
  • acceleration - тип: boolean, default: true

Вызов методов или свойств:

$('селектор').turn(свойство | метод [, параметры]);

 

Офф. страница плагина: http://www.turnjs.com

Более подробное wiki: https://github.com/blasten/turn.js/wiki/Reference

СКАЧАТЬСкачек: 3001
1,47 Mb
Кто скачал?

ДЕМОПосмотреть
пример