WEB лаборатория DLE » Другое для WEB » Скрипты и модули » Анимированное трехмерное меню на CSS
Навигация
Популярное
    Статистика

    Материалов: 1789 [+0]
    Пользователей: 685 [+0]

    Всего онлайн : 2
    Пользователей: 0
    Гостей: 2

    Yandex
    Последние комментарии
    ...
    HI-tech:
    0

    Анимированное трехмерное меню на CSS

    Анимированное трехмерное меню на CSS


    CSS-анимации помогают нам реализовать не только простые эффекты скольжения или затемнения. CSS-анимации в наши дни способны на гораздо большее. Мы уже рассказывали вам о том, как создать взрывающийся логотип (разработанный при помощи javascript, но с анимацией на CSS), анимированный фото-сток, а также о некоторых других трехмерных CSS3-эффектах. Сегодня мы хотим рассказать вам о создании простого, но очень необычного трехмерного переворачивающегося меню!

    HTML-код

    HTML-структура состоит из списка ссылок, как и во всех навигационных меню. Тем не менее, здесь у нас будет несколько дополнительных span-элементов для реализации трехмерного эффекта:

    <ul class="block-menu">
    <li><a href="/" class="three-d">
    Home
    <span aria-hidden="true" class="three-d-box">
    <span class="front">Home</span>
    <span class="back">Home</span>
    </span>
    </a></li>
    <li><a href="/demos" class="three-d">
    Demos
    <span aria-hidden="true" class="three-d-box">
    <span class="front">Demos</span>
    <span class="back">Demos</span>
    </span>
    </a></li>
    <!-- more items here -->
    </ul>


    Кроме основного элемента A, несколько span-элементов используются для представления «передней» и «задней» сторон трехмерного блока в процессе анимации. Каждой нужно задать тот же текст, что и элементу A.

    CSS-код

    Анимация будет построена на переходах и трансформациях. Сам A-элемент не будет двигаться – будет двигаться родительский span-элемент. Каждый внутренний Span будет инициализироваться на своей позиции и не будет изменяться. Каждый элемент будет двигаться вверх и вниз при помощи CSS-трансформаций и CSS-переходов. Один будет поворачиваться задней стороной, а все остальные – наоборот.

    /* basic menu styles */
    .block-menu {
    display: block;
    background: #000;
    }

    .block-menu li {
    display: inline-block;
    }

    .block-menu li a {
    color: #fff;
    display: block;
    text-decoration: none;
    font-family: 'Passion One', Arial, sans-serif;
    font-smoothing: antialiased;
    text-transform: uppercase;
    overflow: visible;
    line-height: 20px;
    font-size: 24px;
    padding: 15px 10px;
    }

    /* animation domination */
    .three-d {
    perspective: 200px;
    transition: all .07s linear;
    position: relative;
    cursor: pointer;
    }
    /* complete the animation! */
    .three-d:hover .three-d-box,
    .three-d:focus .three-d-box {
    transform: translateZ(-25px) rotateX(90deg);
    }

    .three-d-box {
    transition: all .3s ease-out;
    transform: translatez(-25px);
    transform-style: preserve-3d;
    pointer-events: none;
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    }

    /*
    put the "front" and "back" elements into place with CSS transforms,
    specifically translation and translatez
    */
    .front {
    transform: rotatex(0deg) translatez(25px);
    }

    .back {
    transform: rotatex(-90deg) translatez(25px);
    color: #ffe7c4;
    }

    .front, .back {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: black;
    padding: 15px 10px;
    color: white;
    pointer-events: none;
    box-sizing: border-box;
    }


    Для некоторых CSS-параметров понадобятся браузерные префиксы.

    Если вы хотите понять, каким образом перемещаются задние и передние элементы (а мы настоятельно вам рекомендуем вам это сделать), выставите одному из них параметр display: none, и наведите на элемент, чтобы понять, что и какую роль играет в анимации.

    Единственный минус данной техники заключается в повторяющемся ярлыке меню. С технической точки зрения его довольно несложно повторить, но может случиться так, что пользователи экранного доступа услышат текст три раза, даже если будет включена опция aria-hidden="true". Визуальный эффект, тем не менее, невероятен сам по себе. Никакого javascript, Flash или Canvas – просто несколько CSS строк. CSS-анимации… даже не знаем, как нам их благодарить.



    Теги:

    Другие новости по теме:


    Информация
    Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.