آموزش کد نویسی اسلاید شو سه بعدی با CSS - طراح سایت

در این مطلب قصد دارم به شما روش کد نویسی یک اسلاید شو سه بعدی زیبا را آموزش بدهم. نوشتن این اسلایدشو با css و jquery کار زیاد سختی نیست.فقط کافیه مرحله به مرحله کارهایی که مینویسم را انجام بدین

در انتهای این مطلب لینک دانلود تمامی کد ها به همراه لینک نمایش دموی این اسلاید شو قرار داده شده است.

ابتدا کدهای jquery زیر را درون قسمت <head> قالبتون کپی کنید و فراموش نکنید که حتما باید کتابخانه های jquery را نیز در این قسمت فراخوانی کرده باشید.

اگر روش فراخوانی کتابخانه های jquery را بلد نیستید میتونین از این آموزش استفاده کنید.

 

<script>
$(document).ready(function() {
 $("#css3dimagePager li").click(function(){
 var rotateY = ($(this).index() * -90); 
 $("#css3dimageslider ul").css({"-webkit-transform":"rotateY("+rotateY+"deg)", "-moz-transform":"rotateY("+rotateY+"deg)", "-ms-transform":"rotateY("+rotateY+"deg)", "transform":"rotateY("+rotateY+"deg)"});
 $("#css3dimagePager li").removeClass("active");
 $(this).addClass("active");
 });
 $("#css3dtransparency").click(function() {
 $("#css3dimageslider").toggleClass("transparency");
 $(this).toggleClass("active");
 });
 });
</script>

 

سپس کد Html زیر را در جایی از قالبتون که میخواهید این اسلاید شو اضافه بشه قرار بدین

 

<div id="css3dimageslider" class="transparency">
 <ul>
 <li> <img src="img/demo/css3dimg1.jpg"> </li>
 <li> <img src="img/demo/css3dimg2.jpg"> </li>
 <li> <img src="img/demo/css3dimg3.jpg"> </li>
 <li> <img src="img/demo/css3dimg4.jpg"> </li>
 </ul>
</div>
<ul id="css3dimagePager">
 <li class="active">Image 1</li>
 <li>Image 2</li>
 <li>Image 3</li>
 <li>Image 4</li>
</ul>
<p id="css3dtransparency" class="active">Click me to toggle transparency</p>

 

در این مرحله کد های CSS زیر را کپی کنید و در کنار بقیه کدهای CSS قالبتون قرار دهید.

 

#css3dimagePager, #css3dtransparency {
 text-align: center;
 position: relative;
 z-index: 11;
 padding: 0 0 10px;
 margin: 0;
}
#css3dimagePager li {
 padding-right: 2em;
 display: inline-block;
 cursor: pointer;
}
#css3dimagePager li.active, #css3dtransparency.active {
 font-weight: bold;
}
#css3dimageslider {
 -webkit-perspective: 1000;
 -moz-perspective: 1000px;
 -ms-perspective: 1000;
 perspective: 1000;
 -webkit-perspective-origin: 50% 100px;
 -moz-perspective-origin: 50% 100px;
 -ms-perspective-origin: 50% 100px;
 perspective-origin: 50% 100px;
 margin: 40px auto 20px auto;
 width: 100%;
 height: 350px;
}
#css3dimageslider ul {
 position: relative;
 margin: 0 auto;
 height: 281px;
 width: 450px;
 -webkit-transform-style: preserve-3d;
 -moz-transform-style: preserve-3d;
 -ms-transform-style: preserve-3d;
 transform-style: preserve-3d;
 -webkit-transform-origin: 50% 100px 0;
 -moz-transform-origin: 50% 100px 0;
 -ms-transform-origin: 50% 100px 0;
 transform-origin: 50% 100px 0;
 -webkit-transition: all 1.0s ease-in-out;
 -moz-transition: all 1.0s ease-in-out;
 -ms-transition: all 1.0s ease-in-out;
 transition: all 1.0s ease-in-out;
}
#css3dimageslider ul li {
 position: absolute;
 height: 281px;
 width: 450px;
 padding: 0px;
}
#css3dimageslider ul li:nth-child(1) {
 -webkit-transform: translateZ(225px);
 -moz-transform: translateZ(225px);
 -ms-transform: translateZ(225px);
 transform: translateZ(225px);
}
#css3dimageslider ul li:nth-child(2) {
 -webkit-transform: rotateY(90deg) translateZ(225px);
 -moz-transform: rotateY(90deg) translateZ(225px);
 -ms-transform: rotateY(90deg) translateZ(225px);
 transform: rotateY(90deg) translateZ(225px);
}
#css3dimageslider ul li:nth-child(3) {
 -webkit-transform: rotateY(180deg) translateZ(225px);
 -moz-transform: rotateY(180deg) translateZ(225px);
 -ms-transform: rotateY(180deg) translateZ(225px);
 transform: rotateY(180deg) translateZ(225px);
}
#css3dimageslider ul li:nth-child(4) {
 -webkit-transform: rotateY(-90deg) translateZ(225px);
 -moz-transform: rotateY(-90deg) translateZ(225px);
 -ms-transform: rotateY(-90deg) translateZ(225px);
 transform: rotateY(-90deg) translateZ(225px);
}
#css3dimageslider.transparency img {
 opacity: 0.7;
}

خوب تبریک میگم به همین راحتی یک اسلاید شو سه بعدی زیبا درست کردین.

برای تغییر عکس ها و گذاشتن عکس های دلخواهتون درون این اسلاید شو به قسمتی که کدهای Html را درون قالبتون کپی کردین برین و مقدار مشخصه src را تغییر داده و آدرس عکس مورد نظرتون را به جاش قرار بدین. مثلا برای تغییر عکس اول باید این عبارت

img/demo/css3dimg1.jpg

را پاک کنین و آدرس عکستون را جایگزینش کنین.

برای تغییر اسم عکس اول هم چند خط پایین تر در جایی که کد زیر قرار داره به جای عبارت Image 1 اسم دلخواهتون را قرار بدین

<li class="active">Image 1</li>

می توانید دموی این پلاگین را در اینجا مشاهده نمایید و بعد از ورود به سایت هم کدها را از لینک زیر دانلود کنید.

موفق و پیروز باشید

 

برای دانلود فایل واردشوید
ورود ثبت نام
برچسب ها :

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.

Time limit is exhausted. Please reload CAPTCHA.