Коллекция креативных эффектов для анимации меню

Креативные эффекты анимации ссылок

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

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

Важно! Обратите внимание на то, что для создания эффектов переходов для псевдоэлементов используется CSS3 и HTML5, поэтому примеры не будут работать во всех браузерах и их лучше смотреть в Chrome или Firefox последних версий.

В большинстве случаев HTML раметка представляет из себя HTML5 навигацию:

<nav class="cl-effect-13">
    <a href="#">Beleaguer</a>
    <a href="#">Lassitude</a>
    <a href="#">Murmurous</a>
    <a href="#">Palimpsest</a>
    <a href="#">Assemblage</a>
</nav>

Но для некоторых специальных эффектов мы будем использовать HTML5 атрибуты данных для повторения текста ссылки в псевдоэлементе:

<nav class="cl-effect-11">
    <a href="#" data-hover="Desultory">Desultory</a>
    <a href="#" data-hover="Sumptuous">Sumptuous</a>
    <a href="#" data-hover="Scintilla">Scintilla</a>
    <a href="#" data-hover="Propinquity">Propinquity</a>
    <a href="#" data-hover="Harbinger">Harbinger</a>
</nav>

Также для тех эффектов в которых используется перспектива в HTML5 разметку будет добавлен span, пример такой разметки представлен ниже:

<nav class="cl-effect-10">
    <a href="#" data-hover="Seraglio"><span>Seraglio</span></a>
    <a href="#" data-hover="Sumptuous"><span>Sumptuous</span></a>
    <a href="#" data-hover="Scintilla"><span>Scintilla</span></a>
    <a href="#" data-hover="Palimpsest"><span>Palimpsest</span></a>
    <a href="#" data-hover="Assemblage"><span>Assemblage</span></a>
</nav>

Все стили необходимые для создание эффекта применяются к классу эффекта, CSS3 код типового эффекта представлен ниже:

/* Effect 15: scale down, reveal */
.cl-effect-15 a {
    color: rgba(0,0,0,0.2);
    font-weight: 700;
    text-shadow: none;
}

.cl-effect-15 a::before {
    color: #fff;
    content: attr(data-hover);
    position: absolute;
    transition: transform 0.3s, opacity 0.3s;
}

.cl-effect-15 a:hover::before,
.cl-effect-15 a:focus::before {
    transform: scale(0.9);
    opacity: 0;
}

Я надеюсь, что эта коллекция даст вам необходимое вдохновение для создания интересных эффектов для меню вашего сайта.

Так же хотел бы обратить ваше внимание на то, что IE10 не поддерживает свойство transform-style: preserve-3d, которое используется в некоторых примерах.

Надеюсь, вам понравились эти эффекты!

Демо | Скачать

Обсуждение закрыто.