majid_kiani

پروژه ساخت اسلایدر با استفاده از CSS3

1 پست در این موضوع قرار دارد

اسلایدر ها بخش مهمی از اکثریت وبسایت های امروزی رو تشکیل میدن که به پویا تر شدن اونها کمک شایانی میکنه. مطمئنا اگر به درستی از قدرت نهان اسلایدر ها استفاده کنید علاوه بر این که وبسایت شما جلوه ای پویا تر میگیره موجب جذب مخاطب بیشتری هم برای وبسایت شما خواهد شد. معمولا اسلایدر ها قدرت گرفته از جی کوئری و یک سری کد های جاوا هستن ، اما تمرکز ما در این مطلب روی ساخت یک اسلایدر کامل قدرت گرفته فقط از CSS3 هست. شاید نتیجه کار مثل بعضی از بهترین و کاملترین اسلایدر هایی که امروز ها میبینیم نباشه ، اما بصورت تمام و کمال کار میکنه


<div id="content">

<div id="content-inner-1">
<div id="content-inner-2">
<div id="content-inner-3">
<div id="content-inner-4">
<div id="content-inner-5">
<div id="content-inner-6">

<div id="content-inner">
<div class="page" id="page1">
<img src="images/test1.jpg" alt="test1" title="test1">
<div class="page-info" id="info1">
<h2>Page 1</h2>
<div class="page-text">Lorem ipsum dolor sit amet.</div>
</div>
</div>
<div class="page" id="page2">
<img src="images/test2.jpg" alt="test2" title="test2">
<div class="page-info" id="info2">
<h2>Page 2</h2>
<div class="page-text">Lorem ipsum dolor sit amet.</div>
</div>
</div>
<div class="page" id="page3">
<img src="images/test3.jpg" alt="test3" title="test3">
<div class="page-info" id="info3">
<h2>Page 3</h2>
<div class="page-text">Lorem ipsum dolor sit amet.</div>
</div>
</div>
<div class="page" id="page4">
<img src="images/test4.jpg" alt="test4" title="test4">
<div class="page-info" id="info4">
<h2>Page 4</h2>
<div class="page-text">Lorem ipsum dolor sit amet.</div>
</div>
</div>
<div class="page" id="page5">
<img src="images/test5.jpg" alt="test5" title="test5">
<div class="page-info" id="info5">
<h2>Page 5</h2>
<div class="page-text">Lorem ipsum dolor sit amet.</div>
</div>
</div>
<div class="page" id="page6">
<img src="images/test6.jpg" alt="test6" title="test6">
<div class="page-info" id="info6">
<h2>Page 6</h2>
<div class="page-text">Lorem ipsum dolor sit amet.</div>
</div>
</div>
</div>

</div>
</div>
</div>
</div>
</div>
</div>

</div>

<ul id="nav">
<li class="button" id="button1"><a href="#content-inner-1"></a></li>
<li class="button" id="button2"><a href="#content-inner-2"></a></li>
<li class="button" id="button3"><a href="#content-inner-3"></a></li>
<li class="button" id="button4"><a href="#content-inner-4"></a></li>
<li class="button" id="button5"><a href="#content-inner-5"></a></li>
<li class="button" id="button6"><a href="#content-inner-6"></a></li>
</ul>

احتمالا از دیدن کُد های بالا هیچ چیز متوجه نشدید ، شاید این پروژه کمی متفاوت تر از پروژه های قبلی باشه که تا حالا کار کردید ، اما خُب در آخر متوجه نکات مهمی خواهید شد.

در کد بالا ما “content-slider” رو داریم که تمامی محتوا رو در خودش جا میده که ما “margin: 0 auto” میکنیمش و دیگه بهش دست نمیزنیم.

بعد ۲ بخش داریم : “content” و “nav”.

بخش Content صفحات ( اسلایدر هامون ) رو در خودش داره ، و بخش nav هم کنترلر ، که اسلایدر ها رو باهاش عوض میکنیم.

حالا در توی content متوجه میشید که content-inner-1 داریم تا content-inner-6. تمام اسلایدر به این ۶ تا Div بستگی داره و باهاش کار میکنه که در بعد توضیح میدم.


#content-slider {
font-family: arial;
width: 640px;
margin: 0 auto;
margin-top: 100px;
}

#content {
overflow: hidden;
width: 640px;
height: 480px;
-webkit-box-shadow: 0px 0px 50px 10px #c9c9c9;
-moz-box-shadow: 0px 0px 50px 10px #c9c9c9;
box-shadow: 0px 0px 50px 10px #c9c9c9;
}

#content-inner {
width:10000px;
height: 480px;
}

.page {
width: 640px;
height: 480px;
float: left;
}

کاری که الان کردیم این بود که اسلایدر رو به میانه صفحه آوردیم و ۱۰۰ پیکسل از بالای صفحه بهش فاصله دادیم.

استایل دیو “content” خیلی مهم هست ، مقدار “overflow” رو روی “hidden” گزاشتیم ، اینکار باعث میشه هر اسلاید/صفحه تنها زمانی باز بشه که انتخاب میشه.

دیو “content-inner” شامل تمام اسلاید ها (صفحات) ما میشه به همین دلیل عرضش رو روی ۱۰,۰۰۰ پیکسل تنظیم کردیم. در اسلایدر های دیگه معمولا جاوا اسکریپت عرض رو تنظیم میکرد ، اما توی این مطلب ما فقط از CSS3 استفاده میکنیم.


.page-info {
height: 90px;
background-color: rgba(99, 99, 99, 0.6);
position: relative;
margin-top: 0px;
bottom: 103px;
color: #dedede;
padding-left: 20px;
padding-top: 10px;
}

.page-info h2 {
font-size: 21px;
margin-bottom: 10px;
margin-top: 0px;
color: #fafafa;
}

.page-text {
font-size: 15px;
}[/color][/font][/color]
[color=#000000]


.button {
float: left;
background: #bababa;
width: 16px;
height: 16px;
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
border-radius: 8px;
margin-left: 5px;
margin-right: 5px;
}

.button:hover {
-webkit-box-shadow: inset 0px 0px 2px 2px #d4d4d4;
-moz-box-shadow: inset 0px 0px 2px 2px #d4d4d4;
box-shadow: inset 0px 0px 2px 2px #d4d4d4;
}

.button:active {
-webkit-box-shadow: inset 0px 0px 2px 2px #7a7a7a;
-moz-box-shadow: inset 0px 0px 2px 2px #7a7a7a;
box-shadow: inset 0px 0px 2px 2px #7a7a7a;
}

.button a {
display: block;
width: 16px;
height: 16px;
}[/color]
[color=#000000]

به کد بالا دقت کنید ، به عنوان مثال اگر ما الان در آدرس “http://www.example.com/index.html#example” باشیم ، قسمت دوم کد یعنی “:target” عمل میکنه. که در این مبحث دیو “example” نمایش داده میشه.

حالا ما از “:target” استفاده میکنیم تا اسلایدر رو به کار بندازیم. وقتی یک کاربر روی یکی از ۶ دکمه اسلایدر کلیک کنه قسمت “content-inner” باز میشه ، درست مثل جاوا اسکریپت.

این هم از کد :


#content-inner-1:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: 0px;
}

#content-inner-2:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -640px;
}

#content-inner-3:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -1280px;
}

#content-inner-4:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -1920px;
}

#content-inner-5:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -2560px;
}

#content-inner-6:target #content-inner {
-webkit-transition: all 400ms ease;
-moz-transition: all 400ms ease;
-o-transition: all 400ms ease;
transition: all 400ms ease;
margin-left: -3200px;
}[/color]
[color=#000000]

0

به اشتراک گذاری این پست


لینک به پست
مهمان
این موضوع برای عدم ارسال قفل گردیده است.

  • مطالب مشابه

    • توسط سعید فرزادی پور
      با عرض سلام
      من به مشکلی خوردم که راه حل اون رو نمیدونم
      در هدر سایت یک نویگیشن بار دارم که منوی اصلی سایتم به صورت دراپ داون در این نویگیشن بار وجود داره ، قال سایت من shaply هستش و استفاده از ویجت ها در body بازه ، من با استفاده از یک ویجت اسلایدر در بالاترین قسمت و زیر هدر سایت که ارتفاع اونم 55 پیکسل هستش اسلایدر بزرگ ایجاد کردم ، و حالا زمانی که میرم روی دراپ داون ها متاسفانه تا قبل از اسکرول کردن به پایین ، زیر منو ها به زیر اسلایدر میرن ، اما بعد از اسکرول کردن به پایین این مشکل حل شده و منو ها و زیر منو ها نمایش داده میشن ، هرچه z-index رو افزایش دادم نتیجه ای نداشت ، چطور میتونم این مشکل رو حل کنم ؟
      و سوال دوم این که در این تم منو ها اول به پایین و بعد به راست باز میشن و من میخوایم سایت رو به صورت فارسی داشته باشم و میخوام اول به پایین و بعد به چپ باز بشن منو ها , چه تغییری میتونم در css ایجاد کنم ؟
    • توسط poruamohammady
      سلام دوستان من یه مدت هست افزونه هایی که نصب می کنم ورد پرس بهم این اخطار هار رو میده کسی میتونه کمک کنه برای مثال تازگی ها افزونهwp-super cacheرو که نصب کردم این اومد قبلا هم چیزای دیگه بود مرسی اگر راهنمایی کنید

    • توسط mehran-b
      با سلام و عرض ادب خدمت تمامی کاربران انجمن وردپرس پارسی
       
      امروز یک کدی براتون قرار میدم که با استفاده از این کد میتونید به تمامی پست های یه دسته خاص از وب سایتتون متای robots با مقدار noindex,follow اضافه کنید.
       
      در صورت نصب بودن افزونه سئو وردپرس
      add_filter('wpseo_robots', 'mehran_specific_category_posts_add_noindex_yoast'); function mehran_specific_category_posts_add_noindex_yoast($content) { if(is_single() && in_category(777)) { return "noindex,follow"; } return $content; } در صورت نصب نبودن افزونه سئو وردپرس
      add_action('wp_head', 'mehran_specific_category_posts_add_noindex'); function mehran_specific_category_posts_add_noindex() { if(is_single() && in_category(777)) { $output = '<meta name="robots" content="noindex,follow" />' . "\n"; } echo $output; }  
      توجه1: کدهای بالا رو باید در فایل functions.php قالب سایتتون و زیر اولین
      <?php قرار بدید.
      توجه2: به جای عدد 777 در کد باید آیدی دسته ای رو قرار بدید که قراره پست هاش noindex,follow بشن.
       
      موفق باشید
    • توسط unid_user
      سلام
      کسی میتونه کمک کنه موردی که در ویدئو مشخص کردم چطور درست میشه؟
      خیلی مهمه و جالب خواهش میکنم راهنمایی کنید. حجم ویدئو حدود 1 مگابایت
       
      هزاران بار سپاس
      C.mp4
    • توسط mbonjakhi
      باسلام
      سوالی از خدمتتون داشتم.
      میشه من یه دامنه .ir خریداری کنم و کد های یک سایت خاص رو کلا کپی کنم و تو دامنه خودم بکار ببرم؟
      یعنی اینکه دیگه نیازی به طراحی سایت نداشته باشه و به راحتی سایتم ساخته بشه؟
      اگه امکانش هست واسم یه مقدار توضیح بدید باید چیکار  کنم.
      ممنون