Съдържание
- 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’, sans-serif; цвят: #fff; } #holder {размер на шрифта: 6em; ширина: 500px; височина: 300px; марж: 0 автоматично; позиция: относителна; }
03. Показване на бъг
Ефектът на бъга ще бъде фоново изображение, което се поставя директно в горната част на текста. Важната част тук е, че тя става невидима чрез намаляване на непрозрачността до нула, така че да не се показва, докато потребителят не взаимодейства с текста.
#glitch {позиция: абсолютна; отгоре: 0; ляво: 0; z-индекс: 10; ширина: 100%; височина: 100%; фон: url (glitch.gif); непрозрачност: 0; }
04. Задръжте всичко
Добавете скриптове в края на раздела на тялото и създайте кеширана препратка към div 'glitch ’в документа. Тогава променлива с име ‘over’ е зададена на false. Това ще се включва и изключва, когато потребителят се премести над текста.
var gl = document.getElementById ("бъг"); var над = false;
05. Стартиране на бъг
Функцията за бъг се извиква, когато мишката се премести над текста. Ако проблемът не работи, видимостта на грешката се включва и се изключва след секунда и половина.Можете да експериментирате с това и да използвате произволно число, за да го направите по-непредсказуемо.
функция glitch () {if (over == false) {gl.style.opacity = "1"; setTimeout (function () {normal ();}, 1500); }}
06. Обратно към нормалността
Ефектът на бъг не трябва да остане включен, тъй като би бил твърде досаден за потребителя, но като интерактивен елемент работи добре. Тук кодът връща непрозрачността обратно на нула, така че да не се вижда в горната част на текста.
функция нормална () {gl.style.opacity = "0"; }
Вземете билета си за Generate New York сега
Тридневно събитие за уеб дизайн Generate New York се завръща. Провеждат се между 25 и 27 април 2018 г., сред високоговорителите са Dan Mall на SuperFriendly, консултант по уеб анимация Val Head, разработчик на пълни стекове за JavaScript Wes Bos и други. Има и цял ден семинари и ценни мрежови възможности - не го пропускайте. Вземете вашия Generate билет сега.
Тази статия първоначално е публикувана в брой 270 на списание за уеб дизайн за уеб дизайн. Купете брой 270 тук или абонирайте се за Web Designer тук.
