Ambilight ile Bootstrap Slider Kullanımı

Bootstrap üstüne konuşmaya devam ediyoruz. Bugün Bootstrap Slider‘ı (malum adıyla Carousel) Ambilight tasarımıyla örneksiz ve şık hale getireceğiz. Oluşturacağımız yenilikçi tasarım, Bootstrap varolan işlevsel sliderını bir adım daha öteye taşıyacak.

ÖRNEĞİ GÖRÜNTÜLE

Bootstrap Slider

Bootstrap Slider kullanımı oldukça kolay olan, tasarımının bootstrap.css ile, fonksiyonelitesinin de bootstrap.js ile işlediği yapıdır. Eğer bu CSS ve JS dosyalarına haiz değilseniz sizi birinci adıma, Bootstrap’e giriş dersimize alalım.

Tasarımımıza esin veren teknolojiyi özetlemek gerekirse tanıyalım.

Ambilight

Ambilight (ambient lighting), ambiyans yada ortam aydınlatması şeklinde dilimize çevrilebilir. Tv sektöründe kullanılan bu tarif, izlemekte olduğumuz görüntünün, cihazın arkasındaki ışık panelleriyle duvara yansıtılmasına deniyor. Günümüzde, tv sektörünün önde gelen firmaları birer birer Ambilight modellerini piyasaya sürmekte. Örnek video için buraya bakabilirsiniz.

Bootstrap Slider ve Ambilight Nasıl Kullanılır?

Yapacağımız tasarımın örneği yukarıda yerini aladursun, biz kodlarımızı yazmaya başlamış olalım. Evvelinde de belirttiğimiz şeklinde Bootstrap’in kendi CSS ve JS dosyalarını yüklüyoruz, gene Bootstrap’in resmi sitesindeki Carousel kodlarını kullanarak bir slider oluşturuyoruz.

HTML Kodları

HTML kodlarımıza yalnız awSlider classına haiz bir section ekleyelim. Bu da yapının, sitedeki öteki sliderları değiştirmesini engelleyecek filtreyi oluşturacak.

<section class="awSlider">
  <div  class="carousel slide" data-ride="carousel">
    <!-- Indicators -->
    <ol class="carousel-indicators">
      <li data-target=".carousel" data-slide-to="0" class="active"></li>
      <li data-target=".carousel" data-slide-to="1"></li>
    </ol>

    <!-- Wrapper for slides -->
    <div class="carousel-inner" role="listbox">
      <div class="item active">
        <img src="resim1.jpg">
        <div class="carousel-caption">Görsel #1</div>
      </div>
      <div class="item">
        <img src="resim12.jpg">
        <div class="carousel-caption">Görsel #2</div>
      </div>
    </div>

    <!-- Controls -->
    <a class="left carousel-control" href=".carousel" role="button" data-slide="prev">
      <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
      <span class="sr-only">Geri</span>
    </a>
    <a class="right carousel-control" href=".carousel" role="button" data-slide="next">
      <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
      <span class="sr-only">İleri</span>
    </a>
  </div>
</section>

CSS Kodları

Ek olarak belirttiğimiz section‘a özgü kodlarımızı hazırlayalım. İlk olarak carousel’i tablo yapısına çevirip gölge ile saralım.

section.awSlider .carousel
  display:table;
  z-index:2;
  -moz-box-shadow: 0 0 4px #444;
  -webkit-box-shadow: 0 0 4px #444;
  box-shadow: 0 0 15px rgba(1,1,1,.5);

Sonrasında resimlerin seçilip sürüklenmesini de engellemiş olan filtremizi, awSlider’ı tasarlayalım.

section.awSlider
  margin:30px auto;
  padding:30px;
  position:relative;
  display:table;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;

Şimdi awSlider içindeki resimleri yönetelim. Burada hazırlamış olduğumuz absolute img elemanları arkaplandaki bulanık yapıyı oluşturacaklar.

section.awSlider:hover > img
  -ms-transform: scale(1.2);
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
  opacity:1;


section.awSlider img
   pointer-events: none;


section.awSlider > img
  position:absolute;
  top:30px;
  z-index:1;
  transition:all .3s;
  filter: blur(1.8vw);
  -webkit-filter: blur(2vw);
  -moz-filter: blur(2vw); 
  -o-filter: blur(2vw); 
  -ms-filter: blur(2vw);
  -ms-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
  opacity:.5;

jQuery Kodları

Geriye son olarak Slider’ı özgünleştiren, arkaplandaki ambilight görüntüsünü oluşturup devamlı kılan jQuery kodları kaldı. İlk olarak sliderı tanımlayalım. Üstüne gelindiğinde durmasını ve her iki saniyede bir görüntü değişmesini belirliyoruz.

$('section.awSlider .carousel').carousel(
	pause: "hover",
  interval: 2000
);

Şimdi ilk görselin arkaplanındaki ambilight ile başlamış olalım.

var startImage = $('section.awSlider .item.active > img').attr('src');
$('section.awSlider').append('<img src="' + startImage + '">');

Geriye kalan tüm görselleri de okuyup onlara da özgü ambilight effect oluşturalım.

$('section.awSlider .carousel').on('slid.bs.carousel', function () 
 var bscn = $(this).find('.item.active > img').attr('src');
	$('section.awSlider > img').attr('src',bscn);
);

Kapanış

Bu kez fizyolojik bir tasarım teknolojisi verdiği esin ile kendine bir web sliderı üstünde yer buluyor. Bu tip etkileşimler tasarımın tüm dallarını birbirine bağlayan en kuvvetli yapılar olmakla birlikte, trendlerin her alanda, aynı anda yer bulmasına sebepler.

Ambilight teknolojisini bizlere kazandıran mühendisler, bu yenilikçi tasarımlarıyla daha birçok değişik yapıya esin vermeye devam edeceklerdir.

İyi emek harcamalar.