Авторизация







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

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











< Назад

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





< Назад

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

Выход


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

Главная >> jQuery

Поражающая воображение 3D книжная витрина для вашего сайта

Урок есть и в видеоформате! Смотреть?

Вы любите эксперименты? Тогда эта уникальная возможность, создать интерактивную книжную витрину с помощью CSS 3D для вашего сайта, вам необходима. Оригинальный эксперимент для оригинальности вашего сайта.


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

    Обратите внимание, что это работает только в браузерах, поддерживающих CSS 3D преобразования. Для других браузеров, мы просто будем показывать обложку книги.

    Демонстрации лучше всего просматривать в WebKit браузерах.

    HTML

    Чтобы мы могли использовать нашу книгу как 3D объект и применять к ней 3D преобразования, нам необходимо создать некоторую HTML структуру. Наша книга будет состоять из шести основных сторон, и одного внутреннего элемента для содержимого книги, который мы будем использовать как пагинатор и перемещаться по страницам, имитируя эффект «взгляд изнутри». Мы так же могли бы использовать jQuery плагин BookBlock для листания страниц, но данный урок мы не хотели бы перегружать большим количеством эффектов.

    Каркас книги будет выглядеть следующим образом:

<div class="bk-book">
 
    <div class="bk-front">
        <div class="bk-cover">
            <h2>
                <span>Anthony Burghiss</span>
                <span>A Catwork Orange</span>
            </h2>
        </div>
        <div class="bk-cover-back"></div>
    </div>
 
    <div class="bk-page">
        <div class="bk-content bk-content-current">
            <p>Red snapper Kafue pike fangtooth humums slipmouth, salmon cutlassfish; swallower European perch mola mola sunfish, threadfin bream. Billfish hog sucker trout-perch lenok orbicular velvetfish. Delta smelt striped bass, medusafish dragon goby starry flounder cuchia round whitefish northern anchovy spadefish merluccid hake cat shark Black pickerel. Pacific cod.</p>
        </div>
        <div class="bk-content">
            <!-- ... -->
        </div>
        <div class="bk-content">
            <!-- ... -->
        </div>
    </div>
 
    <div class="bk-back">
        <p>In this nightmare vision of cats in revolt, fifteen-year-old Alex and his friends set out on a diabolical orgy of robbery, rape, torture and murder. Alex is jailed for his teenage delinquency and the State tries to reform him - but at what cost?</p>
    </div>
 
    <div class="bk-right"></div>
 
    <div class="bk-left">
        <h2>
            <span>Anthony Burghiss</span>
            <span>A Catwork Orange</span>
        </h2>
    </div>
 
    <div class="bk-top"></div>
 
    <div class="bk-bottom"></div>
</div>

    CSS

    Блок с классом bk-book и будет нашей витриной. Имена же классов книги, будут основаны на её сторонах, задней, боковой и передней. Поскольку мы хотим, чтобы обложка книги открывалась, зададим ей лицевую и заднюю сторону. Задняя сторона книги, так же будет содержать какой-то текст, который будет виден при её развороте на 180 градусов.

    При наведении на книгу курсором мыши, мы будем её немного поворачивать.

    В частности, мы повернём всю книгу на 35 градусов по оси Y:

.bk-list li .bk-book.bk-bookdefault:hover {
    transform: rotate3d(0,1,0,35deg);
}

    Для того чтобы открыть книгу, мы будем нажимать кнопку “Взгляд изнутри”, и тогда, передняя часть нашей книги будет открыта, и мы сможем использовать предварительный просмотр нажимая на стрелки.

    Вращение и зеркальное отражение производится путем применения определенных классов:

.bk-list li .bk-viewinside .bk-front {
    transform: translate3d(0,0,20px) rotate3d(0,1,0,-160deg);
}
 
.bk-list li .bk-book.bk-viewinside {
    transform: translate3d(0,0,150px) rotate3d(0,1,0,0deg);
}
 
.bk-list li .bk-book.bk-viewback {
    transform: translate3d(0,0,0px) rotate3d(0,1,0,180deg);
}

    Во втором демонстрационном примере, книги находятся как бы на полке, и повёрнуты к нам боковой стороной с названием книги и её автором. При наведении курсора, мы слегка наклоним её к нам, а при нажатии, откроем.

    Второй щелкните по книге, закроет её и поставит обратно на полку.

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

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


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

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

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

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


BOOKBLOCK - плагин пролистывания контента
Давайте знакомиться с jQuery плагином, с помощью которого мы сможем создавать буклет контента, и перемещаться по нему листая содержимое.
24 классных PHP библиотеки, о которых вы должны знать
Для PHP-разработчика, и времени лучшего не придумаешь чем сейчас. Ведь каждый день, появляются всё новые и новые вспомогательные элементы, такие, как например полезные библиотеки.
5 прекраснейших дизайнерских решений для ваших форм входа
Уважаемые друзья, в этом уроке, собраны 5 красивейших форм регистрации/авторизации, с пошаговым объяснением, и с возможность бесплатно скачать. Вы всё ещё думаете читать или нет? А кто-то уже вовсю пользуется ими!

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

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

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

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

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

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

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