Мазмун
- 01. HTML документин баштоо
- 02. Көрүнүүчү HTML мазмуну
- 03. CSS демилгеси
- 04. Анимация контейнери
- 05. Анимацияны баштоо
- 06. Көрүү үчүн жандуу
- 07. Анимацияны аяктоо
Канаданын Jam3 тарабынан Lost Lost - бул жоголгон сүйүүнүн айланасындагы туруктуу сезимдер жөнүндө чыныгы жүрөк менен кооз караңгы, мобилдик даяр интерактивдүү ыр. Вебсайттын макети HTML5тин жардамы менен анимацияны GSAP китепканасы менен курулган, анын көзгө урунарлык өзгөчөлүктөрүнүн бири - бул анимациялык 3D тексти, Love Lost поэзиясын жандандыра алат.
- Интерактивдүү 3D типографиялык эффекттерди жасаңыз
Бул тозоктой таасирдүү көрүнөт жана кызыктуу колдонуучунун тажрыйбасын түзүү үчүн өз ишиңизге киргизүү кыйын эмес; бул жерде ал кандайча жасалды.
Өзүңүздүн кызыктуу сайтыңызды түзгүңүз келеби? Вебсайт куруучу куралды колдонуп, туура хостинг кызматын тандап, иштин үзгүлтүксүз болушун камсыз кылыңыз.
01. HTML документин баштоо
Биринчи кадам - HTML документинин түзүмүн аныктоо. Бул документтин башын жана HTML жана баш бөлүктөрүн камтыган контейнерди камтыйт. Негизги бөлүм тышкы CSS файлын жүктөө үчүн колдонулса, негизги бөлүк 2-кадамда түзүлгөн көрүнүп турган барактын мазмунун сактайт.
! DOCTYPE html> html> head> title> 3D Text Movement / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * STEP 2 ЖЕРДЕ / дене> / html>
02. Көрүнүүчү HTML мазмуну
Көрүнүүчү HTML мазмуну, көрүнөө текстти камтыган макала контейнеринен турат. Макалалар контейнеринин маанилүү бөлүгү - визуалдык эффекттерди колдонуу үчүн CSS шилтеме берген 'data-animate' атрибуту. Макаланын ичиндеги текст h1 тегинен жасалган, анын мазмуну барактын негизги аталышы болуп саналат.
article data-animate = "move in"> h1> Саламатсызбы! / h1> / article>
03. CSS демилгеси
'Styles.css' деп аталган жаңы файл түзүңүз. Биринчи нускамада, барактын HTML контейнери жана тулку бою кара фонго, ошондой эле чек аранын көрүнүп тургандай кылып орнотулган. Ак, ошондой эле, барактагы бардык элементтер үчүн мураска тексттин демейки түсү катары коюлган; тексттин демейки кара түсүнөн качуу, көрүнбөгөндөй көрүнөт.
html, тулку {фондук: # 000; толтуруу: 0; margin: 0; color: #fff; }
04. Анимация контейнери
'Data-animate' атрибуту менен шилтеме берилген контейнер контейнеринин белгилүү бир стилдери колдонулат. Анын көлөмү vw жана vh өлчөө бирдиктерин колдонуп, ошондой эле бир аз айландырылып, экрандын толук көлөмүнө дал келет. 20 секундага созулган жана чексиз кайталана турган 'moveIn' анимациясы колдонулат.
[data-animate = "жылыш") {позиция: салыштырмалуу; туурасы: 100vw; бийиктик: 100vh; тунуктук: 1; анимация: moveIn 20s чексиз; текстке тегиздөө: борбор; өзгөртүү: айлануу (20deg); }
05. Анимацияны баштоо
Мурунку кадамда айтылган 'moveIn' анимациясы @keyframes колдонуп, аныктаманы талап кылат. Биринчи кадр анимациянын 0% дан башталат, демейки шрифт өлчөмү, тексттин жайгашуусу жана көрүнөө көлөкө. Андан тышкары, нерсе нөлдүк тунуктук менен орнотулуп, башында көрүнбөйт - б.а. көрүнбөйт.
@keyframes moveIn {0% {font-size: 1em; left: 0; тунуктук: 0; text-shadow: none; } * * * 6-КАДАМ БУЛ ЖЕРДЕ}
06. Көрүү үчүн жандуу
Кийинки кадр анимация аркылуу 10% га жайгаштырылат. Бул алкак тунуктугу толугу менен көрүнүп тургандай кылып орнотот, натыйжада текст акырындык менен көрүнөт.Мындан тышкары, бир нече көлөкөлөр текстке 3D тереңдиктин иллюзиясын берүү үчүн көк жана азайып бараткан түс мааниси менен кошулат.
10% {тунуктук: 1; текст-көлөкө: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * 7-КАДАМ
07. Анимацияны аяктоо
Акыркы кадрлар 80% жана анимациянын аягында болот. Булар шрифттин көлөмүн көбөйтүүгө жана элементти солго жылдырууга жооптуу. Жаңы орнотуулар тексттин көлөкөсүн жандандыруу үчүн колдонулат, ошол эле учурда тексттин көрүнүшү 80% дан 100% га чейин өчүрүлөт.
80% {ариптин көлөмү: 8em; солдо: -8em; тунуктук: 1; } 100% {ариптин көлөмү: 10em; солдо: -10em; тунуктук: 0; text-shadow: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Эскертүү: кандай гана долбоорду баштабай жатсаңыз да, булут сактоочу жайга ээ болушуңуз керек (биздин колдонмо жардам берет).
Бул макала алгач Web Designer чыгармачыл веб-дизайн журналынын 273-санында жарыяланган. 273-чыгарылышын ушул жерден сатып алыңыз же бул жерде Веб Дизайнерге жазылыңыз.
