Задаволены
- 01. Тэкставы эфект перакульвання
- 02. Стварыце CSS
- 03. Размясціце слова
- 04. Уверх і зноў
- 05. Навядзенне курсора ўніз
- 06. Аўтамат для людзей
- 07. Дадайце пераменныя заняткі
Пераходныя спасылкі - выдатны спосаб прыцягнуць увагу карыстальніка, асабліва калі яны робяць нешта незвычайнае альбо арыгінальнае. Сярэдняе дзіця мае выдатны эфект, які рэдка сустракаецца ў іншых месцах, які фіксуе кожную літару і падзяляе іх анімацыяй, якая ўзнікае, калі наведвальнік наводзіць на слова. Анімацыя дапамагае перадаць гуллівы характар маркі сэндвічаў.
У гэтым артыкуле мы пакажам вам, як узнавіць эфект на вашым сайце. Для атрымання дадатковага натхнення паглядзіце наш гід па лепшых прыкладах анімацыі CSS (з інструкцыямі па іх праграмаванні). Для чагосьці крыху іншага паспрабуйце найлепшага канструктара сайтаў альбо падбярыце лепшае воблачнае сховішча. І калі вы робіце свой сайт больш складаным, пераканайцеся, што ваш вэб-хостынг дакладна.
01. Тэкставы эфект перакульвання
Адзін з выдатных тэкставых эфектаў на сайце "Сярэдняе дзіця" - гэта эфект перакульвання меню, дзе літары падзяляюцца на тэкст і злёгку паварочваюцца. Пачніце з некалькіх простых тэгаў HTML.
div> div> сняданак / div> / div>
02. Стварыце CSS
Выкарыстоўвайце асобны файл CSS або тэгі стыляў, каб дадаць наступныя правілы CSS і зрабіць так, каб старонка запаўняла поўны памер браўзэра, забяспечваючы, каб цела і абгортка займалі поўную вышыню.
цела {шырыня: 100%; вышыня: 100%; запас: 0; пракладка: 0; } .wrapper {адлюстраванне: сетка; вышыня: 100%; }
03. Размясціце слова
слова клас цэнтруе слова ў сетцы. Любы тэкст, які атрымаў слова клас можа прымяняць гэта. уверх клас будзе прымяняцца да кожнай другой літары, і яны будуць рухацца ўверх.
.word {памер шрыфта: 3em; маржа: auto auto; } .word .up {адлюстраванне: убудаваны блок; пераўтварэнне: translate3d (0px, 0px, 0px) паварот (0deg); пераход: усе 0,5-ці зручнасць; }
04. Уверх і зноў
Цяпер ўніз клас падзяляе вельмі падобныя налады уверх але навядзенне паказвае рух уверх для уверх перакульванне. Уверх таксама трохі паварочваецца, каб палепшыць знешні выгляд.
.word .down {адлюстраванне: убудаваны блок; пераўтварэнне: translate3d (0px, 0px, 0px) паварот (0deg); пераход: усе 0,5-ці зручнасць; } .word: навядзенне .up {пераўтварэнне: translate3d (0px, -8px, 0px) паварот (12deg); колер: # 058b05}
05. Навядзенне курсора ўніз
Калі карыстальнік наводзіць курсор на тэкст, клас уніз перамяшчае тэкст уніз. Пазней у JavaScript тэкст будзе падзелены на асобныя прамежкі, пры гэтым класы будуць дададзены аўтаматычна ў альтэрнатыўныя прамежкі.
.word: hover .down {пераўтварэнне: translate3d (0px, 8px, 0px) паварот (-12deg); колер: # 058b05; }
06. Аўтамат для людзей
Трохі клопатаў, калі трэба размяшчаць кожную літару ў пераменным перыядзе з рознымі класамі, таму мы аўтаматызуем працэс, атрымаўшы JavaScript для запыту селектара і прыняцця кожнай літары. Тут вул зменная захоплівае бягучую літару, калі яна праходзіць праз тэкст.
script> var elements = document.querySelectorAll (’.word’); для (var i = 0, l = elements.length; i l; i ++) {var str = elements [i] .textContent; элементы [i] .innerHTML = ’’;
07. Дадайце пераменныя заняткі
Цяпер іншы цыкл змяшчае кожную літару ў свой уласны элемент span і дадае альбо уверх альбо ўніз клас да пралётаў. Калі вы паглядзіце на гэта ў браўзэры, вы ўбачыце тэкст, падзелены на кожную літару ўверх і ўніз, пры гэтым злёгку круцячыся.
Вы можаце ўбачыць эфект у дзеянні на сайце Middle Child.
для (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement (’span’); элементы [i] .appendChild (spn); spn.textContent = str [j]; няхай pos = (j% 2)? 'уверх-уніз'; spn.classList.add (pos); }} / сцэнар>
Гэты артыкул быў першапачаткова апублікаваны ў часопісе творчага вэб-дызайну Вэб-дызайнер.Купіць выпуск 286 альбо падпісацца.
