Анимируй это! Привлекаем внимание пользователя к мобильному меню

Публикация в группе: Otshelnik-Fm - мои работы (код, плагины, дополнения, статьи и руководства)

Категории группы: Работаем с Wp-Recall

Я уже рассказывал как анимировать всплывающие окна WP-Recall или как акцентировать внимание на контенте модального окна...
И вот я нашел еще одно интересное и простейшее решение.

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

Видео ниже все объясняет:

Практика:

В ваш файл стилей вставьте это:

@keyframes fmanim {
    50% {
        background-color: rgb(255, 62, 0);
        transform: translate3d(10px, 0px, 0px);
    }
    100% {
        transform: none;
    }
}
.hideshow .block_button.bars {
    animation-delay: 0.2s;
    animation-duration: 0.7s;
    animation-fill-mode: forwards;
    animation-name: fmanim;
}

Всё.

Расходимся))

Автор публикации

не в сети 4 недели

Вова (Otshelnik-Fm)

4 473

Живой, бодрый, полон идей!

Комментарии: 2251Публикации: 242Регистрация: 27-01-2013Продаж/Покупок: 0/0