آموزش ساخت اسلایدر با Html و Css3
سلام به همه ی دوستان. در این آموزش می خوایم به شما یاد بدیم که چطور یک اسلایدر زیبا فقط با استفاده از Html  و Css3  بسازیم. امیدوارم بتونید این اسلایدر رو برای انجمن،سایت و یا حتی برای کلاس گذاشتن(:دی) بسازید. البته ذکر کنم که این یک مقاله ی ترجمه شده ی آزاد توسط خودم(محمد صبائیان) از Joshua Johnson می باشد و کپی برداری بدون نام بردن مترجم حرام و منع شرعی دارد.

اول ما باید ببینیم می خوایم چی درست کنیم. به این لینک بروید.

خب همونجور که دید ما وقتی روی تصاویر کوچیک بالا موس رو می بریم تصویر بزگ اون پایین ظاهر میشه. یعنی دقیقا این تصویر زیر:
image

خب حالا باید تصاویرمون رو انتخاب کنیم توجه داشته باشید که باید از هر تصویر یه اندازه 200 در 200 پیکسل و یک اندازه 920 در 400 پیکس می خوایم. من سایت http://lorempixel.com/ رو معرفی می کنم که می تونید ازش استفاده کنید برای گرفتن عکس های خوب و در اندازه های دلخواه.
تصاویر داخل این آموزش را از این لینک دانلود کنین.
اول بگم ما می خوایم 4 تگ(a) برای لینک دادن درست کنیم که آدرس اون رو # بزاریم و داخل این تگ عکس بزگ و کوچیک رو با class  های مورد نیاز تعریف  کنیم. یعنی این شکلی:
<a href="#">
    <img class="کلاس عکس های کوچیک" src="آدرس عکس کوچک">
    <img class="کلاس عکس های بزرگ" src="آدرس عکس بزگ">
</a>
پس بیاین شروع کنیم اول یک div درست کنین با هر classکه دوست دارین(اگرم می خواین بهش id بدین) مثلا من گذاشتم slider بعدشم هر 4 تا عکس کوچک و بزرگ رو براشون تعریف کنین. من برای عکس های کوچک class را small و برای عکس های برگ class رو big گذاشتم. اینم بگم ما نیاز دارم که یک عکس اولیه داشته باشیم که اونو نشون بده پس یه عکس هم به اندازه 920 در 400 با class مثلا default می زاریم. اگه درست پیش رفته باشیم تا حالا کل صفحه html ما اینجوری شده.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Css3 Slider| اسلایدر سی اس اس 3</title>
</head>
<body>
<div class="slider">
<a href="#">
<img src="small1.jpg" class="small">
<img src="big1.jpg" class="big">
</a>
<a href="#">
<img src="small2.jpg" class="small">
<img src="big2.jpg" class="big">
</a>
<a href="#">
<img src="small3.jpg" class="small">
<img src="big3.jpg" class="big">
</a>
<a href="#">
<img src="small4.jpg" class="small">
<img src="big4.jpg" class="big">
</a>
<a href="#">
<img src="hover.jpg" class="hover big" width="920" >
</a>
</div>
</body>
</html>

 حالا بیاین شروع کنیم به دادن css های مورد نیاز. اول به کل div یکم حالت میدیم.
.slider {
  position: relative;
  height: 660px;
  width: 960px;
  overflow: hidden;
  margin: 0 auto;
}
اگر کار هرکدوم از کد های بالا رو نمی دونین هزینه اش یه سرچ تو گوگله.

 بیاین یه تگ های a خودمون بگیم که به چپ بچسبن و یکم از هم فاصله داشته باشن پس:
a {
  float: left;
  margin: 20px;
}

خب اینجا به عکس های کوچیک خودمون وقتی روشون می ریم یکم سایه و زیبایی بدیم پس بنویسید:
a:hover .small {
  -webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
  -moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
  box-shadow: 0px 0px 15px rgba(0,0,0,0.5);
}
 
تا اینجا 70 درصد راه رو رفتیم بیاین به عکس های بزرگمون هم حالت های مورد نیازشون رو بدیم تا کاری رو که می خوایم انجام بدن:
.big {
  position: absolute;
  top: 900px;
  left: 20px;
  -webkit-transition: top 1s ease;
  -moz-transition: top 1s ease;
  -o-transition: top 1s ease;
  -ms-transition: top 1s ease;
  transition: top 1s ease;
}

تا حالا همه کارو تقریبا کردیم فقط مونده بگیم وقتی موس رو بردیم رو ی عکس های کوچیک عکس های بزرگ بیان بالا:
a:hover .big {
  top: 260px;
}

تموم شد دیگه فقط به عکس اولیه مون بگیم یکم بره عقب تر که اونا بتونن بیان و یکم مکانشو درست کنیم:
.hover {
  top: 260px;
  left: 20px;
  z-index: -3;
}

بالاخره تموم شد حالا اسلایدر خودتونو ببنید و لذت ببرید و اگه می خواین یه بکگراند هم براش بزارین.
دوستان اگر غلط املایی داشت به بزرگی خودتون ببخشید.
منتظر آموزش های بعدی هم باشید.
مهم: لایک فراموش نشه لطفاBig Grin
نویسنده :

X
دیدگاه های پروفایل [ Profile Comments ]
[align=center] [align=right]نام پلاگین : ProfileComments نویسنده : Aquilez ترجمه شده توسط : [color ...
تعیین نشده
دیدگاه های کاربران 0

برای عضویت در کانال تلگرامی
[همیار مای بی بی]
کلیک کنید
دریافت آخرین اخبار ، کدهای تخفیف و جوایز
برای اطلاع از آخرین اخبار مای بی بی فارسی عضو کانال تلگرامی شوید :