ورود

View Full Version : پیاده سازی چند باکس با انیمیشن


VB.SOS
چهارشنبه 26 بهمن 1390, 13:09 عصر
سلام به دوستان عزیز
من می خوام تو یه قسمت از سایت چند تا باکس کنار هم داشته باشم که وقتی موس رو یکیشون می بری اندازش بزرگتر بشه و بقیه باکس ها جابجا بشن. به نظر شما بهترین راه برای پیاده سازی این کار چیه؟

http://megaimg.com/images/99229596097274334003.jpg

چون می خوام باکس ها با انیمیشن بزرگشن فک نمی کنم استفاده از عکس برای Border باکسها مناسب باشه؟ میشه این باکس ها رو با Css ایجاد کرد؟

ممون از راهنمایی هاتون

این کار یه تقلید ساده از سایت آدیداس (http://www.adidas.com/ae/homepage.asp) هستش
e107365
چهارشنبه 26 بهمن 1390, 15:27 عصر
خیلی زیباست. تا حالا ندیده بودم این ساین آدیداس رو...
اون فلشه ولی با جی کوئری هم میشه.
المان ها رو فلوت بده یه سمتی بعد عرضشون رو هر طور که می خوای بذار. سپس موقع حرکت روی هر باکس عرض باکس رو ززیاد کن ولی باید از بقیه هم کم کنی تا فضا ایجاد بشه.
خیلی جالب بود.
وقت کردم حتما هفته ی آینده روش کار می کنم.
از masonry هم ببین میتونی کمک بگیری.
یا isotop.
VB.SOS
چهارشنبه 26 بهمن 1390, 20:17 عصر
ممنون دوست عزیز
خود شکل باکس ها رو چه طور ایجاد کنم؟ باید ترسیم برداری باشه، این که عکس بذاریم کیفیتش بعد بزرگ کردن خراب میشه و موقعه انیمیشن هم خوب در نمی یاد.
این باکس ها رو با div و css چه طور می تونم ایجاد کنم.

یه سوال دیگه برای هر باکس باید حالت انیمیشن جدا در نظر بگیرم. یعنی اگه موس روی 1 بود این کارا رو بکن، اگه رو 2 بود این کار رو بکن و ....؟ این جوری کد نویسی خیلی زیاد میشه و اگه بخوایم بعدا یه باکس اضافه کنیم به مشکل بر می خوریم.
e107365
پنج شنبه 27 بهمن 1390, 13:10 عصر
خود شکل باکس ها رو باید عرض و راتفاع ثابت به یک به یک اون ها بدی مگر اینکه داخل باکس ها عرض و ارتفاع ثابت داشته باشند و باکس خارجی انازش رو از باکس داخلی بگیره و بعدش برای بزگ شدن هم می تونی باکس اصلی رو overflow:hide بزنی و محتویات داخلی رو عرض و اندازشون رو یا هر دو رو ثابت تعریف کنی و یا اینکه یکیش رو ثابت تعریف کنی دیگری رو نه اینم بسته به حالتی که باکست حرکت خواهد کرد.
بله برای پیاده سازی به تک تک این باکس ها باید حرکت رو تعریف کنی.
تو خود اون فلش هم مطمئن باش اون کار رو کردن. باکس ها هم زیاد نیست و فوقش کدت 100 خط میشه (حتی اینم نمیشه).
یکمی توضیحش سخت بود امیدوارم خوب توضیح داده باشم.
گود لاک.
VB.SOS
پنج شنبه 27 بهمن 1390, 15:26 عصر
قسمتی که ایجاد باکس رو توضیح دادین متوجه نشدم. سوال من اینه که نباید از عکس استفاده کنم. حالا اگه بخوام دو تا div رو تو در تو و با گوشه گرد که بیرونیش سایه داره باید چیکار کنم. ممنون میشم بازم توضیح بدین
yones_safari
پنج شنبه 27 بهمن 1390, 15:52 عصر
بفرما دادا.کپی همون چیزی که گفتی ساختم.
82767


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>d</title>
<style type="text/css">
.content{
width:300px;
height: 150px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: 200px auto;
background-color: #d4d4d4;
border: 1px #868686 solid;
box-shadow: 0px 0px 8px #666666;
-moz-box-shadow: 0px 0px 8px #666666;
-webkit-box-shadow: 0px 0px 8px #666666;
}
.subcontent{
width:288px;
height: 138px;
margin: 5px 5px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
background-color:white;
border: 1px #868686 solid;
}
.downsubcontent{
width: 288px;
height: 30px;
margin-top:107px;
background-color: #dddddd;
border-top: 1px #868686 solid;
}
</style>
</head>

<body>
<div class="content">
<div class="subcontent">
<div class="downsubcontent"></div>
</div>
</div>
</body>
</html>
موفق باشید.http://barnamenevis.org/images/misc/pencil.png
VB.SOS
پنج شنبه 27 بهمن 1390, 19:18 عصر
بعضی وقتا دکمه تشکر کافی نیست:خجالت:!! یه دنیا ممنون!! بیشتر از 2 ساعت روش کار کردم (زیادی مبتدیم اخه، اما چشم انداز و ایده های خوبی دارم) :تشویق:
VB.SOS
جمعه 28 بهمن 1390, 00:48 صبح
بعد کلی عذاب روحی و جسمی کشیدن حاصل قسمت کوچیکی از کار این شد!!

از اونجایی که بنده هنوز خیلی مبتدی هستم از ساده ترین راهی که کشف کردم (یاد گرفتم) استفاده کردم!

ولی این راه چندان معقول به نظر نمیرسه. لطفا نظرتونو بگین. روش بهتر چیه؟