ساخت انیمیشن با z-index

[mashaheeer]

سلام به همه!
راهی هست که با z-index انیمیشن ساخت؟!
یکی از دوستام توی دانشگاه،تمرینی که استاد بهشون داده بود این بوده.یه انیمیشن مثله یه توب که بالا و بایین بره با استفاده از z-index بسازید...

[eAmin]

سلام
خیلی عجیبه! بنظر من باید به عقل اون استاد شک کرد! خاصیت z-index برای این هست که شما اولویت قرار گیری عناصر بر روی یکدیگر رو مشخص کنید. مثلا فرض کنید دوتا عکس دارید و هر دو هم در یک مکانی قرار دارن که عکس اولی، جلوی نمایش عکس دومی رو میگیره. شما با استفاده از خاصیت z-index تعیین میکنید که کدوم یکی اولیت بالاتری برای نمایش داره.

برای مشاهده محتوا ، لطفا وارد شوید یا ثبت نام کنید

در اینجا img1 اولیت بالاتری نسبت به img2 داره.
برای بالا و پایین بردن المنتها/اشیاء از دو خاصیت top و bottom استفاده میشه.

درضمن این رو هم باید در نظر بگیرید که css به تنهایی نمیتونه انیمیشن ایجاد کنه، برای اینکار شما باید از JavaScript کمک بگیرید و یا از ورژن جدید css یعنی CSS3 استفاده کنید.

[mtchabok]

حرف Amin eHelp درسته .
در css نمیشه که برنامه نویسی کرد .
ولی برای اینکه استاد بهتون اینطوری گفته میتونید طبق الگوریتمی که میگم درستش کنید .
به دو تا توپ نیاز داریم که یکی بالا و دیگری پائین باشه . و یه عکس به اندازه کل صفحه که میتونه بک گراند ار ما باشه .
مراحل به این صورت هست :
1 - در ابتدا در دو توپ با دارای z-index کمتری از بک گراند داشته باشند .
2 - حالا z-index توپ پائینی رو بیشتر از بکگراند بدید .
3 - حالا z-index توپ پائیتی رو کمتر از بکگراند و توپ بالایی رو بیشتر از بکگراند بدید .
4 - مجددا عملیات رو از شماره 2 ادامه بدید ( مثل یه حلقه )
5 - پایان

نکات :
- تمامی اینکارها باید توسط جاوا اسکریپت انجام بشه .
- میتونید از تایمر برای تابع عملیات استفاده کنید . تا مثل یه حلقه بدون فشار بر روی سیستم عمل کند .
- سعی کنید که بین هر عمل یه وقفه قرار بدید .
- خیلی ساده تر هم میشه طراحی کرد .
موفق باشید