جلوه نوشتاری سه بعدی متحرک ایجاد کنید

محتوا

• 01. سند HTML را شروع کنید
• 02. محتوای قابل مشاهده HTML
• 03. شروع CSS
• 04. ظرف انیمیشن
• 05. شروع انیمیشن
• 06. تحریک و تحریک در نظر
• 07. نهایی شدن انیمیشن

Love Lost by Canada’s Jam3 یک شعر تعاملی کاملاً تاریک و آماده برای موبایل با قلب واقعی درباره احساسات ماندگار در مورد عشق از دست رفته است. طرح وب سایت با استفاده از HTML5 ساخته شده است و کتابخانه GSAP به انیمیشن خود کمک می کند ، یکی از جالب توجه ترین ویژگی های آن متن سه بعدی متحرک آن است که شعر Love Lost را واقعاً زنده می کند.

• جلوه های تایپوگرافی سه بعدی تعاملی ایجاد کنید

به نظر جهنمی چشمگیر است و برای ایجاد یک تجربه جذاب کاربر ، کار در کار خود کار سختی نیست. در اینجا نحوه انجام آن وجود دارد.

می خواهید سایت جذاب خود را بسازید؟ ابزار سازنده وب سایت را امتحان کنید و با انتخاب سرویس میزبانی وب مناسب ، کارها را به صورت روان ادامه دهید.

01. سند HTML را شروع کنید

اولین قدم ، تعریف ساختار سند HTML است. این شامل ظرف HTML است که سند را آغاز می کند ، که شامل بخش های سر و بدن است. در حالی که بخش head در درجه اول برای بارگذاری پرونده CSS خارجی استفاده می شود ، بخش body محتوای صفحه قابل مشاهده ایجاد شده در مرحله 2 را ذخیره می کند.

! DOCTYPE html> html> head> title> 3D نوشتار حرکت / عنوان> پیوند 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، body {background: # 000؛ بالشتک: 0؛ حاشیه: 0؛ رنگ: #fff؛ }

04. ظرف انیمیشن

محتوای محتوا که با ویژگی 'data-animate' ارجاع شده است سبک های خاصی را اعمال می کند. اندازه آن متناسب با اندازه کامل صفحه نمایش با استفاده از واحدهای اندازه گیری vw و vh تنظیم شده است و همچنین کمی چرخانده شده است. انیمیشنی به نام 'moveIn' اعمال می شود که برای مدت زمان 20 ثانیه ادامه خواهد داشت و بی نهایت تکرار می شود.

[data-animate = "move in"] {موقعیت: نسبی؛ عرض: 100vw؛ ارتفاع: 100vh؛ تیرگی: 1؛ انیمیشن: moveIn 20s بی نهایت ؛ text-align: مرکز؛ تبدیل: چرخش (20deg) ؛ }

05. شروع انیمیشن

انیمیشن «moveIn» که در مرحله قبل به آن اشاره شد ، نیاز به یک تعریف با استفاده ازkeyframes دارد. اولین فریم که از 0٪ انیمیشن شروع می شود ، اندازه قلم ، موقعیت متن و سایه قابل مشاهده را تنظیم می کند. علاوه بر این ، مورد با تیرگی صفر تنظیم می شود تا در ابتدا نامرئی شود - یعنی. خارج از دید نمایش داده می شود

keyframes moveIn {0٪ {font-size: 1em؛ سمت چپ: 0؛ تیرگی: 0؛ text-shadow: هیچ؛ } * * * مرحله 6 اینجا}

06. تحریک و تحریک در نظر

فریم بعدی از طریق انیمیشن با 10٪ قرار می گیرد. این قاب میزان کدورت را کاملاً قابل مشاهده می کند ، در نتیجه متن به تدریج متحرک می شود.علاوه بر این ، چندین سایه با مقادیر آبی و کاهنده رنگ اضافه می شوند تا توهمات عمق 3D را به متن بدهند.

10٪ {تیرگی: 1؛ text-shadow: .2em -.2em 4px #aaa ، .4em -.4em 4px # 777 ، .6em -.6em 4px # 444 ، .8em -.8em 4px # 111؛ } * * * مرحله 7 اینجا

07. نهایی شدن انیمیشن

فریم های نهایی در 80٪ و در انتهای انیمیشن اتفاق می افتد. اینها وظیفه افزایش اندازه قلم و حرکت عنصر به سمت چپ را دارند. تنظیمات جدیدی نیز برای تحریک به سمت سایه متن اعمال می شود ، در حالی که متن را از فریم 80 تا 100 درصد محو می کند.

80٪ {font-size: 8em؛ سمت چپ: -8em؛ تیرگی: 1؛ } 100٪ {font-size: 10em؛ سمت چپ: -10em؛ تیرگی: 0؛ text-shadow: .02em -.02em 4px #aaa، .04em -.04em 4px # 777، .06em -.06em 4px # 444، .08em -.08em 4px # 111؛ } * * *

توجه: هر پروژه ای را که شروع می کنید ، داشتن فضای ذخیره سازی ابری که بتواند از پس آن برآید ضروری است (راهنمای ما به شما کمک می کند).

این مقاله در اصل در شماره 273 مجله خلاقانه طراحی وب Web Designer منتشر شده است. شماره 273 را از اینجا بخرید یا در اینجا در Web Designer مشترک شوید.