انیمیشن جالب نمایش عنوان

آموزش وب ، css ، آموزشات فرعی ،
1165 بازدید
انیمیشن جالب نمایش عنوان
انیمیشن آماده با کلاس آماده برای نمایش عنوان مورد نظر شما به شکلی زیبا

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

دموی این کد را در لینک پایین مشاهده کنید:

دموساز - دموی انیمیشن

کد های سی اس اس هم در این لینک قابل مشاهده است:

کد های css

 

توضیحات کد ها

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

اول از همه کد های اچ تی ام ال:

<<<code>>>

<link rel="stylesheet" href="http://up.toolstheme.ir/view/375218/ball%20rotation%20animatino.css" />

<div class="toolstheme-animation-background"></div>

<div class="toolstheme-animation-text">ابزارها قالب تقدیم می کند :D</div>

<div class="toolstheme-animation-ball"></div>

<<</code>>>

در خط اول ، فایل css که لینک آن در بالا موجود است ، بارگذاری می شود.

در خط دوم ، کلاس مربوط به رنگ پس زمینه ی متن که از سمت چپ به راست کشیده می شود ، بر روی یک تگ div اعمال می شود.

در خط سوم ، کلاس مربوط به متن در تگ div اعمال می شود.

در خط چهارم ، کلاس مربوط به توپ را در تگ div اعمال می شود. (اگر می خواید به جای تصویر توپ ، تصویر دیگری را در این قسمت داشته باشید ، می توانید در همین تگ به این شکل عمل کنید:

<<<code>>>

<div class="toolstheme-animation-ball" style="background-image: url('آدرس تصویر');"></div>

<<</code>>>

به جای "آدرس تصویر" هر آدرسی که دوست دارید قرار دهید تا تصویر مورد نظر شما نمایش داده شود.

کد های سی اس اس:

در کلاس toolstheme-animation-ball با استفاده از transform:rotate زاویه ی صفر به شی داده شده است و انیمیشن rotation برای آن در animation قرار داده شده است. در انیمیشن ، شی از سمت چپ به آخرین نقطه در سمت راست صفحه و حتی کمی آن طرف تر حرکت می کند در حالتی که 1080درجه می چرخد. (البته در زمان حرکت)

در کلاس toolstheme-animation-text چیز خاصی وجود ندارد. فقط مقدار opacity برابر صفر است که یعنی متن کاملا محو است. هنگامی که انیمیشن اجرا می شود ، متن از این حالت به opacity:1 می رسد. یعنی از حالت محو در عرض سه ثانیه به حالت کاملا مشخص می رسد.

در کلاس toolstheme-animation-background یک سری ویژگی ها مشخص شده است که شکلی رنگی با عرض 100پیکسل را ایجاد کرده است و فقط هنگامی که صفحه باز می شود با اجرای انیمیشن scroll ، طول آن زیاد می شود و به 100درصد می رسد.

رمز تمام فایل های فشرده
رمز فایل فشرده است.