Задаволены
- 01. Дадайце код у тэг цела вашай старонкі
- 02. Стылізацыя дысплея
- 03. Адлюстраванне збояў
- 04. Трымай усё
- 05. Запуск глюка
- 06. Вяртанне да нармальнасці
- Атрымайце білет на Generate New York зараз
Выдатны спосаб прыцягнуць увагу - і ўтрымаць яго - стварыць макет сайта, які дэманструе вашы таленты з самага пачатку (прыстойны канструктар сайтаў можа дапамагчы ў зборцы). Выдатным прыкладам гэтага з'яўляецца сайт украінскага вэб-агенцтва Vintage, які прыцягвае вас да дызайнерскага партфоліо віртуальнай рэальнасці прывабным спалучэннем пульсавалага лагатыпа, пабудаванага з часціц шкла, і цудоўнага збою, які актывуецца пры навядзенні.
- Вэб-анімацыя: код не патрабуецца
Просты зберагалы эфект, які эканомна выкарыстоўваецца, можа надаць вашаму сайту дадатковую візуальную цікавасць, і гэта дзіўна проста рэалізаваць. Вось як гэта зрабіць.
Маеце на ўвазе складаны вэб-сайт? Пераканайцеся, што ваш вэб-хостынг адпавядае гэтай задачы. І захавайце вашыя дызайнерскія файлы ў бяспецы ў воблачным сховішчы.
Загрузіце файлы для гэтага падручніка.
01. Дадайце код у тэг цела вашай старонкі
Стварэнне простага эфекту збояў можа быць зроблена рознымі спосабамі. Тут мы зробім гэта, маючы аніміраваны GIF уверсе тэксту, які будзе ўключацца і выключацца на дысплеі. Па-першае, дадайце гэты код у тэг цела вашай старонкі.
div id = "трымальнік" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> PRODUCT- br> ION / div>
02. Стылізацыя дысплея
Змест будзе выкарыстоўваць пэўны шрыфт з Google Fonts, які называецца Work Sans. Вазьміце спасылку адтуль і змесціце ў галаву; затым дадайце CSS альбо ў тэгі стыляў, альбо ў асобны файл CSS. Старонка зроблена чорнай з белым тэкстам, а трымальнік стылізаваны пад тэкст.
body {фон: # 000; сямейства шрыфтоў: 'Work Sans', sans-serif; колер: #fff; } #holder {font-size: 6em; шырыня: 500px; вышыня: 300px; запас: 0 аўтаматычна; становішча: адноснае; }
03. Адлюстраванне збояў
Эфектам збояў будзе фонавы малюнак, які размяшчаецца непасрэдна ўверсе тэксту. Тут важна, што яго робяць нябачным, памяншаючы непразрыстасць да нуля, каб ён не з'яўляўся, пакуль карыстальнік не ўзаемадзейнічае з тэкстам.
#glitch {пазіцыя: абсалютная; зверху: 0; злева: 0; z-індэкс: 10; шырыня: 100%; вышыня: 100%; фон: url (glitch.gif); непразрыстасць: 0; }
04. Трымай усё
Дадайце тэгі сцэнарыяў у канец раздзела тэксту і стварыце кэшаваную спасылку на "glitch" div у дакуменце. Тады для зменнай з імем 'over' усталёўваецца false. Гэта будзе ўключацца і адключацца, калі карыстальнік перамяшчае тэкст.
var gl = document.getElementById ("глюк"); var над = ілжыва;
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 тут альбо падпішыцеся на Web Designer тут.
