Daire şeklinde 3 boyutlu, içine resim konulabilir çerçeveler

Tek safa içinde hemen hemen tam boy  diyebileceğim bir genişliğe sahip  animasyonlu  dönen resim galerisi  istiyorsanız tam size göre. Demo   sayfası ilk  yüklendiğinde  bütün resimler tek çerçeve içinde  duruyor.  Bütün resimlerin yüklenme  işlemi bittikten sonra slayt  olarak  resimleri  inceleyebileceğimiz bir konuma  geçiyor. Sol alt tarafta  bulunan  sağ ve sol  ok işaretlerini kullanarak resimler  arası  geçiş işlemini canlı olarak inceleyebilirsiniz.

Resimler arası geçiş  için tıkladığınız ok tuşlarından sonra bütün resimler biraz geriye çekilerek  bir çember hizasında diziliymiş gibi bir görünüm alıyor ve  ekranda gösterilecek resim orta kısma  geldikten sonra resimler yaklaşıyor.  Üst üste  aralıksız olarak ok tuşlarını tıkladığınızda ortaya biraz eğlenceli görüntü  çıkıyor sanki resimler birbirleri ile yarış edercesine  birbirlerini kovalıyorlar.

Aslında örnek galeri olarak hazırlanmamıştı  daha çok aşama aşama incelenebilen bir  sunum gibiydi. Resim galeri  olarak kullanmak bana daha mantıklı geldiği  için css dosyası içinde ufacık bir  değişiklik yaptım. Resimlerin yanına yazı falan gibi birşeyler eklemek isterseniz css  dosyasında biraz değişiklik yapabilirsiniz.

Örneğin en güzel  tarafı  tarayıcıya  duyarlı olması. Tarayıcı boyutu küçüldükçe çerçeve boyutları ve çemberde  tarayıcıya  duyarlı  olarak boyut  değiştiriyor.  En iyi Cherome tarayıcısı üzerinden inceleyebilirsiniz demoyu. Mozilla tarayıcısında sağ ve sol okişaretleri yerine sadece s s  harfleri  görünüyor safaride biraz sorunlu ve operada dahda kötü bir görüntüsü  var yinede internet  explorerden daha iyi görünüyorlar. Çünkü IE10 üzerinde  hiç bir animasyon görünmüyor.  Sadece  düz resimler boydan boya sıralanıyor.

Kullanım

• Head etiketleri arasına eklemeniz gereken bölümler.

Js dosya adresleri :

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript" src="3D-transition.js"></script>

 Css : 

html {
   overflow-x:hidden;  
}
::-webkit-scrollbar{
  overflow-x:hidden;
}

body {
  background-image:url(https://www.mintik.com/upload/demolar/2013/05/fancy-3D-button/ricepaper.png);
  margin:0;
  padding:0;
  font-size:20px;
  font-family:"Hiragino Kaku Gothic Pro" monospace;
  overflow-x:hidden;
}

a {
  color : #FCC;
}
a:visited {
  color : #FCF;	
}

@font-face {
  font-family:pointers;
  src:url('https://amuse-webtech.com/font/pointer/pointers.ttf') format('truetype'),
      url('https://amuse-webtech.com/font/pointer/pointers.woff') format('woff'),
      url('https://amuse-webtech.com/font/pointer/pointers.svg#pointersregular') format('svg');
  font-weight:normal;
  font-style:normal;
}

h1 {
  font-size:40px;
  border-left:30px solid #F0F0F0;
  border-bottom:1px solid #F0F0F0;
  padding:0 10px 0 10px;
  line-height:50px;
  margin-bottom: 20px;
}

#container {
   width: 100%;
   height: 100%;
   overflow-x:hidden;
}

.slide {
  position:absolute;
  width:600px;
  height:400px;
  background-color:#222;
  color:#FFF;
  border:1px solid #FFF;
  background:#333333; /* Old browsers */

  background:-moz-linear-gradient(top,  #333333 0%, #000000 100%); /* FF3.6+ */
  background:-webkit-linear-gradient(top,  #333333 0%,#000000 100%); /* Chrome10+,Safari5.1+ */
  filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#333333', endColorstr='#000000',GradientType=0 ); /* IE6-9 */
  -box-shadow:2px 2px 3px #000;
  -moz-box-shadow:2px 2px 3px #000;
  -webkit-box-shadow:2px 2px 5px #000;
 }

.slideContents {
}

.slideContents img{
  width: 100%;
  height: 100%;
}

ul {
  padding-left:30px;
}

.footer {
  font-size:16px;
  position:absolute;
  bottom:0;
  height:20px;
  width:570px;
  text-align:right;
}

#controller {
  position:absolute;
  color:#FFF;
  bottom:2px;
  left:2px;
  width:90px;
  height:40px;
  background-color:#000;
  font-size:34px;
  line-height:34px;
  border:1px solid #666;
  border-radius:5px;
  -webkit-border-radius:5px;
  -moz-border-radius:5px;
  z-index:10000;
}
#previous {
  float:left;
  margin-top:2px;
  -webkit-transform:rotate(180deg);
  -moz-transform:rotate(180deg);
  font-family:pointers;
  cursor:pointer;
}
#next {
  margin-top:5px;
  margin-left:60px;
  font-family:pointers;
  cursor:pointer
}

 Html : 

<div id="container">

<div id="slide0" class="slide">
<div class="slideContents">
iceriginizi buraya ekleyin
<div class="footer">1/7</div>
</div>
</div>

<div id="slide1" class="slide">
<div class="slideContents">
iceriginizi buraya ekleyin
<div class="footer">2/7</div>
</div>
</div>

<!-- yon butonlari -->
<div id="controller">
<div id="previous">s</div><div id="next">s</div>
</div>

</div>

Html kod içinde  sadece slayt işlemi için gerekli olan sağ-sol  okları ve iki  tane  resmin ekleneceği bölüm verdim. Daha sonra isteğinize göre  bu sayıyı çoğaltabilirsiniz. En fazla  11 adet resim ekleyebilirsiniz ama bunun içinde  tam birlimit yok. Javascript  dosyası içinde var slideNum = 11;   olan bölümdeki 11 rakamını isteğinizegöre değiştirebilirsiniz.