Содержание
- 01. Добавьте код в основной тег своей страницы.
- 02. Стилизация дисплея
- 03. Отображение глюка
- 04. Держи все
- 05. Запуск глюка
- 06. Назад к нормальности
- Получите билет на Generate New York прямо сейчас
Отличный способ привлечь внимание - и удержать его - это создать макет веб-сайта, который с самого начала демонстрирует ваши таланты (с этим может помочь достойный конструктор веб-сайтов). Сайт украинского веб-агентства Vintage - отличный тому пример, который привлекает вас к его портфолио VR-дизайна с привлекательной комбинацией пульсирующего логотипа, созданного из стеклянных частиц, и симпатичного глюка, который активируется при наведении курсора.
- Веб-анимация: код не требуется
Простой эффект сбоя, используемый экономно, может придать вашему сайту немного дополнительного визуального интереса, и его на удивление легко реализовать. Вот как это сделать.
Вы имеете в виду сложный веб-сайт? Убедитесь, что ваш веб-хостинг соответствует поставленной задаче. И храните свои файлы дизайна в облачном хранилище.
Скачайте файлы для этого учебника.
01. Добавьте код в основной тег своей страницы.
Создать простой эффект сбоя можно разными способами. Здесь мы собираемся сделать это, разместив анимированный GIF поверх текста, который будет включаться и выключаться на дисплее. Сначала добавьте этот код в тег тела вашей страницы.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. Стилизация дисплея
В контенте будет использоваться особый шрифт из Google Fonts под названием Work Sans. Возьмите ссылку оттуда и поместите ее в свой раздел головы; затем добавьте CSS либо в теги стиля, либо в отдельный файл CSS. Страница сделана черной с белым текстом, а держатель стилизован под текст.
тело {фон: # 000; семейство шрифтов: 'Work Sans', без засечек; цвет: #fff; } #holder {размер шрифта: 6em; ширина: 500 пикселей; высота: 300 пикселей; маржа: 0 авто; положение: относительное; }
03. Отображение глюка
Эффект сбоя будет фоновым изображением, которое будет помещено прямо поверх текста. Важной частью здесь является то, что он становится невидимым за счет уменьшения непрозрачности до нуля, чтобы он не отображался, пока пользователь не взаимодействует с текстом.
#glitch {позиция: абсолютная; верх: 0; слева: 0; z-индекс: 10; ширина: 100%; высота: 100%; фон: url (glitch.gif); непрозрачность: 0; }
04. Держи все
Добавьте теги скрипта в конец основного раздела и создайте кешированную ссылку на div 'glitch' в документе. Тогда для переменной с именем ’over’ устанавливается значение false. Это будет включаться и выключаться, когда пользователь перемещается по тексту.
var gl = document.getElementById ("глюк"); var over = false;
05. Запуск глюка
Функция сбоя вызывается, когда мышь перемещается по тексту. Если глюк не запущен, значит видимость глюка включается и через полторы секунды отключается.Вы можете поэкспериментировать с этим и использовать случайное число, чтобы сделать его более непредсказуемым.
функция глюк () {если (over == false) {gl.style.opacity = "1"; setTimeout (функция () {нормальный ();}, 1500); }}
06. Назад к нормальности
Эффект сбоя не должен оставаться включенным, поскольку он будет слишком раздражать пользователя, но как интерактивный элемент он работает хорошо. Здесь код сбрасывает непрозрачность обратно на ноль, чтобы ее не было видно поверх текста.
функция normal () {gl.style.opacity = "0"; }
Получите билет на Generate New York прямо сейчас
Трехдневное мероприятие по веб-дизайну Generate New York возвращается. На мероприятии, которое пройдет с 25 по 27 апреля 2018 года, будут выступать Дэн Молл из SuperFriendly, консультант по веб-анимации Вал Хед, разработчик полного цикла JavaScript Уэс Бос и многие другие. Также вас ждет целый день семинаров и ценных возможностей для общения - не пропустите. Получите свой билет Generate прямо сейчас.
Эта статья была первоначально опубликована в выпуске 270 журнала о креативном веб-дизайне Web Designer. Купить выпуск 270 здесь или же подпишитесь на Web Designer здесь.
