Авторизация







Регистрация / Забыли пароль?

Регистрация нового пользователя











< Назад

Восстановление пароля





< Назад

Добро пожаловать

Выход


Ежедневное обновление статей и уроков, будь в курсе, держи руку на пульсе событий!

Главная >> jQuery

STACKSLIDER - установи к себе на сайт забавный 3D слайдер


Экспериментальный jQuery слайдер, который с помощью 3D, будет размещать ваши фотографии в две стопки, переходя по снимкам, одна стопка будет уменьшаться, а другая увеличиваться, само же выбранное фото, повернётся к вам лицевой стороной.


    StackSlider – экспериментальный jQuery плагин, для создания слайдера изображений. Его отличительной способностью является оригинальный эффект пролистывания изображения с помощью CSS3, 3D преобразований и перспектив. Идея создания заключается в следующем - представьте, что перед вами, 2 колоды карт, и вы можете брать карту с одной колоды, просмотрев её, положить в другую, взяв следующую, и так далее, при этому вы можете брать карты с обеих колод.

    Изображения для демонстрации, предоставлены Isaac Montemayor. Увидеть все его работы, вы можете здесь.

    Пожалуйста, обратите внимание на следующий факт. Данный плагин, является экспериментальным, и не полностью протестирован. 3D эффекты, будут работать только в том случае, если ваш браузер их поддерживает, в противном, будут применяться простые эффекты скрыть/показать. Эффект лучше выглядит в WebKit браузерах.

    HTML

    Для работы плагина, мы будем использовать неупорядоченный список со следующей структурой:

<ul id="st-stack" class="st-stack-raw">
    <li>
        <div class="st-item">
            <a href="http://drbl.in/fgQV">
                <img src="images/1.jpg" />
            </a>
        </div>
        <div class="st-title">
            <h2>Graverobber</h2><h3>by Isaac Montemayor</h3>
        </div>
    </li>
    <li> <!-- ... --> </li>
    <li> <!-- ... --> </li>
    <li> <!-- ... --> </li>
    <!-- ... -->
</ul>

    Наш список, будет иметь основной класс “st-stack-raw ”, и при выключенном JS, использовать обычный список миниатюр, вместо колод с изображениями.

    JavaScript

    Давайте теперь подключим наш плагин:

$( '#st-stack' ).stackslider();

    Он немного преобразит структуру списка, добавив к нему элементы стопкок изображений, названия и навигацию.

    Настройки

    По умолчанию, доступны следующие:

// по умолчанию скорость перехода 
speed : 700,
 
// по умолчанию переход смягчения
easing : 'ease-in-out',
 
// установить колоды
piles : true

    Все необходимые стили, вы найдёте в style.css. Так же, мы использовали некоторые стили для небольших размеров экрана, показа миниатюр, позиционирования и названия изображений. Если вы хотите установить его к себе на страничку, не забудьте изменить стили для небольших экранов, чтобы подогнать размеры слайдера, под размеры контента на странице.

    Материал взят из зарубежного источника. И представлен исключительно в ознакомительных целях.


Дата публикации: 10.03.2013
Опубликовал: Сергей Кашурин
Просмотров: 648
Правила перепечатки

Правила перепечатки

Уважаемый посетитель сайта!
Ниже преведены условия использования и перепечатки материалов сайта /
Все материалы данного сайта подготовлены для Вас лично мной.

Большая часть материалов сайта - это авторские уроки, остальные, это переводы уроков с английского языка на русский.
Если Вы решили использовать материалы данного сайта где-то на своих ресурсах или в рассылке, то соблюдайте следующие требования:
1. Урок или статья должны перепечатываться «как есть» с сохранением всех ссылок на источник урока, а если это перевод, то и на сайт, авторы которого подготовили его.
2. Ссылки на сайт источника и переводчика обязательно должны быть работоспособными (при нажатии по ссылке человек должен перейти на сайт автора/переводчика). Если Вы перепечатали какой-либо документ, обязательно проверьте ссылку на работоспособность.
3. Искажение информации об авторе, источнике, переводчике при перепечатке материалов запрещено!
4. Содержание урока или статьи при перепечатке не должно подвергаться модификациям и переделке. Все уроки и статьи, размещенные на сайте, должны перепечатываться как есть. Вы не имеете права урезать, исправлять или иным образом коверкать републикуемый документ.
С уважением, Сергей Кашурин– владелец сайта /


23 jQuery плагина для организации слайд-шоу и галерей на сайте
Дорогие Друзья! Сегодня, я хочу познакомить вас с подборкой замечательных jQuery плагинов для создания слайд-шоу и галерей. Все они являются бесплатными и очень просты в установке и настройке.
25 поразительных анимаций CSS3, которые улучшат внешний вид вашего сайта
CSS3, сокращение от английского Cascading Style Sheets 3, третье поколение таблиц стилей, которые используются для визуального представления сайта, при минимальном размере кода. Этот последний многообещающий набор стандартов, состоит из большого числа функций и инструментов, которые позволяют улучшить и контролировать дизайн и увеличивать скорость загрузки сайта.
BARAJA - jQuery плагин создающий великолепные информационные карточки на вашем сайте, экономя драгоценное место
Благодаря этому плагину, элементы могут располагаться как карты в виде стопки, раскладываясь перед нами оригинальным способом. Добавьте к элементам небольшой текст и уникальный рисунок, примените оригинальный эффект преобразования, и ваша страничка преобразится на глазах.

Уроки и статьи

«Найден Самый Дешевый и Эффективный Способ Рекламы в Интернете!»

Доказанo: ведение своей почтовой рассылки - это самый действенный и дешевый метод рекламы в Интернете.

Используете ли Вы его?

Если нет, то Вы давно теряете свои деньги! Если да, то пришло время вести Вашу почтовую рассылку на самом эффективном инструменте в Рунете - сервисе рассылок SmartResponder.ru

Узнать об этом подробнее >>

Быть в курсе всех событий: