Ui Coding

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

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

این نوع اسکرول را در آموزش ویدئویی زیر می بینید.

برای ایجاد اسکرول در این آموزش از jQuery استفاده کرده ایم.

پسورد : uicoding

  دانلود

اسلایدر بخش جدانشدنی هر وب سایت است . در این آموزش ابتدا قالب اسلایدر را با HTML و CSS طراحی می کنیم بعد با جاوااسکریپت به اسلایدر حالت پویا می دهیم.

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

مدت آموزش : 66 دقیقه 

برای مشاهده دموی آموزش روی متن کلیک کن

قیمت : 9500 تومان

پسورد : uicoding

بدون اضافه کاری آموزش ایجاد اسلایدر با استفاده از jQuery را شروع می کنیم.
مرحله اول :
کدهای html را من به صورت زیر ایجاد کردم شما می تونید به سلیقه خودتون هر کدی قرار دهید،مهم چارچوب کار است؛ div اصلی با کلاس slides تمام اسلایدهای ما درون این div قرار دارد. من دراینجا از <ul> استفاده کردم شما می توانید از چند div برای اسلایدهای خود استفاده کنید.

<div class="container">
    <div id="slides">
      <ul class="slides-control">
        <li class="slide">
          <span>0</span>
          <img class="img-slide" src="images/slide-1.jpg" alt="">
        </li>
        <li class="slide">
          <span>1</span>
          <img class="img-slide" src="images/slide-2.jpg" alt="">
        </li>
        <li class="slide">
          <span>2</span>
          <img class="img-slide" src="images/slide-3.jpg" alt="">
        </li>
      </ul>
      <a nolink="#" class="next"><i class="fa fa-angle-left"></i></a>
      <a nolink="#" class="prev"><i class="fa fa-angle-right"></i></a>
    </div>
  </div>

مرحله دوم :
خب نوبت به استایل دهی میرسه. به نظر من نیاز به توضیح نداره و کدها ساده هستند شما می توانید با توجه به ایده خود افکت های زبیا ایجاد کنید. تمرکز اصلی روی کدهای jQuery است.

* {
  box-sizing: border-box;
}
.container {
  margin: 50px 100px;
}
#slides {
  overflow: hidden;
  margin: 0 auto;
  width: 800px;
  height: 600px;
  position: relative;
}
ul {
  list-style: none;
  display: flex;
  padding: 0;
  margin: 0;
  
}

ul li img {
  width: 800px;
  height: 600px;
}
.next,
.prev {
  position: absolute;
  top: 50%;
  font-size: 3rem;
  color: rgb(195,195,195);
  display: inline-block;
  padding: 5px 15px;
  background: rgb(41,41,41);
  opacity: .7;
}
.prev{
  right: 0;
}

مرحله سوم :
خط به خط کدهای jquery  را توضیح می دهم. که مهم ترین بخش آموزش است.
اولین کاری که انجام می دهیم باید تعداد اسلایدها را پیدا کینم و در یک آرایه ای از objectها قرار دهیم. خط دوم به ما آرایه ای از تگ هایی با کلاس slide را به ما می دهد.
یک شمارنده هم لازم داریم برای نمایش اسلایدها، که اینجا slideIndex نام دارد.
وظیفه اصلی حرکت دادن اسلایدها بر عهده تابع slider است.
خط اول تابع display همه divهایی که کلاس slide دارند را برابر none قرار می هد.
خط بعد چک می کند که slideIndex از تعداد اسلایدها بیشتر نباشد که اگر بود برابر صفر قرار بگیرد.در این مثال ما 3 اسلاید داریم. و اینکه چرا طول آرایه را  منهای 1 کردیم به این خاطر است که آرایه ها از صفر شماره گذاری می شوند.
خط بعدی display اسلاید مربوطه را برابر block قرار می دهد.در مرحله اول slideIndex=0 است و اولین اسلاید نماش داده می شود.
و در نهایت یک واحد به slideIndex اضافه می شود.
یک بار تابع را فراخوانی می کنیم تا اجرا شود. 
تابع setInterval مهمترین کار را برای ما انجام می دهد، اگه این تابع نبود اسلایدری هم نبود؛ وظیفه این تابع این است که هر x ثانیه تابع مربوطه که به عنوان آرگومان قبول کرده را دوباره فراخوانی می کند.
یک نکته مهم راجع به setInterval این است که این متد یک عدد برمیگرداند که این عدد را ما برای متوقف کردن این متد لازم داریم.
تا اینجا اسلایدر شروع به کار می کند ولی بدون کنترل، یعنی کلیک عقب و جلو ندارد و نمی توان به صورت دستی اسلایدها را نمایش داد.
مرحله پایانی ایجاد کلیک های next و prev است.
خب event کلیک را برای تگ a با کلاس prev فراخوانی میکنیم، اول از همه e.preventDefault() را فراخوانی میکینم.چرا؟ برای اینکه وقتی روی تگ a کلیک کردیم صفحه refresh نشه. این دستور از حالت پیش فرضی کلیک کردن روی تگ a اتفاق می افتد جلوگیری میکند.
بعد تابع clearInterval را با آرگومان cInterval (شما میتونید هر اسمی انتخاب کنید)فراخوانی می کنیم تا به کار setInterval پایان دهیم، خط بعدی 2 واحد از slideIndex کم می کنیم، چرا؟ به این خاطر که تابع slider در پایان کارش یک واحد به slideIndex اضافه می کند تا بتواند اسلاید بعدی را نمایش دهد ما می خواهیم اسلاید قبلی نمایش داده شود پس اگر یک واحد کم کنیم با کلیک کردن روی prev همان اسلایدی که در حال نماش هست نشان داده می شود و اگر 2 واحد کم کنیم اسلاید قبلی نشان داده می شود و در پایان دوباره setInterval را صدا می زنیم تا دوباره به کار خودش ادامه دهد.
برای next هم به همین صورت است. ولی ساده تر.
امیدوم این آموزش به کارتون بیاد.

$(document).ready(function () {
  var slides = $('.slide');
  var slideIndex = 0;

  function slider () {
    $('.slide').css('display', 'none');

    if (slideIndex > slides.length - 1) { slideIndex = 0; }
    $('.slide').eq(slideIndex).css('display', 'block');
    slideIndex++;
  }

  slider();
  var cInterval = setInterval(slider, 3000);
  
  $('.prev').click(function (e) {
    e.preventDefault();
    clearInterval(cInterval);
    slideIndex-=2;
    if (slideIndex < 0) { slideIndex = slides.length-1; }
    slider();
    cInterval = setInterval(slider, 3000);
  });

  $('.next').click(function(e) {
    e.preventDefault();
    clearInterval(cInterval);
    slider();
    cInterval = setInterval(slider, 3000);
  });
  
});