یک آرم سه بعدی متحرک برای سایت خود ایجاد کنید

محتوا

• شروع شدن
• ایجاد پایه چرخان صفحه
• ایجاد پاها
• بازو و سر
• رنگ ها و بافت ها
• رندر و صادرات
• در حال اتمام آرم
• آرم را متحرک کنید

روش های مختلفی برای ایجاد انیمیشن سه بعدی در وب وجود دارد که بیشتر آنها نیاز به داشتن دانش کافی از JavaScript و WebGL یا استفاده از یک افزونه مانند Flash دارند. با تشکر از تبدیل CSS 3D ، ایجاد 3D فقط با استفاده از HTML و CSS امکان پذیر است ، اما انجام آن آسان نیست. Tridiv ، برنامه آنلاین رایگان من ، با ارائه یک رابط WYSIWYG ساده و بصری که کاربران را قادر می سازد اشیا 3D سه بعدی و بدون نوشتن یک خط کد را ایجاد کنند ، روند کار را ساده می کند.

در این آموزش ، ما می خواهیم یک آرم برای "Tridiv Records" ، یک برچسب ضبط شده خیالی ، فقط با استفاده از HTML و CSS ایجاد و متحرک سازی کنیم. تصویر اصلی این آرم قرار است به صورت سه بعدی و با استفاده از Tridiv ایجاد شود. سپس با استفاده از HTML و CSS منظم ، عناصر تایپی را اضافه خواهیم کرد.

انیمیشن نهایی و کدی را که تولید می کند می توانید در اینجا مشاهده کنید.

شروع شدن

ما می خواهیم با ایجاد صفحه گرامافون به صورت سه بعدی و با استفاده از Tridiv شروع کنیم. به tridiv.com بروید و برنامه را راه اندازی کنید. باید از Chrome ، Safari یا Opera 15 (یا بالاتر) استفاده کنید.

قبل از شروع ، درک رابط Tridiv مهم است. بخش اصلی ویرایشگر از چهار نمای تشکیل شده است: در بالا سمت چپ ، نمای سه بعدی وجود دارد که نمای کاملی از صحنه را ارائه می دهد. سه نمای دیگر آن را از بالا ، پهلو و جلو نشان می دهد. با استفاده از این سه نمای می توانید اشکال سه بعدی را ایجاد ، ویرایش و انتقال دهید.

نوار ابزار افقی به دو قسمت تقسیم می شود: قسمت سمت چپ اطلاعات مربوط به سند شما را نمایش می دهد. قسمت سمت راست شامل ابزاری برای ایجاد و ویرایش اشکال است. حرکت انتخاب و ویرایش کنید دکمه های انتخاب بین حالت های مختلف ویرایش جابجا می شوند.

پنجره Properties (نوار کناری) تنظیمات سند مانند بزرگنمایی و ضربه محکم و ناگهانی در شبکه و خصوصیات شکل انتخاب شده (اندازه ، موقعیت ، چرخش ، رنگ و غیره) را نشان می دهد. واحد مورد استفاده برای ابعاد و موقعیت ، ems است. زاویه چرخش در درجه است.

برای جلوگیری از هرگونه سردرگمی بعداً در آموزش ، قصد داریم از اختصارات زیر استفاده کنیم:

w = عرض h = ارتفاع d = عمق diam = قطر x deg = چرخش در محور x y deg = چرخش در محور y z deg = چرخش در محور z

ایجاد پایه چرخان صفحه

با تنظیم مقدار بزرگنمایی روی 200 شروع کنید. برای کمک به ترسیم اشکال ، تنظیم ضربه محکم و ناگهانی به شبکه را در قسمت فعال کنید تنظیمات سند بخش نوار کناری مقدار ضربه محکم و ناگهانی را بر روی تنظیم کنید 0.125.

پایه صفحه چرخان از یک مکعب ساده تشکیل شده است ، بنابراین روی آن کلیک کنید مکعب اضافه کنید دکمه در نوار ابزار بالا. باید مشاهده کنید که مکعب در هر چهار نمایش در ویرایشگر ظاهر می شود.

تغییر شکل به پایه با استفاده از قسمت نام پنجره خصوصیات (زیر خصوصیات شکل) نام شکل باید یک نام کلاس معتبر CSS باشد زیرا در کدی که توسط ویرایشگر تولید می شود استفاده می شود. بعداً هنگام متحرک سازی آرم از این نام کلاس ها استفاده خواهیم کرد ، بنابراین مطمئن شوید که هر شکل جدیدی را که درست ایجاد کرده اید نامگذاری کرده اید.

پس از نامگذاری مکعب ، اطمینان حاصل کنید که در نمای بالا انتخاب شده باشد (باید با رنگ آبی مشخص شود ، و یک حلقه دایره ای از ابزار در اطراف آن باشد) ، سپس روی ویرایش کنید دکمه در بالای حلقه برای نشان دادن دسته های ویرایش. دسته های کنترل را در کناره های مکعب بکشید تا به عرض و عمق برسد w = 10 و d = 8 در خصوصیات شکل.

روی شکل داخل نمای کناری کلیک کنید. با این کار دسته های ویرایش در این نمای نشان داده می شود و به ما امکان تغییر ارتفاع آن را می دهد. تنظیم ارتفاع تا رسیدن آن h = 2. همچنین می توانید مقادیر را مستقیماً در پنجره خصوصیات تایپ کنید. برای دور زدن گوشه های مکعب ، مقادیر گوشه ها را در صفحه خصوصیات به تغییر دهید 1.75، سپس دکمه را فشار دهید [وارد] کلید برای اعمال تغییرات. شما چیزی شبیه به این خواهید داشت

ایجاد پاها

برای پای چرخان ، ما می خواهیم از سیلندر استفاده کنیم. یک استوانه اضافه کنید ، سپس قطر آن را به تغییر دهید diam = 1.75 و ارتفاع آن به h = 0.5. کلیک کنید روی حرکت دکمه انتخاب در نوار ابزار بالا برای نشان دادن منطقه قابل کشیدن روی شکل. سیلندر را در زیر پایه حرکت دهید ، آن را در یکی از گوشه ها قرار دهید. (ممکن است لازم باشد آن را در نمای بالا ، جانبی و جلو حرکت دهید.)

سیلندر را کپی کنید (دکمه را فشار دهید کپی کنید دکمه حلقه دایره ای ابزار را فشار دهید ، یا دکمه را فشار دهید د کلید) و سیلندر جدید را به گوشه دیگری از پایه منتقل کنید. این کار را تکرار کنید تا هر چهار پا به درستی قرار بگیرند. فراموش نکنید که استوانه ها را نام ببرید (به عنوان مثال ، فوت-چپ-بالا, پا راست بالا, فوت-چپ-پایین, فوت-چپ-بالا) وقتی این کار را انجام دادید ، نتیجه باید به این شکل باشد.

اکنون به ایجاد صفحه ، دیسک ، محور بازو و دکمه خواهیم پرداخت. روند ایجاد اشکال بعدی مشابه روال پا است. در اینجا ابعاد مورد استفاده برای سیلندرهای مختلف آورده شده است:

بشقاب: diam = 7؛ h = 0،5 دیسک: diam = 6.75؛ دکمه h = 0،25: diam = 1.5؛ h = 0،25 بازو محور - پایه: diam = 2.25 ؛ h = 0،25 محور محور: diam = 1.375 ؛ h = 1

برای تصفیه کناره های سیلندرها ، می توانید با استفاده از قسمت کناره ها در صفحه خواص ، تعداد چهره ها را در هر یک افزایش دهید. خیلی طرف اضافه نکنید زیرا این امر می تواند بر عملکرد جهانی ویرایشگر و انیمیشن نهایی تأثیر منفی بگذارد. در این حالت ، من به شما توصیه می کنم بیش از 32 ضلع را برای بشقاب و دیسک استفاده نکنید. شما باید چیزی مشابه این داشته باشید.

بازو و سر

برای بازو و سر چرخان ، ما قصد داریم از مکعب استفاده کنیم. برای بازو ، یک مکعب ایجاد کنید (w = 0.25 ؛ h = 0.25 ؛ d = 4) ، سپس یک چرخش را اعمال کنید -33° در محور y. برای سر ، یک مکعب ایجاد کنید (w = 0.5؛ h = 0.5؛ d = 1) ، سپس یک چرخش را اعمال کنید -33° در محور y. هر دو شکل را با استوانه محور بازو تراز کنید. نتیجه باید به این شکل باشد.

رنگ ها و بافت ها

ما تقریباً با صفحه چرخان تمام شده ایم. مرحله آخر تعیین رنگها و استفاده از بافت روی وینیل (تصویری که نمایانگر سطح ضبط است) است. برای اختصاص رنگ ها ، یک شکل را انتخاب کنید و روی آن کلیک کنید رنگها فیلد در پنجره خواص Tridiv به شما این امکان را می دهد که برای هر شکل یک شکل ، رنگهای منفرد مشخص کنید ، اما در این مثال ، برای تغییر رنگ همه چهره ها باید از قسمت all استفاده کنیم. برای این کار ، فقط یک کد رنگ hex در قسمت وارد کنید ، سپس با فشار دادن تأیید کنید وارد.

در اینجا رنگ های استفاده شده در این مثال آورده شده است:

پایه: # 0099FF پا ، دکمه ، محور ، بازو و سر: دیسک # F2EEE5: # fa7f7a

برای بافت وینیل ، فرآیند مشابه تخصیص رنگ است. سیلندر دیسک را انتخاب کنید ، سپس بر روی کلیک کنید تصاویر فیلد در پنجره خواص URL تصویری را که می خواهید روی وینیل اعمال کنید در قسمت بالا جایگذاری کنید و با فشار دادن آن را تأیید کنید وارد. می توانید از تصویری از خود استفاده کنید یا تصویری را که در این مثال استفاده شده بارگیری کنید.

اکنون باید چیزی شبیه به این داشته باشید.

رندر و صادرات

اکنون که صفحه چرخان تمام شد ، ما می خواهیم قبل از صادرات ، روشی را که در آن ارائه می شود کار کنیم. کلیک کنید بر روی پیش نمایش دکمه در بالای صفحه ویژگی ها. مقدار بزرگنمایی را روی تنظیم کنید 200 برای بزرگتر نشان دادن صفحه چرخان. برای حذف حاشیه های سیاه اشکال ، به قسمت بروید مرز ها بخش صفحه را تنظیم کنید و میزان opacity را بر روی تنظیم کنید 0. نتیجه باید چیزی شبیه به این باشد.

ما می خواهیم میز چرخان از بالا روشن شود. برای انجام این کار ، صحنه را به گونه ای بچرخانید که بالای صفحه گرامافون رو به شما باشد. پایه باید کاملا مستطیلی به نظر برسد. تغییر مقادیر روشن و تاریک در بخش tridiv.com/d/4k6 بخش خواص ، سایه های صحنه را دوباره تولید می کند. مقدار نور را به تغییر دهید 0.

اکنون میز چرخان آماده صادرات است!

در حال اتمام آرم

ما آماده هستیم متن را به آرم اضافه کرده و انیمیشن آرم را ایجاد کنیم. کلیک کنید بر روی ویرایش کنید در دکمه CodePen در پایین سمت چپ پیش نمایش مشاهده کنید تا کد را به CodePen صادر کنید. توجه به این نکته مهم است که کد CSS تولید شده توسط Tridiv از پیشوندهای فروشنده استفاده نمی کند ، بنابراین برای عملکردی بودن کد در هر مرورگری باید از ابزاری مانند prefixr.com یا leaverou.github.io/prefixfree استفاده کنید. با بستن صفحه JavaScript شروع کنید ، زیرا ما از آن استفاده نمی کنیم. در پنجره HTML ، برچسب سبک اعمال شده را حذف کنید صحنه تقسیم

پنجره CSS را گسترش دهید و کد زیر را در انتها اضافه کنید:

.scene {transform: translateY (-140px) rotateX (-55deg)؛ }

اینجا ترجمه Y (-140 پیکسل)) گرامافون 140 پیکسل را به سمت بالا حرکت می دهد و جای متن را در زیر آن می گذارد. سپس rotateX (-55deg) شیب عمودی میز را تنظیم می کند.

برای افزودن متن ، باید a اضافه کنید .عنوان div بعد از باز شدن #tridiv div در صفحه HTML. داخل ، دو تا اضافه کنید دهانه> (.main-title و .sub-title)، جدا شده به واسطه ساعت />:

div id = "tridiv"> div> span> TRIDIV / span> hr /> span> RECORDS / span> / div>

سپس باید از قلم ها و سبک های صحیح استفاده کنید. در پنجره CSS ، قلم Open Sans استفاده شده در آرم را وارد کرده و سبک های اصلی را برای عناصر متن اضافه کنید.

import url (http://fonts.googleapis.com/css؟family=Open+Sans:300) / * مرکز بلوک متن + سبکهای اصلی قلم * / عنوان {موقعیت: مطلق؛ بالا: 50٪؛ سمت چپ: 50٪؛ حاشیه: 0 0 0 -165px؛ عرض: 330 پیکسل؛ قد: 5em؛ font-family: 'Open Sans'، sans-serif؛ وزن قلم: 300؛ اندازه قلم: 24px؛ text-align: مرکز؛ فاصله نامه: 1.5em؛ رنگ: # 0099FF؛ } title hr {border: 1px solid # fa7f7a؛ حاشیه: .75em 0؛ } title span {display: block؛ } .main-title {font-size: 2.15em؛ } .sub-title {text-indent: .25em؛ }

Voilà! آرم شما کامل است باید چیزی شبیه به تصویر زیر باشد. پس از اتمام مدل سه بعدی ، می توانید از قدرت CSS استفاده کنید و با افزودن سبک ها ، انیمیشن ها یا رویدادهای ماوس ، آن را حتی بهتر کنید: فقط با مدل 3D مانند هر عنصر HTML دیگر رفتار کنید.

آرم را متحرک کنید

با استفاده از آرم یک انیمیشن را اینجا ببینید. با افتادن قسمتهای صفحه گردان ، هر یک از آنها با تاخیرهای مختلف از همان انیمیشن keyframe مشترک برخوردار هستند. شکل ها ویژگی اصلی را تنظیم می کنند 50%. برای ایجاد افکت سقوط ، ویژگی برتر را از آن متحرک می کنیم -400 پیکسل به 50%:

keyframes سقوط می کند {0٪ {top: -400px؛ } / * انیمیشن را با قرار دادن شکل در ارتفاع 400px * / 100٪ شروع می کنیم {top: 50٪؛ } / * سپس آن را در موقعیت اصلی خود خاتمه می دهیم * /}

می توانید این انیمیشن را به شرح زیر به تمام اشکال اضافه کنید:

.shape {top: -400px؛ انیمیشن: سقوط 1S سهولت 0 ثانیه به جلو؛ }

ویژگی بالا را روی تنظیم کنید -400 پیکسل و تأخیر اضافه کنید:

.platter {animation-delay: 1.05s؛ } .disc {انیمیشن-تاخیر: 1.35s؛ } .button {انیمیشن-تاخیر: 1.5s؛ } ...

با استفاده از ، افکت نهایی 'bounce' را ایجاد کنید چرخش ایکس صفت:

90٪ {transform: translateY (-5em) rotateX (780deg) rotateY (0deg)؛ } 95٪ {transform: translateY (-4em) rotateX (620deg) rotateY (0deg)؛ } 100٪ {transform: translateY (-4.5em) rotateX (660deg) rotateY (0deg)؛ }

ما این نسخه خاص را از همین طریق ایجاد کردیم ، اما به یاد داشته باشید: هیچ محدودیتی وجود ندارد!

کلمات: جولیان گارنیر

این مقاله در اصل در شماره 248 مجله نت منتشر شده است.