Создание полноэкранного меню на CSS3 и jQuery

В этом уроке мы создадим полноэкранное навигационное меню с помощью HTML, CSS3 и пары строк jQuery скриптов. Для этого урока мы будем использовать Google Fonts, в частности шрифт Montserrat. Убедитесь, что вы заранее подключили его.

Стили линий для горизонтального меню на HTML CSS

Линия - удивительный элемент дизайна. Он настолько универсален, что позволяет нам использовать его в качестве приятных анимации. Сегодня мы хотели бы поделиться набором анимированных линий для горизонтальных меню.

Стильный jQuery прелоадер на SVG

Многие пользователи пренебрегают сайтами с медленной загрузкой. Мы расскажем как использовать SVG библиотеку Raphaël для создания красивого прелоадера, который будет удерживать внимание пользователей во время загрузки страниц.

Уведомления с CSS анимацией

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

Эффект морфинга / Морфинг устройств

Сегодня я хочу рассказать вам о слайд-шоу с технологией «Морфинг». Идея заключается в плавном переходе между различными устройствами, которые отображают скриншот адаптивного дизайна сайта или приложения, меняя «класс устройства». Используя одинаковые элементы и псевдо-элементы для всех устройств, мы можем создать интересный эффект морфинга. Мы будем контролировать классы и переключение изображений при помощи JavaScript. Добавим опцию автоматического слайд-шоу, а также опцию вращения некоторых устройств.

Эффект расплывающихся чернил на CSS и jQuery

Недавно я наткнулся на несколько веб-сайтов на которых присутствовали эффекты с чернилами в качестве перехода. Сначала я подумал, что для их работы они используют HTML canvas (для обеспечения прозрачности), но затем я проверил исходный код и выяснил, что они не используют обычное видео.

  • 1
  • 2

Вход

Уважаемый пользователь! Мы обнаружили, что вы используете AdBlock и вынуждены скрыть часть материалов на нашем сайте. Siteacademy существует и развивается за счет доходов от рекламы. Просим внести наш сайт в список исключений или отключить Блокировщик рекламы на нашем сайте.