استفاده از css برای ایجاد افکت در هنگام لود شدن سایت

خوشکل بودن و جذاب بودن شکل و شمایل سایت در بازدیدکنندگان خیلی تاثیر میزاره 😀 نمونه چیزی که در انتهای این اموزش یاد میگیرید بسازید رو میتونید از اینجا(کلیک کنید) ببینید, یکی از روش هایی که باعث خوشکل تر شدن سایت میشه متحرک سازی قسمت های مختلف سایت یا ایجاد افکت های مختلف در هنگام لود شدن سایت هست! در این اموزش قصد داریم به شما اموزش بدیم که چجوری قسمت های مختلف سایت خودتون رو با یه افکت یا انیمیشن خاص لود کنید! در این آموزش از کتابخونه ی animate.css برای متحرک سازی استفاده می کنیم. این کتابخونه رو میتونید از انتهای همین آموزش دانلود کنید و یا اینکه اخرین ورژنش رو از سایت اصلیش (اینجا کلیک کنید) دانلود کنید.

کتابخونه ی animate.css یک سری کلاس آماده داره که با استفاده از این کلاس ها میتونیم افکت های خاصی رو روی قسمت های مختلف وب سایت خودمون اعمال کنیم. در اینجا میخوایم نحوه ی استفاده از animate.css رو به شما اموزش بدیم. 🙂 بریم سر اصل مطلب!!! برای استفاده از این کتابخونه کافیه کلاس animated رو به همراه یکی از کلاس های انیمیشن به تگ مورد نظر خودتون اظافه کنید تا در هنگام لود شدن صفحه به صورت متحرک لود بشه!!! کلاس های انیمیشن که در این کتابخونه وجود دارند به صورت لیست زیر هستند :

  1. flash
  2. pulse
  3. bounce
  4. rubberBand
  5. shake
  6. swing
  7. tada
  8. wobble
  9. jello
  10. و خیلی کلاس های دیگه(بیشتر از ۳۰ نوع هستند) که میتونید توی سایت خودش(کلیک کنید) ببینید.

همونطور که گفته شد میتونید یکی از کلاس های انیمیشن رو به همراه کلاس animated به تگ های خودتون اظافه کنید تا متحرک سازی بشن! به عنوان مثال به صورت زیر عمل میکنیم:

در مثال بالا هرکدوم از حروف tarhche.ir رو درون یه تگ h1 قرار دادیم سپس تگ های h1 رو درون تگ div قرار دادیم و به تگ های div کلاس animated به همراه افکت bounceInUp و bounceInLeft رو دادیم! میتونید پیش نمایش رو از اینجا ببینید(کلیک کنید) , خیلی جالب بود؟ 😀 با استفاده از کتابخونه ی animate.css میتونید چیزهای جالب تری بسازید!!!

برای اینکه تشویق بشید و از این کتابخونه استفاده کنید میتونید اینجا رو ببینید(کلیک کنید) این یک مثال خوب برای استفاده از انیمیشن در هنگام لود شدن وب سایت است. نمونه مثال ها به همراه کتابخونه ی animate.css رو میتونید از انتهای همین اموزش دانلود کنید.

امیدوارم که از این اموزش لذت برده باشید. موفق و پیروز باشید.

(برای دانلود نمونه مثال ها + کتابخونه ی Animate.css روی دکمه ی زیر کلیک کنید.)

دانلود نمونه مثال ها به همراه کتابخونه ی Animate.css

به اشتراک بگذارید:Email this to someoneShare on FacebookTweet about this on TwitterShare on Google+Digg thisShare on LinkedInPin on PinterestShare on StumbleUponFlattr the authorShare on RedditBuffer this pageShare on TumblrPrint this pageShare on YummlyShare on VK

می‌خواهید دیدگاهتان را بیان کنید؟