در این آموزش, قصد داریم به شما نحوه ساخت اسلایدر با افکت انیمیشن پارالاکس (Parallax) را نشان بدیم. در آموزش های قبلی, نحوه ساخت انواع اسلایدر های jQuery مثل اسلایدر متن روی عکس, اسلایدشو و غیره .. را دیدم.
در این مثال, اسلایدر Parallax را با چندین خط کد (فقط ۴۰ خط و ۳Kb) پیاده سازی می کنیم. این مثال را با پراستفاده و شناخته ترین توابع کتابخانه jQuery , کدنویسی کردم. بنابراین درک جریان کدها و سفارشی سازی بر اساس نیازهای شما بسیار آسان است.
در این مثال از ساخت اسلایدر Parallax در جی کوئری, یک به یک اسلایدها را با تابع init() موقعیت آن را مشخص کردیم. تصاویر بندانگشتی از تصاویر در زیر اسلایدها لیست شده است.
با کلیک بر روی تصاویر بندانگشتی (thumbnail) , با تغییر پوزیشن اسلایدها , تصویر به کاربر نمایش داده می شود. با تغییر پوزیشن اسلایدها, اسلایدر نیز به عقب ویا جلو حرکت می کند و در یک سرعت مشخص افکت پارالاکس رو بوجود می آورد.
کد HTML ساخت اسلایدر Parallax
کد زیر به شما صفحه HTML برای اسلایدر پارالاکس را نشان می دهد. المان محتوای اسلایدر (container) شامل تصاویر اصلی و بندانگشتی است. تصاویر اسلایدر و پس زمینه براساس رویداد کلیک بر روی تصاویر بندانگشتی به عقب و جلو حرکت می کند.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
<div id="parallax-slider-container" class="parallax-slider-container"> <div class="parallax-bg"></div> <div> <ul class="parallax-slider"> <li id="slide-1" class="slide"><img src="slider/slide-1.jpg" /></li> <li id="slide-2" class="slide"><img src="slider/slide-2.jpg" /></li> <li id="slide-3" class="slide"><img src="slider/slide-3.jpg" /></li> <li id="slide-4" class="slide"><img src="slider/slide-4.jpg" /></li> <li id="slide-5" class="slide"><img src="slider/slide-5.jpg" /></li> <li id="slide-6" class="slide"><img src="slider/slide-6.jpg" /></li> </ul> <ul class="thumb-img-container"> <li id="1" class="thumb-img"><img src="slider/slide-thumb-1.jpg" /></li> <li id="2" class="thumb-img"><img src="slider/slide-thumb-2.jpg" /></li> <li id="3" class="thumb-img"><img src="slider/slide-thumb-3.jpg" /></li> <li id="4" class="thumb-img"><img src="slider/slide-thumb-4.jpg" /></li> <li id="5" class="thumb-img"><img src="slider/slide-thumb-5.jpg" /></li> <li id="6" class="thumb-img"><img src="slider/slide-thumb-6.jpg" /></li> </ul> </div> </div> |
کد jQuery ساخت اسلایدر Parallax
اسکریپت jQuery زیر شامل تابع ساخت اسلایدر Parallax است. در این اسکریپت, یک تابع init() برای موقعیت دهی (position) به همه اسلایدها وجود دارد.
با کلیک بر روی تصاویر بندانگشتی, تابع runSlider() برای ساخت افکت Parallax بوسیله کنترل سرعت و تغییر مکان پس زمینه, اجرا می شود.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<script> $(document).ready(function(){ var sliderIndex; initSlider(); $(".thumb-img").on("click",function(){ sliderIndex = $(this).attr("id"); runParallax(sliderIndex); }); }); function runParallax(sliderIndex) { var windowWidth = $(window).width(); var slideWidth = $(".slide").width(); var slideLeft = (windowWidth/2)-(slideWidth/2); var sliderImageCount = parseInt($(".slide").length); if(sliderIndex>0) { $(".parallax-bg").css("width",sliderImageCount*windowWidth); $( ".parallax-bg" ).animate({ left: "-"+parseInt((sliderIndex-1)*slideWidth) }, 1500 ); for(i=1,j=sliderIndex-1;(i<=sliderIndex&&j>=1);i++,j--) { $("#slide-"+i).animate({left:"-"+parseInt(j*windowWidth)}, 1500); } $("#slide-"+sliderIndex).animate({left:slideLeft}, 1500); for(i=++sliderIndex,counter=1;i<=sliderImageCount;i++,counter++){ $("#slide-"+i).animate({left:parseInt(counter*windowWidth)}, 1500); } } } function initSlider() { var windowWidth = $(window).width(); var slideWidth = $(".slide").width(); var slideLeft = (windowWidth/2)-(slideWidth/2); var sliderImageCount = parseInt($(".slide").length); for(i=1;i<=sliderImageCount;i++) { $("#slide-"+i).css({left:(i*windowWidth)}); } $("#slide-1").css("left",slideLeft+"px"); } </script> |
امیدوارم از آموزش ساخت اسلایدر Parallax با jQuery نهایت استفاده را برده باشید .
برای دانلود سورس کد کامل این آموزش از باکس دانلود استفاده کنید.
هر سوالی داشتید ، از قسمت نظرات ارسال کنید . سریعا ، پاسخگوی سوالات شما هستیم .
موفق و پیروز باشید
