Зміст
- 01. Додайте код до тегу тіла вашої сторінки
- 02. Стилістика дисплея
- 03. Відображення збоїв
- 04. Тримай усе
- 05. Запуск глюка
- 06. Повернення до нормальності
- Отримайте свій квиток на Generate New York зараз
Чудовий спосіб привернути увагу - і триматися за ним - це створити макет веб-сайту, який демонструє ваші таланти з самого початку (пристойний конструктор веб-сайтів може допомогти у створенні). Чудовим прикладом цього є сайт українського веб-агентства Vintage, який залучає вас до свого дизайнерського портфоліо віртуальної реальності за допомогою привабливої комбінації пульсуючого логотипу, побудованого з частинок скла, і чудового збою, який спрацьовує при наведенні.
- Веб-анімація: код не потрібен
Простий екологічний ефект, який використовується економно, може надати вашому веб-сайту надзвичайно важливий візуальний інтерес, і це напрочуд легко здійснити. Ось як це зробити.
Маєте на увазі складний веб-сайт? Переконайтеся, що ваш веб-хостинг відповідає цій задачі. І захистіть свої файли дизайну в хмарному сховищі.
Завантажте файли для цього підручника.
01. Додайте код до тегу тіла вашої сторінки
Створення простого глюк-ефекту може бути виконано різними способами. Тут ми будемо робити це, маючи анімований GIF поверх тексту, який буде вмикатися та вимикатись на дисплеї. Спочатку додайте цей код до основного тегу вашої сторінки.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. Стилістика дисплея
Вміст використовуватиме певний шрифт із шрифтів Google, який називається Work Sans. Візьміть посилання звідти і розмістіть його у головній частині потім додайте CSS або до тегів стилів, або до окремого файлу CSS. Сторінка зроблена чорною з білим текстом, а власник оформлений під текст.
тіло {background: # 000; сімейство шрифтів: ‘Work Sans’, sans-serif; колір: #fff; } #holder {font-size: 6em; ширина: 500 пікселів; висота: 300px; запас: 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. Запуск глюка
Функція збоїв викликається, коли миша рухається по тексту. Якщо збій не працює, тоді видимість збою вмикається і вимикається через півтори секунди.Ви можете експериментувати з цим і використовувати випадкове число, щоб зробити його більш непередбачуваним.
функція 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 року серед головних спікерів - Ден Молл SuperFriendly, консультант з веб-анімації Валь Хед, повнофункціональний розробник JavaScript Вес Бос та інші. Також є цілий день семінарів та цінні можливості для створення мереж - не пропустіть це. Отримайте свій квиток Generate зараз.
Ця стаття спочатку була опублікована у випуску 270 журналу творчого веб-дизайну Web Designer. Придбайте випуск 270 тут або підпишіться на веб-дизайнер тут.
