Slicebox – новый 3D-слайдер для изображений
При помощи CSS 3D Transforms мы можем создать множество интересных эффектов, вращая элементы в трехмерном пространстве. Slicebox использует свойства 3D transforms и позволяет создавать эффекты различных типов. Основная идея заключается в создании трехмерных изображений "порезанных ломтиками", которые будут вращаться и показывать следующее изображение на следующей стороне 3D-объекта. В случае, если браузер не поддерживает 3D-преобразования, обычный слайдер будет использоваться в качестве запасного варианта.
Использование
Для того чтобы использовать Slicebox, разместите ваши изображения в виде неупорядоченного списка с классом "sb-slider":
<ul id="sb-slider" class="sb-slider">
<li>
<a href="#" target="_blank">
<img src="images/1.jpg" alt="image1"/>
</a>
<div class="sb-description">
<h3>Описание</h3>
</div>
</li>
<li>
<img src="images/2.jpg" alt="image2"/>
<div class="sb-description">
<h3>...</h3>
</div>
</li>
<li><!-- ... --></li>
<!-- ... -->
</ul>
Вы можете использовать DIV с классом "sb-description", чтобы добавить описание для соответствующих изображений. Как показано в этом примере, вы также можете добавить анкор для изображения.
Затем вы можете вызвать плагин:
Настройки
Slicebox имеет набор параметров, которые можно настроить для различных типов эффектов:
$.Slicebox.defaults = {
// ориентация (v)-вертикальная, (h)-горизонтальная или (r)-рандомная
orientation : 'v',
// значение перспективы
perspective : 1200,
// количество ломтиков
// нужно чтобы было четное число от 15 до 0 (если вы хотите увеличить лимит,
// измените функцию the _validate).
cuboidsCount : 5,
// если true тогда количество ломтиков будет рандомным (cuboidsCount is overwitten)
cuboidsRandom : false,
// the range of possible number of cuboids if cuboidsRandom is true
// it is strongly recommended that you do not set a very large number <img src="http://s57.ucoz.net/sm/1/smile.gif" border="0" align="absmiddle" alt="smile" />
maxCuboidsCount : 5,
// each cuboid will move x pixels left / top (depending on orientation).
// The middle cuboid doesn't move. the middle cuboid's neighbors will
// move disperseFactor pixels
disperseFactor : 0,
// цвет скрытых сторон
colorHiddenSides : '#222',
// the animation will start from left to right. The left most
// cuboid will be the first one to rotate
// this is the interval between each rotation in ms
sequentialFactor : 150,
// скорость анимации
// this is the speed that takes "1" cuboid to rotate
speed : 600,
// transition easing
easing : 'ease',
// если true, то slicebox будет начинать анимацию автоматически
autoplay : false,
// время (ms) между каждым поворотом, если анимация автоматическая
interval: 3000,
// the fallback will just fade out / fade in the items
// this is the time fr the fade effect
fallbackFadeSpeed : 300,
// callbacks
onBeforeChange : function( position ) { return false; },
onAfterChange : function( position ) { return false; }
};
Проверьте каждый пример, и вы увидите, как создавать различные модели поведения.
Надеюсь, что вам понравилось!
Использование
Для того чтобы использовать Slicebox, разместите ваши изображения в виде неупорядоченного списка с классом "sb-slider":
Код
<ul id="sb-slider" class="sb-slider">
<li>
<a href="#" target="_blank">
<img src="images/1.jpg" alt="image1"/>
</a>
<div class="sb-description">
<h3>Описание</h3>
</div>
</li>
<li>
<img src="images/2.jpg" alt="image2"/>
<div class="sb-description">
<h3>...</h3>
</div>
</li>
<li><!-- ... --></li>
<!-- ... -->
</ul>
Вы можете использовать DIV с классом "sb-description", чтобы добавить описание для соответствующих изображений. Как показано в этом примере, вы также можете добавить анкор для изображения.
Затем вы можете вызвать плагин:
Код
$('#sb-slider').slicebox();
Настройки
Slicebox имеет набор параметров, которые можно настроить для различных типов эффектов:
Код
$.Slicebox.defaults = {
// ориентация (v)-вертикальная, (h)-горизонтальная или (r)-рандомная
orientation : 'v',
// значение перспективы
perspective : 1200,
// количество ломтиков
// нужно чтобы было четное число от 15 до 0 (если вы хотите увеличить лимит,
// измените функцию the _validate).
cuboidsCount : 5,
// если true тогда количество ломтиков будет рандомным (cuboidsCount is overwitten)
cuboidsRandom : false,
// the range of possible number of cuboids if cuboidsRandom is true
// it is strongly recommended that you do not set a very large number <img src="http://s57.ucoz.net/sm/1/smile.gif" border="0" align="absmiddle" alt="smile" />
maxCuboidsCount : 5,
// each cuboid will move x pixels left / top (depending on orientation).
// The middle cuboid doesn't move. the middle cuboid's neighbors will
// move disperseFactor pixels
disperseFactor : 0,
// цвет скрытых сторон
colorHiddenSides : '#222',
// the animation will start from left to right. The left most
// cuboid will be the first one to rotate
// this is the interval between each rotation in ms
sequentialFactor : 150,
// скорость анимации
// this is the speed that takes "1" cuboid to rotate
speed : 600,
// transition easing
easing : 'ease',
// если true, то slicebox будет начинать анимацию автоматически
autoplay : false,
// время (ms) между каждым поворотом, если анимация автоматическая
interval: 3000,
// the fallback will just fade out / fade in the items
// this is the time fr the fade effect
fallbackFadeSpeed : 300,
// callbacks
onBeforeChange : function( position ) { return false; },
onAfterChange : function( position ) { return false; }
};
Проверьте каждый пример, и вы увидите, как создавать различные модели поведения.
Надеюсь, что вам понравилось!
-
FalleN -
6942 -
1 -
261
Но только нужно ставить наверное на те модули которые обновляться должны не раньше через пару тройку минут
С Уважением, Андрей...