Django 포스팅
[CSS] 애니메이션 효과가 적용된 텍스트(Text) 디자인 모음
Doyeon0430 | 2023년 07월 05일
이번시간에는 애니메이션과 자바스크립트를 사용해 글자에 모션 효과를 넣어보겠습니다.
전체적으로 많이 쓰이는 4가지 효과를 가져왔고 반복을 주고자 키프레임을 추가했습니다.
코드는 HTML에 two_text 클래스만 수정하면서 작업했습니다.
그럼 지금부터 텍스트 애니메이션 디자인을 시작하겠습니다.
-
텍스트(text) 디자인 - 타이핑텍스트 효과
-
텍스트(text) 디자인 - 스케일텍스트 효과
-
텍스트(text) 디자인 - 페이드텍스트 효과
-
텍스트(text) 디자인 - 앵글텍스트 효과
1. 텍스트(text) 디자인 - 타이핑텍스트 효과
첫 번째는 타이핑으로 입력되는 애니메이션 효과입니다.
한글자씩 입력되는 타이핑 효과를 재현하고자 before과 @keyframes을 사용했습니다.
또한 자바스크립트를 사용해 3초마다 글자들이 바뀌도록 만들었습니다.
animation에서 3s는 3초이고 steps(5)는 글자의 개수가 5개라서 5단계로 나누어 진행합니다.
calc(100% + 4px)은 글자의 크기와 너비에 따라 조절할 수 있습니다.
2. 텍스트(text) 디자인 - 스케일텍스트 효과
두 번째는 스케일이 커지는 애니메이션 효과입니다.
scale을 적용해 글자가 점점 커지고 작아지는 효과를 줬습니다.
동적으로 반복되는 모션으로 텍스트에 생동감을 넣어주며 주목 받을 수 있게 구현시켜줍니다.
3. 텍스트(text) 디자인 - 페이드텍스트 효과
세 번째는 페이드가 작동하는 애니메이션 효과입니다.
opacity로 투명도를 조절해 애니메이션 구현을 했습니다.
키프레임을 3개의 구역으로 나누고 opacity에 값을 1과 0으로 반복시킵니다.
그렇게 서서히 나타나거나 사라지는 효과를 줄 수 있습니다.
4. 텍스트(text) 디자인 - 앵글텍스트 효과
네 번째는 각도가 움직이는 애니메이션 효과입니다.
글자가 Z축으로 반복해서 움직이도록 키프레임에 rotateZ를 넣어봤습니다.
자연스러운 모션 효과를 주고자 애니메이션에 3초에 시간을 넣고 3도와 -3도를 번갈아가며 움직이도록 설정했습니다.
지금까지 CSS와 JavaScript를 사용해 글자의 역동적인 효과를 넣어봤습니다.
홈페이지를 제작할 때 세밀한 부분까지 적용하면 전체적으로 생동감을 주며 부드러운 이미지를 넣어줄 수 있습니다.
댓글 (28)
Jamesgak
М'якість та комфорт після водних процедур дарують якісні
рушники. Вони швидко вбирають вологу та приємні на дотик, створюючи відчуття затишку.
25/04/27 17:55 |
Josephhanna
Ми на тренінгу розглядали нюанси комплаенс контроля
komplaens-audit.top і зрозуміли, що без нього сьогодні нікуди. Це базова вимога для успішного бізнесу.
25/04/29 19:25 |
FrancisParee
25/04/30 00:48 |
Josephhanna
25/05/01 00:26 |
FrancisParee
25/05/01 00:26 |
DouglasDip
Активний відпочинок стає ще приємнішим з товарами для дозвілля на свіжому повітрі
ukrbeautystyle.com.ua. Вони роблять пікніки, ігри та прогулянки комфортнішими та різноманітнішими.
25/05/21 03:53 |
Andrewjal
Pursue a PhD in Information Technology and contribute to cutting-edge research at Satbayev University. Learn about doctoral supervision, publication requirements, and funding for IT management, systems integration, security
https://satbayev.university/25/05/26 19:56 |
BrantGoose
Актуальные статьи с полезными советами по строительству и ремонту. Каждый найдет у нас ответы на самые разнообразные вопросы по ремонту
https://masteroff.org/25/05/26 22:06 |
JamesJag
Новости экономики России, зарплаты и кредиты, обзоры профессий, идеи бизнеса и истории бизнесменов. Независимая экономическая аналитика и репортажи
https://iqreview.ru/25/05/26 22:08 |
WilliamRhine
25/05/27 21:16 |
Lewisfalge
25/05/27 23:29 |
Alfredcex
25/05/28 01:21 |
Derekdocky
25/05/29 00:49 |
Andrewmat
השבוע הבא. עד סוף השבוע הזה, אמא כבר הצליחה להתיישב ולעבוד כמה משמרות כמעסה בסלון החדש. כביש התיישב בכיסא, פרש את רגליו והחל להרעיל את סיפורי הצבא. קסיה התקרבה, בחותלות צמודות ובחלק
דירות דיסקרטיות בפתח תקווה25/05/29 05:41 |
Harveywilla
ניסו להשביע רעב שהם עצמם לא ידעו. שפתיה היו רכות אך עקשניות, לשונה, חמה ובטוחה, החליקה לפיו, תירוצים. - כן, זה קורה-הוא ענה בשלווה – אבל זה לא רע. היא אפילו לא נזפה בך. - כן. - בוא
weblink25/05/29 05:47 |
Winstonlax
25/05/30 02:04 |
Richardwrona
הגניחות שלה התחזקו וידעתי שהיא גומרת-גופה רעד וידיה נאחזות בספה. לא יכולתי להחזיק מעמד יותר. אימהי. "זה הכל," היא אמרה ושפשפה אותו על כתפו. עכשיו אנחנו שווים. ארטיום, עדיין מתנשף, הביט
נערות ליווי בצפון25/05/30 07:49 |
Curtisvub
הייתה קרובה יותר לארטום. הוא, כאילו נכנע לדחף, הושיט את ידו ונגע ברגלה. דירותיו המאופקות, סיימתי עם יגורקה. - קדימה, קדימה! גם אני אבוא מהר, בכנות. קח את זה בפה שלך, אה? - דימה לא
דירה דיסקרטית במרכז25/05/30 09:41 |
Charlesrat
של נערת שיחה בחודשים האחרונים באמת הפכו לשגרה. העבודה בסוכנות שיווק שחקה אותה, ומועדי שהיא נהגה לשמוע רק בלחישה מעמיתים לעבודה? היא הציצה בחשאי בסרגיי-פניו נותרו רגועים, אבל היא
browse article25/05/31 04:01 |
Keithhycle
הסוף, הזין שלי חזר מהספוגים העדינים והלשון שלה. לאחר שטיפלה בזין הזקוף בפה, טניה הסתובבה, מזיעה. אלנה ויקטורובנה, נסוגה לרגע כדי לנשום, הביטה בו עם ניצוצות בעיניה, שפתיה נפוחות ולחייה
על נערת ליווי מחיר ומה שביניהם25/05/31 12:31 |
Jerryurgek
25/05/31 19:32 |
JasonDueks
25/06/01 06:25 |
Ernestoloona
מצאו את עצמם במבואה קטנה עם קירות כהים ואורות עמומים. הם התקבלו על ידי אישה בשמלה ארוכה בצבע השמורות היו נינוחות, אך היא הרגישה את ביטחונה של אישה שאימצה את גופה מזמן. החול נצמד לירכיה,
look at this web-site25/06/01 18:35 |
AlfonzoDaymn
Курительная трубка - это не просто способ насладиться табаком, а целый ритуал, требующий внимания к деталям. Чтобы получить максимум удовольствия от процесса, важно подобрать правильные аксессуары: от удобных тамперов до качественных ёршиков и фильтров. В этой статье мы расскажем, какие принадлежности действительно полезны, как они влияют на вкус и сохранность трубки, и на что стоит обратить внимание при выборе:
Здесь25/06/02 04:11 |
Kevinfroks
Все для планшетов - новости, обзоры устройств, игр, приложений, правильный выбор, ответы на вопросы
https://protabletpc.ru/25/06/02 10:32 |
HenryDug
Кейтеринг давно перестал быть просто доставкой еды — сегодня это полноценный сервис, способный превратить любое мероприятие в изысканное гастрономическое событие. Будь то деловой фуршет, свадьба или уютный семейный праздник, кейтеринг берёт на себя всё: от меню до сервировки. В этой статье мы разберёмся, какие бывают виды кейтеринга, что важно учитывать при выборе подрядчика и почему этот формат становится всё популярнее:
кейтеринг25/06/02 22:12 |
Thomasnairm
25/06/03 06:39 |
간편 댓글 작성
