Авторизация







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

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











< Назад

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





< Назад

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

Выход


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

Главная >> CSS

Оригинальное 3D меню для вашего ресторана с CSS3 и jQuery


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


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

    Пространства на странице для такого «красавца» требуется довольно много, даже если учесть его интерактивность, но мы позаботимся и об этом вопросе, создав необходимые стили для небольших экранов. Так же мы решим вопрос с браузерами которые не поддерживают преобразования CSS 3D.

    Для примера, используются реальные рецепты от Michael Natkin (herbivoracious.com).

    Пожалуйста, обратите внимание: это правильно работает только в браузерах, которые поддерживают необходимые свойства CSS.

    Итак, давайте начнем!

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

    HTML

    Вся структура нашего меню, будет находиться в блоке с классом «rm-container», внутри которого будут находиться все необходимые элементы.  Обёртка, будет содержать 3 панели. Первая из которых, с классом «rm-wrapper» - это лицевая сторона, с предложением развернуть меню. Крайняя правая, с классом «rm-right». Средняя «rm-middle» - это та часть, которую мы будем видеть в середине, когда открываем меню:

<div id="rm-container" class="rm-container">
 
    <div class="rm-wrapper">
        <div class="rm-cover"></div>
        <div class="rm-middle"></div>
        <div class="rm-right"></div>
    </div><!-- /rm-wrapper -->
 
</div><!-- /rm-container -->

    Блоки «rm-cover» и «rm-right», будут иметь как лицевую, так и тыльную стороны:

<div class="rm-front">
 
    <div class="rm-content">
        <!-- Некоторый контент -->
    </div><!-- /rm-content -->
     
</div><!-- /rm-front -->
 
<div class="rm-back">
 
    <div class="rm-content">
        <!-- Некоторый контент -->
    </div><!-- /rm-content -->
 
    <div class="rm-overlay"></div>
 
</div><!-- /rm-back -->

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

    Средняя часть меню, не будет иметь ни передней, не задней части, в ней просто расположитсяобёртка:

<div class="rm-inner">
 
    <div class="rm-content">
        <!-- Некоторый контент -->
    </div><!-- /rm-content -->
 
    <div class="rm-overlay"></div>
 
</div><!-- /rm-inner -->

    Заднюю часть меню, нам видеть не нужно, поэтому для неё создавать структуру мы не будем.

    Содержание меню будет включать в себя некоторые текстовые элементы, такие как списки с фотографией и краткой информацией:

<div class="rm-content">
 
    <h4>Appetizers</h4>
 
    <dl>
        <dt>Bella's Artichokes</dt>
        <dd>Roasted artichokes with chipotle aioli and cream cheese</dd>
 
        <dt><a href="http://herbivoracious.com/2011/11/crostini-with-young-pecorino-grilled-figs-and-arugula-mint-pesto-recipe.html" class="rm-viewdetails" data-thumb="images/1.jpg">Green Love Crostini</a></dt>
        <dd>Crostini with young pecorino, grilled figs and arugula & mint pesto</dd>
         
        <dt>Focaccia di Carciofi</dt>
        <dd>Artichoke focaccia with fresh thyme</dd>
 
        <!-- ... -->
    </dl>
 
    <h4>Salads & More</h4>
     
    <dl>
        <!-- ... -->
    </dl>
 
</div><!-- /rm-content -->

    Обратите внимание на якорь с классом “rm-viewdetails” и его атрибут “data-thumb”. Мы будем использовать его для наложения модального окна с подробным описанием по щелчку мыши на выбранном элементе:

<div class="rm-modal">
    <div style="background-image: url(/zhitelyam/images/1.jpg)" class="rm-thumb"></div>
    <h5>Green Love Crostini</h5>
    <p>Crostini with young pecorino, grilled figs and arugula & mint pesto</p>
    <a href="http://herbivoracious.com/2011/11/crostini-with-young-pecorino-grilled-figs-and-arugula-mint-pesto-recipe.html">See the recipe</a>
    <span class="rm-close-modal">x</span>
</div>

    Модальное окно будет содержать тот же заголовок и описание, которое мы использовали в выбранном элементе меню, а так же миниатюру изображения, которую мы получим из ссылки элемента dt  с data-thumb.

    С разметкой мы завершили, давайте переходить к стилям.

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

    CSS

    Главному контейнеру, мы зададим ширину в %, чтобы в зависимости от разрешения экрана, меню выглядело оптимально, поскольку мы не хотим, чтобы вместо элегантного 3D, пользователь увидел ужасный 3D:

.rm-container {
    width: 33%;
    height: 700px;
    max-width: 370px;
    margin: 0 auto 40px auto;
    position: relative;
    perspective: 1600px;
    color: #2a323f;
}

    Дочерние элементы обёртки (лицевая сторона, средняя и правая) будут иметь 100% для длины и ширины, а так же абсолютным позиционированием:

.rm-wrapper,
.rm-wrapper > div {
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    position: absolute;
    text-align: center;
    transform-style: preserve-3d;
}

    Поскольку мы будем работать в 3D перспективе, давайте трансформируем эти элементы так,  чтобы они находились в 3d пространстве “ preserve-3d ”.

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

.rm-wrapper .rm-cover {
    z-index: 100;
    transform-origin: 0% 50%;
    transition-delay: 0.2s;
}

    Средняя часть, будет иметь самый низкий z-index из всех трёх частей, давайте так же добавим ей тень:

.rm-wrapper .rm-middle {
    z-index: 50;
    box-shadow: 0 4px 10px rgba(0,0,0,0.7);
}

    Правая часть меню, будет иметь z-index выше чем у средней части, но меньше чем обложки. Для анимации закрытия правой части, мы не будем использовать никакой задержки:

.rm-wrapper .rm-right {
    z-index: 60;
    transform-origin: 100% 50%;
    transition-delay: 0s;
}

    Внутренние блоки с классами “rm-front”, “rm-back” и “rm-inner”, в качестве фонового изображения, будут иметь фактуру бумаги, а для имитации многоканальных декоративных границ, давайте применим тени:

.rm-wrapper > div > div {
    background: #fff url(/zhitelyam/images/white_paperboard.jpg);
    width: 100%;
    height: 100%;
    position: absolute;
    padding: 30px;
    box-shadow: 
        inset 0 0 0 16px #fff, 
        inset 0 0 0 17px #e6b741, 
        inset 0 0 0 18px #fff, 
        inset 0 0 0 19px #e6b741, 
        inset 0 0 0 20px #fff, 
        inset 0 0 0 21px #e6b741;
}

    А сейчас, добавим важное 3D свойство. Оно определит,  будет ли видно контент элемента, который с помощью 3d трансформаций отвернут лицевой стороной:

.rm-container .rm-front,
.rm-container .rm-back {
    backface-visibility: hidden;
}

    Давайте сразу повернём  переднюю и заднюю обложку на 180 градусов:

.rm-container .rm-back {
    transform: rotateY(-180deg);
}

    Наложения будут выполнены в стиле полупрозрачного градиента:

.rm-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    pointer-events: none;
    background: linear-gradient(to right, rgba(0,0,0,0) 0%, rgba(0,0,0,0.05) 100%);
}

    Наложение для среднего блока, мы чуть наклоним в другую сторону:

.rm-middle .rm-overlay {
    background: linear-gradient(to right, rgba(0,0,0,0) 64%, rgba(0,0,0,0.05) 100%);
}

    Давайте добавим отступы в блок с контентом:

.rm-content {
    padding: 20px;
}

    Модальные окна будут невидимы: мы установили непрозрачность в 0, а так же элемент перестанет реагировать на hover, click и другие события мыши. Он станет «прозрачным» для взаимодействия, а hover и click будут передаваться элементу, лежащему под ним, этого мы добьёмся свойством pointer-events:

.rm-modal {
    position: absolute;
    z-index: 10000;
    width: 120%;
    margin-left: -10%;
    top: 50%;
    padding: 40px;
    background: #fff url(/zhitelyam/images/white_paperboard.jpg);
    box-shadow: 
        inset 0 0 0 16px #fff, 
        inset 0 0 0 17px #e6b741, 
        inset 0 0 0 18px #fff, 
        inset 0 0 0 19px #e6b741, 
        inset 0 0 0 20px #fff, 
        inset 0 0 0 21px #e6b741,
        0 4px 20px rgba(0,0,0,0.4);
    opacity: 0;
    pointer-events: none;
    transform: translateZ(1000px);
}

    Идея заключается в том, чтобы модальное окно появлялось после щелчка по ссылке выбранного меню. Изменяя масштаб от большего к меньшему, и меняя z-index, у нас получится очень красивый эффект, будто модальное окно летит от экрана к меню. На это нас вдохновила работа Hakim El Hattab’s  модальные окна Avgrund.

    Давайте добавим несколько переходов, и определим несколько классов, для открытия меню.

    Во-первых, мы определим переход для основного блока, во время масштабирования при открытии модального окна, и для его дочерних элементов, т.е. наших трёх составляющих, для них переходы будут открытие/поворот:

.rm-wrapper, .rm-wrapper > div { transition: all 0.6s ease-in-out; }

    И конечно же не забудем про модальные окна, во время перехода, они должны изменять прозрачность:

.rm-modal {
    transition: 
        transform 0.6s ease-in-out,
        opacity 0.6s ease-in-out;
}

    Идея заключается в том, чтобы при клике на кнопку «Просмотреть меню», с помощью JavaScript вызванному модальному окну назначался, класс "rm-open", что приведёт к его последующему открытию.

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

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

.rm-container.rm-open .rm-wrapper > div {
    box-shadow: 0 4px 5px -3px rgba(0,0,0,0.6);
}

    Что касается лицевой обложки нашего меню, она будет открываться без задержки, разворот составит -180 градусов, то есть в левую сторону:

.rm-container.rm-open .rm-cover {
    transform: rotateY(-180deg);
    transition-delay: 0s;
}

    Тыльная обложка, будет так же поворачиваться на 180 градусов, но в правую сторону,  для неё нам необходимо задать некоторую задержку, в нашем случае 0,2 секунды, чтобы произвести эффект постепенного раскрытия меню:

.rm-container.rm-open .rm-right {
    transform: rotateY(180deg);
    transition-delay: 0.2s;
}

    Когда мы нажимаем по якорю одного из пунктов меню, основной блок должен перемещаться вглубь по оси Z, для этого к нему, мы будем добавлять класс «rm-in»:

.rm-container.rm-in .rm-wrapper {
    transform: translateZ(-500px);
}

    Левая (лицевая) и правая (закрывающая) стороны, при этом будут повёрнуты во внутрь на 150 градусов:

.rm-container.rm-in .rm-cover {
    transform: rotateY(-150deg);
}
 
.rm-container.rm-in .rm-right {
    transform: rotateY(150deg);
}

    Для этого случая, задержку установим в 0 секунд:

.rm-container.rm-in .rm-cover, 
.rm-container.rm-in .rm-right,
.rm-container.rm-nodelay .rm-right {
    transition-delay: 0s;
}

    Это была переходная задержка для открывающегося модального окна. Класс "rm-nodelay" является экстра - классом, он нам пригодится и для действий во время закрытия модального окна.

    Чтобы модальное окно появилось, нам необходимо передвинуть его в 0 пиксель Z координаты, и увеличить непрозрачность до 1:

.rm-container.rm-in .rm-modal {
    transform: translateZ(0px);
    opacity: 1;
    pointer-events: auto;
}

    Ну вот, а сейчас, давайте создадим несколько стилей, для небольших разрешений экранов и портативных устройств. Первое что мы сделаем, уменьшим размер основного блока, если максимальная ширина экрана составляет 1110 пикселей:

@media screen and (max-width: 1110px) {
    .rm-container {
        height: 800px;
    }
}

    Поскольку мы задали нашему основному блоку ширину в %, то сейчас, мы должны увеличить высоту, чтобы вмещалось все содержимое.

    Для экранов с максимальной шириной в 960 пикселей, мы не будем показывать наше меню в виде сложенного буклета, вместо этого сделаем обычную прокрутку содержимого.
    Для этого, просто установим высоту в положение авто, и сделаем ширину в 100%:

@media screen and (max-width: 960px) {
 
    .rm-container {
        width: 100%;
        height: auto;
        max-width: 460px;
    }

    Все внутренние элементы, перестанут позиционироваться абсолютно, они станут относительными, а так же получат 100% ширины и высоту в положении авто:

.rm-wrapper, 
.rm-wrapper > div,
.rm-wrapper > div > div {
    position: relative;
    width: 100%;
    height: auto;
}

    В этом случае, им станут необходимы дополнительные отступы:

.rm-wrapper > div > div{
    margin-bottom: 10px;
    box-shadow: 
        inset 0 0 0 16px #fff, 
        inset 0 0 0 17px #e6b741, 
        inset 0 0 0 18px #fff, 
        inset 0 0 0 19px #e6b741, 
        inset 0 0 0 20px #fff, 
        inset 0 0 0 21px #e6b741,
        0 3px 5px rgba(0,0,0,0.2);
}

    Давайте уберем вращения:

.rm-container .rm-back,
.rm-container.rm-open .rm-cover,
.rm-container.rm-open .rm-right {
    transform: rotateY(0deg);
}

    Более, мы не нуждаемся в наложениях:

.rm-overlay, .rm-middle .rm-overlay {
    display: none;
}

    Для такого размера экрана, давайте зададим положение модальных окон в фиксированное, чтобы они прилипали к центру экрана во время прокрутки:

.rm-container .rm-modal {
    position: fixed;
    width: 80%;
    top: 100px;
    left: 50%;
    margin: 0 0 0 -40%;
    transform: translateZ(0px);
    transition: opacity 0.6s ease-in-out 0s;
}

    И теперь, когда мы будем нажимать на пункт меню, никаких трансформаций происходить не будет, просто появится модальное окно:

.rm-container.rm-in .rm-cover,
    .rm-container.rm-in .rm-right,
    .rm-container.rm-in .rm-wrapper {
        transform: rotateY(0deg);
        transition-delay: 0s;
    }
}

    Для браузеров, не поддерживающих 3D преобразования, мы будем использовать практически такой же стиль, который создали для экранов с шириной в 960 пикселей. Поскольку мы используем jQuery библиотеку Modernizr, то просто добавим класс .no-csstransforms3d к телу документа (body).

    Со стилями всё, а теперь пришло время добавить несколько строк JavaScript.

    JavaScript

    По обыкновению, давайте начнём с кэширования некоторых элементов:

  // Основной контейнер
var $container = $( '#rm-container' ),                      
    // Лицевая сторона, средняя и правая панель
    $cover = $container.find( 'div.rm-cover' ),
    $middle = $container.find( 'div.rm-middle' ),
    $right = $container.find( 'div.rm-right' ),
    // открываем и закрываем элементы
    $open = $cover.find('a.rm-button-open'),
    $close = $right.find('span.rm-close'),
    // ссылки для каждого рецепта (фото и подробности)
    $details = $container.find( 'a.rm-viewdetails' ),

    Ещё инициализируем события для открытия/закрытия меню, а так же для отображения каждого их модальных окон:

init = function() {
 
        initEvents();
 
    },
initEvents = function() {
 
    $open.on( 'click', function( event ) {
 
        openMenu();
        return false;
 
    } );
 
    $close.on( 'click', function( event ) {
 
        closeMenu();
        return false;
 
    } );
 
    $details.on( 'click', function( event ) {
 
        $container.removeClass( 'rm-in' ).children( 'div.rm-modal' ).remove();
        viewDetails( $( this ) );
        return false;
 
    } );
     
},

    Чтобы открывать/закрывать наше меню, мы будем добавлять/удалять класс  «rm-open» к основному $container. Помните, что стили переходов, мы определили в CSS.

    Обратите внимание, для модальных окон, мы будем удалять  классы «rm-nodelay» и «rm-in». Они будут автоматически добавляться при клике на пункте меню.

openMenu = function() {
 
    $container.addClass( 'rm-open' );
 
},
closeMenu = function() {
 
    $container.removeClass( 'rm-open rm-nodelay rm-in' );
 
},

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

viewDetails = function( recipe ) {
 
    var title = recipe.text(),
        img = recipe.data( 'thumb' ),
        description = recipe.parent().next().text(),
        url = recipe.attr( 'href' );
 
    var $modal = $( '<div class="rm-modal"><div class="rm-thumb" style="background-image: url(/zhitelyam/& + img + ')"></div><h5>' + title + '</h5><p>' + description + '</p><a href="' + url + '">See the recipe</a><span class="rm-close-modal">x</span></div>' );
 
    $modal.appendTo( $container );
 
    var h = $modal.outerHeight( true );
    $modal.css( 'margin-top', -h / 2 );
 
    setTimeout( function() {
 
        $container.addClass( 'rm-in rm-nodelay' );
 
        $modal.find( 'span.rm-close-modal' ).on( 'click', function() {
 
            $container.removeClass( 'rm-in' );
 
        } );
     
    }, 0 );
 
};

    Вот и все! Надеюсь, вам понравилась эта статья, и вы нашли её полезной!

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


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

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

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

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


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

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

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

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

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

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

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

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