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

انیمیشن دادن به متن و عکس

 

سلااااااااام ، دوستان !

 

همونطور که قولش رو دادم بودم

اینم از آموزش اینکه چطوری

متن ها و عکس ها تو وبلاگ

اینطوری نشون داده بشن :

 

     

     

 

#صـــــــــــــــــــــبــــــــــــــــــــــر

 برای مشاهده آموزش به ادامه مطلب بروید ... 

 

گام اول : خب دوستان همین اول بهتون بگم ، شما باید این دو خط کد رو توی تگ head کد html وبلاگتون بزارید .

 

<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.6/animate.min.css" />
<link rel="stylesheet" href="https://mosata.ir/cdn/css/AniDel.ms.min.css" />

 

الان شما میتونید یه انیمیشن انتخاب کنید و روی متن یا عکستون اعمال کنید ، اما از کجا ؟

 

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

خط اول اون دو خطی که بهتون گفتم توی تگ head قالبتون بزارید ، شما رو متصل کرد به مجموعه کد های این انیمیشن ها ، پس تنها کاری که باید بکنید ، انتخابه !

 

 

روی عکس بالا کلیک کنید و به صفحه انتخاب انیمیشن برید .

 

گام سوم : خب بزارید اول اینو روشن کنم ، ما سه نوع انیمیشن داریم :

1. انیمشین ورود ^{(برای تکرار کردن مناسب نیست)}

2. انیمیشن حضور ^{(به خوبی میشه تکرارش کرد)}

3. انیمیشن خروج ^{(که اینم برای تکرار مناسب نیست)}

خب حالا با توجه به نیازتون انیمشین مورد نظر رو انتخاب کنید ،

> راهنمای استفاده از سایت و انتخاب انیمیشن :

 

 

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

 

 

حالا اسم کلاس انیمیشن انتخاب شده رو توی class="" درون اون دو تا " بنویسید ، و مطلب رو ذخیره کنید !

 

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

AniDel_100 = 0.1 ثانیه تاخیر در اجرا

AniDel_200 = 0.2 ثانیه تاخیر در اجرا

AniDel_300 = 0.3 ثانیه تاخیر در اجرا

AniDel_400 = 0.4 ثانیه تاخیر در اجرا

.

.

.

AniDel_30000 = 30 ثانیه تاخیر در اجرا

 

تمونه انجام شدش هم اینه مثلا :

<span class="animated tada AniDel_1000"></span>

 

# هر سوالی دارید مطرح کنید !