Садржај
- 01. Покрените ХТМЛ документ
- 02. Видљиви ХТМЛ садржај
- 03. ЦСС иницијација
- 04. Контејнер за анимацију
- 05. Иницијација анимације
- 06. Анимирајте у видокругу
- 07. Завршетак анимације
Љубав изгубљена од канадског Јам3 је прелепа мрачна интерактивна песма спремна за мобилне уређаје са правим срцем о трајним осећањима око изгубљене љубави. Изглед веб странице је направљен помоћу ХТМЛ5, а ГСАП библиотека покреће његову анимацију, а једна од његових визуелно најупечатљивијих карактеристика је анимирани 3Д текст који заиста оживљава поезију Лове Лост-а.
- Направите интерактивне 3Д ефекте типографије
Изгледа импресивно, и није тешко укључити у свој рад да бисте створили занимљиво корисничко искуство; ево како се то ради.
Да ли желите да направите сопствени ангажовани сајт? Испробајте алатку за израду веб страница и наставите да тече несметано одабиром праве услуге веб хостинга.
01. Покрените ХТМЛ документ
Први корак је дефинисање структуре ХТМЛ документа. То укључује ХТМЛ контејнер који покреће документ, који садржи главе и тело. Иако се одељак главе примарно користи за учитавање спољне ЦСС датотеке, одељак тела чува видљиви садржај странице створен у кораку 2.
! ДОЦТИПЕ хтмл> хтмл> хеад> титле> 3Д Тект Мовемент / титле> линк рел = "стилесхеет" типе = "тект / цсс" хреф = "стилес.цсс" /> / хеад> боди> * * * КОРАК 2 ОВДЕ / боди> / хтмл>
02. Видљиви ХТМЛ садржај
Видљиви ХТМЛ садржај састоји се од контејнера чланака који садржи видљиви текст. Важан део контејнера чланака је атрибут „дата-анимате“, на који ће се ЦСС позвати да би применио визуелне ефекте. Текст у чланку је направљен од ознаке х1 да би се назначило да је садржај главни наслов странице.
артицле дата-анимате = "усе ин"> х1> Здраво! / х1> / артицле>
03. ЦСС иницијација
Направите нову датотеку под називом „стилес.цсс“. Први сет упутстава поставио је ХТМЛ контејнер и тело странице на црну позадину, као и без видљивог размака између ивица. Бела боја је такође постављена као подразумевана боја текста за наслеђивање свих подређених елемената на страници; избегавајући подразумевану црну боју текста чинећи да се чини да је садржај невидљив.
хтмл, тело {бацкгроунд: # 000; попуњавање: 0; маржа: 0; боја: #ффф; }
04. Контејнер за анимацију
Контејнер садржаја на који се упућује атрибут „дата-анимате“ има примењене одређене стилове. Његова величина је подешена тако да одговара пуној величини екрана помоћу вв и вх мерних јединица, као и да је благо ротирана. Примењује се анимација под називом „мовеИн“ која ће трајати 20 секунди и понављаће се бесконачно.
[дата-анимате = "усе ин"] {позиција: релативна; ширина: 100вв; висина: 100вх; непрозирност: 1; анимација: мовеИн 20с инфините; поравнање текста: центар; трансформисати: ротирати (20дег); }
05. Иницијација анимације
Анимација „мовеИн“ на коју се позива у претходном кораку захтева дефиницију помоћу @кеифрамес. Први кадар који почиње са 0% анимације поставља подразумевану величину фонта, позиционирање текста и видљиву сенку. Поред тога, ставка се поставља са нултом непрозирношћу тако да је у почетку невидљива - тј. приказан ван видокруга.
@кеифрамес мовеИн {0% {фонт-сизе: 1ем; лево: 0; непрозирност: 0; тект-схадов: нема; } * * * КОРАК 6 ОВДЕ}
06. Анимирајте у видокругу
Следећи кадар се поставља на 10% кроз анимацију. Овај оквир поставља непрозирност на потпуно видљиву, што резултира поступним анимирањем текста.Поред тога, додају се више сенки са плавим и опадајућим вредностима боја како би се тексту дале илузије 3Д дубине.
10% {непрозирност: 1; тект-схадов: .2ем -.2ем 4пк #ааа, .4ем -.4ем 4пк # 777, .6ем -.6ем 4пк # 444, .8ем -.8ем 4пк # 111; } * * * КОРАК 7 ОВДЕ
07. Завршетак анимације
Завршни кадрови се јављају на 80% и на самом крају анимације. Они су одговорни за повећање величине слова и померање елемента улево. Такође се примењују нова подешавања за анимирање сенке текста, док се истовремено уклања текст из оквира од 80% до 100%.
80% {фонт-сизе: 8ем; лево: -8ем; непрозирност: 1; } 100% {фонт-сизе: 10ем; лево: -10ем; непрозирност: 0; тект-схадов: .02ем -.02ем 4пк #ааа, .04ем -.04ем 4пк # 777, .06ем -.06ем 4пк # 444, .08ем -.08ем 4пк # 111; } * * *
Напомена: без обзира на пројекат са којим започињете, неопходно је имати складиште у облаку које се може носити (наш водич ће вам помоћи).
Овај чланак је првобитно објављен у броју 273 креативног часописа за веб дизајн Веб Десигнер. Купите издање 273 овде или претплатите се на Веб Десигнер овде.
