Садржај
- 01. Ролловер текстуални ефекат
- 02. Направите ЦСС
- 03. Поставите реч
- 04. Горе и више
- 05. Лебдећи доле
- 06. Аутоматски за људе
- 07. Додајте наизменичне часове
Везе за преношење су одличан начин да привучете пажњу корисника, посебно ако раде нешто необично или оригинално. Средње дете има сјајан ефекат, који се ретко среће негде другде, који бележи свако слово и раздваја их анимацијом, која започиње када посетилац задржи показивач изнад речи. Анимација помаже у преношењу заиграног карактера марке сендвича.
У овом чланку ћемо вам показати како да поново створите ефекат на својој веб локацији. За више инспирације, погледајте наш водич кроз најбоље примере ЦСС анимације (са упутствима како да их кодирате). За нешто мало другачије, испробајте врхунског креатора веб страница или наш избор најбољег складишта у облаку. А ако своју веб локацију правите сложенијом, уверите се да је веб хостинг постављен на месту.
01. Ролловер текстуални ефекат
Један од сјајних текстуалних ефеката на веб локацији Миддле Цхилд је ефекат превртања у менију, где се слова раздвајају на тексту и лагано ротирају. Започните ово са неким једноставним ХТМЛ ознакама.
див> див> Доручак / див> / див>
02. Направите ЦСС
Користите засебну ЦСС датотеку или ознаке стила да бисте додали следећа ЦСС правила и учинили да страница попуњава пуну величину прегледача тако што ћете обезбедити да тело и омот заузимају пуну висину на располагању.
тело {ширина: 100%; висина: 100%; маржа: 0; попуњавање: 0; } .враппер {приказ: мрежа; висина: 100%; }
03. Поставите реч
Тхе реч разред центрира реч у мрежи. Било који текст коме је дато реч класа може ово применити. Тхе горе класа ће се применити на свако друго слово и она ће се кретати нагоре.
.ворд {фонт-сизе: 3ем; маржа: ауто ауто; } .ворд .уп {дисплаи: инлине-блоцк; трансформација: транслате3д (0пк, 0пк, 0пк) ротирај (0дег); прелаз: свих 0,5 с улазак-излазак; }
04. Горе и више
Сада доле класа дели врло слична подешавања као горе али ховер показује кретање нагоре за горе преврнути. Нагоре се такође благо ротира како би се побољшао изглед.
.ворд .довн {приказ: инлине-блоцк; трансформација: транслате3д (0пк, 0пк, 0пк) ротирај (0дег); прелаз: свих 0,5 с улазак-излазак; } .ворд: ховер .уп {трансформ: транслате3д (0пк, -8пк, 0пк) ротирај (12дег); боја: # 058б05}
05. Лебдећи доле
Када корисник пређе курсором преко текста, доња класа помиче текст надоле. Касније у ЈаваСцрипт-у текст ће бити подељен на засебне распоне, а класе ће се аутоматски додати у алтернативне распоне.
.ворд: ховер .довн {трансформ: транслате3д (0пк, 8пк, 0пк) ротирај (-12дег); боја: # 058б05; }
06. Аутоматски за људе
Мало је муке морати свако слово стављати у наизменични распон са различитим класама, па ћемо аутоматизовати поступак добијањем ЈаваСцрипт-а да тражи селектор и узима свако слово. Ево стр променљива хвата тренутно слово док се петља кроз текст.
скрипта> вар елементи = доцумент.куериСелецторАлл (’.ворд’); фор (вар и = 0, л = елементс.ленгтх; и л; и ++) {вар стр = елементс [и] .тектЦонтент; елементи [и] .иннерХТМЛ = ’’;
07. Додајте наизменичне часове
Сада друга петља ставља свако слово у свој елемент распона и додаје или горе или доле разред до распона. Ако ово погледате у прегледачу, видећете текст подељен за свако слово горе-доле, док се лагано ротира.
Ефекат можете видети на делу на веб локацији Миддле Цхилд.
фор (вар ј = 0, лл = стр.ленгтх; ј лл; ј ++) {вар спн = доцумент.цреатеЕлемент (’спан’); елементи [и] .аппендЦхилд (спн); спн.тектЦонтент = стр [ј]; нека је пос = (ј% 2)? 'Горе доле'; спн.цлассЛист.адд (пос); }} / скрипта>
Овај чланак је првобитно објављен у часопису креативног веб дизајна Веб дизајнер.Купи издање 286 или претплатити се.
