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

          حمیدرضا 
            بازدید : 1996
          شنبه 13 تیر 1394
           نظرات (0)
        

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

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

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

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

کد های 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درصد می رسد.

ارسال نظر برای این مطلب

عنوان	پاسخ	بازدید	توسط
پنهان کردن عناصر صفحه در php	4	2380	snakeeye
طراحی باکس دانلود	6	2530	mary567
ارزیابی رایگان سایت ها و وبلاگ ها	25	8756	grimboy
انواع قالب اختصاصی	3	2147	ghraphic-home
بهترین افزونه های AMP وردپرس	2	2579	jack7788
کد پاپ اپ دو یا چند پنجره به طور همزمان پشت صفحه	23	9188	jack7788