متحرک سازی یک تصویر با Toggle Effect
در این مقاله یاد خواهید گرفت که چطور می توان یک عنصری مثل یک تصویر را با افکت toggle و با حالت slow ، very slow و fast متحرک سازی و نمایش داد.
متحرک سازی یک عنصر با toggle effect، روشی بصری برای تغییر وضعیت یک عنصر است که اغلب با یک انیمیشن نرم همراه است. این افکت معمولاً با دکمه‌ها و برای نشان دادن بخش‌هایی از محتوا و با حالتهای مختلف استفاده میشود.
در اینجا خلاصه‌ای از نحوه‌ی عملکرد آن بهمراه کدهای html ، css و javascript آن آمده است:
کدهای HTML:
افکت toggle یا هر افکتی معمولاً روی یک و یا چند عنصر از عناصر html مثل img و یا هر عنصر دیگر و معمولا با یک دکمه و غیره اعمال میشود.
کدهای CSS:
از CSS برای استایل‌دهی به عناصر مورد استفاده در html استفاده میشود و ظاهر دلخواه (رنگ، رنگ چس زمینه ، شکل، اندازه و غیره) را به عنصر می‌دهد.
;کدهای جاوا اسکریپت :
از جاوا اسکریپت (اغلب با jQuery) برای مدیریت رویداد کلیک روی افکت مورد نظر استفاده میشود.
وقتی روی عنصر دکمه کلیک میشود، جاوا اسکریپت یک کلاسی را روی عنصر افکت مورد نظر مثل toggle یا کانتینر آن فعال یا غیرفعال میکند.
animate جی‌کوئری برای ایجاد انیمیشن‌های سفارشی استفاده می‌شودو از پارامتر مثلا speed برای مشخص کردن مدت زمان اثر استفاده میکند و می‌تواند مقادیری مثل slow ، very slow ، fast و یا مقادیر عددی مختلف بپذیرد. بپذیرد.
