Мундариҷа
- 01. Ҳуҷҷати HTML-ро оғоз кунед
- 02. Мундариҷаи намоёни HTML
- 03. оғози CSS
- 04. Контейнери аниматсия
- 05. Оғози аниматсия
- 06. Ба назар намоед
- 07. Анҷом додани аниматсия
Love Lost by Jam's Canada3 як шеъри зебои торик ва мобилӣ аст, ки бо дили воқеӣ дар бораи эҳсосоти пойдор дар атрофи ишқи гумшуда аст. Тарҳбандии вебсайт бо истифода аз HTML5 бо китобхонаи GSAP бо аниматсияи он сохта шудааст, ки яке аз хусусиятҳои ба назар намоёни он матни аниматсионии 3D аст, ки дар ҳақиқат шеъри Love Lost -ро зинда мекунад.
- Таъсири интерактивии типографияи 3D
Он ҳамчун ҷаҳаннам таъсирбахш ба назар мерасад ва ба кор бурдани худ барои эҷоди таҷрибаи ҷолиби корбар душвор нест; ин аст он чӣ гуна анҷом дода мешавад.
Мехоҳед сайти ҷолиби худро созед? Воситаи сохтани вебсайтро санҷед ва бо интихоби хидмати дурусти хостинги веб корҳоятонро бомаром идома диҳед.
01. Ҳуҷҷати HTML-ро оғоз кунед
Қадами аввал муайян кардани сохтори ҳуҷҷати HTML мебошад. Ин контейнери HTML-ро дар бар мегирад, ки ҳуҷҷатро оғоз мекунад, ки қисматҳои сар ва баданро дар бар мегирад. Дар ҳоле ки қисмати сар асосан барои бор кардани файли берунии CSS истифода мешавад, қисмати бадан мундариҷаи намоёни саҳифаи дар қадами 2 сохташударо нигоҳ медорад.
! DOCTYPE html> html> head> title> Ҳаракати 3D-и матн / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * STEP 2 ИН ҶО / бадан> / html>
02. Мундариҷаи намоёни HTML
Мазмуни намоёни HTML аз контейнери мақола иборат аст, ки матни намоёнро дар бар мегирад. Қисми муҳими контейнери мақола атрибути 'data-animate' мебошад, ки CSS барои татбиқи эффектҳои визуалӣ истинод хоҳад кард. Матни дохили мақола аз теги h1 сохта шудааст, то мундариҷа унвони асосии саҳифа бошад.
Article data-animate = "move in"> h1> Салом!! h1> / article>
03. оғози CSS
Файли навро бо номи 'styles.css' эҷод кунед. Маҷмӯи якуми дастурҳо контейнер ва бадани HTML-и саҳифаро муқаррар кардааст, ки заминаи сиёҳ доранд, инчунин фосилаи намоёни сарҳад вуҷуд надорад. Сафед инчунин ҳамчун ранги матни пешфарз барои ҳамаи унсурҳои бачагона дар саҳифа ба мерос гузошта шудааст; канорагирӣ аз ранги пешфарзии сиёҳи матн, ки ба назар нонамоён менамояд.
html, бадан {замина: # 000; андова: 0; маржа: 0; ранг: #fff; }
04. Контейнери аниматсия
Контейнери мундариҷа, ки бо атрибутияи 'data-animate' истинод шудааст, сабкҳои мушаххаси татбиқшударо дорад. Андозаи он бо истифодаи воҳидҳои ченкунии vw ва vh, инчунин каме чархзанон ба андозаи пурраи экран мувофиқат мекунад. Аниматсия бо номи 'moveIn' татбиқ карда мешавад, ки тӯли 20 сония давом мекунад ва беохир такрор мешавад.
[data-animate = "ҳаракат дар"] {мавқеъ: нисбӣ; паҳнои: 100vw; баландӣ: 100vh; шаффофӣ: 1; аниматсия: moveIn 20s беохир; мувофиқ кардани матн: марказ; табдил: гардиш (20deg); }
05. Оғози аниматсия
Аниматсияи 'moveIn', ки дар қадами қаблӣ истинод шудааст, таърифи истифодаи @keyframes-ро талаб мекунад. Чорчӯбаи аввал, ки аз 0% аниматсия сар мешавад, андозаи пешфарз, ҷойгиркунии матн ва сояи намоёнро таъин мекунад. Ғайр аз он, ашё бо шаффофии сифр муқаррар карда мешавад, то ки дар аввал ноаён бошад - яъне. берун аз назар намоиш дода мешавад.
@keyframes moveIn {0% {font-size: 1em; чап: 0; шаффофӣ: 0; сояи матн: ҳеҷ; } * * * ҚАДАМИ 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; сояи матн: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Эзоҳ: ба ҳар як лоиҳае, ки шумо шурӯъ мекунед, дорои захираи абр, ки метавонад тоб орад, муҳим аст (дастури мо кӯмак хоҳад кард).
Ин мақола аслан дар шумораи 273 маҷаллаи эҷодии тарроҳии Web Designer нашр шудааст. Нашри 273 -ро аз ин ҷо харед ё дар инҷо ба Web Designer обуна шавед.
