6 Aralık 2013 Cuma

Reflection.js Kütüphanesi

      Herkese merhabalar.

  Bir hafta aradan sonra sizlerle tekrardan beraberiz. Bu hafta sizlere oldukça küçük ve kullanımı basit olan reflection.js isimli JavaScript kütüphanesinden bahsetmek istiyorum. Uygulaması oldukça kolay olan bu kütüphane sayesinde web sayfanızda seçtiğiniz resimlerinize kütüphanenin isminden de anlaşıldığı üzere, yansıma ekleyebilirsiniz. Yansımaların boyutunu ve saydamlığını tercihinize göre değiştirebilmeniz mümkün. Diyelim ki; yansımanızın tüm resmin yarısı kadar olmasını ve yarı saydam bir şekilde olmasını istiyorsunuz, elbette ki reflection.js sayesinde bu mümkün. Yansıma ekleyebilmeniz için seçtiğiniz resmin "image" elementi olması gerekir. Default olarak, yansıma arka plan rengindedir. İsterseniz rengini de değiştirebilirsiniz. Şimdi ise bu kütüphanenin nasıl kullanıldığına bir bakalım.
KURULUMU
     Kütüphaneyi bu siteden indirebilirsiniz ama tercih elbette ki  de size ait. İndirme işlemi bittikten sonra kodumuza kütüphanemizi aşağıdaki gibi ekliyoruz.

<script type="text/javascript" src="reflection.js"></script>

KULLANIMI
   Resminize yansıma ekleyebilmeniz için "image" elementinize  class="reflect" şeklinde ekleme yapmalısınız.

YANSIMALARIN UYARLANMASI

 1. Yansıma Yüksekliğinin Değiştirilmesi

  CSS sınıfı listesine yüzde şeklinde olmak üzere, istediğiniz oranda yükseklik ayarlamasını rheight' in  yanına yazarak yapabilirsiniz. 

Örneğin  class="reflect rheight66"  şeklinde kullanabilirsiniz.

2.  Yansıma  Opaklığının Değiştirilmesi

    CSS sınıfı listesine yüzde şeklinde olmak üzere, istediğiniz oranda opaklık ayarlamasını ropacity' nin yanına yazarak yapabilirsiniz.

Örneğin resminize %50 opaklık eklemek istiyorsanız;

 class="reflect ropacity50"  şeklinde kullanabilirsiniz.

3.  Yansıma Yüksekliğinin ve Opaklığının  Aynı Kod İçerisinde Değiştirilmesi

      Ayrı ayrı yazmak yerine aşağıdaki gibi yansımanın yüksekliğini ve opaklığını birlikte değiştirebilirsiniz.

   class="reflect rheight66 ropacity40"

 YANSIMA İÇİN KOMUTLAR
  • Reflection.remove(image): Resimden yansımayı kaldıran fonksiyondur.
  • Reflection.add(image, options): Resime yansıma ekler. Yansıma eklerken aşağıdaki gibi seçeneklerinizi belirtebilirsiniz.
  • Reflection.add(document.getElementId("img"),{ height: 2/4, opacity: 1/3}): Resime yansıma bu şekilde seçeneklerinizi belirtebilirsiniz. Bu seçeneklerin 0 ile 1 arasında olmasına dikkat ediniz.
  • Reflection.defaultHeight = height: Şeklinde default(varsayılan) yansıma yüksekliğini belirleyebiliriz.
  • Reflection.defaultOpacity= opacity: Şeklinde default(varsayılan) yansıma opaklığını belirleyebiliriz.
Şimdi ise ASP.NET ortamında sizler için yapmış olduğum örnekleri inceleyelim. Öncelikle Solution Explorer'a önceden indirmiş olduğumuz kütüphanemizi ekleyelim.


YANSIMA ARKA PLANININ RENKLENDİRİLMESİ

Proje Kodları:

 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
 <!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head runat="server">  
   <script type="text/javascript" src="reflection.js"></script>  
   <title>Reflection.js Örnek Kullanımı</title>  
   <style type="text/css">  
     body {  
       background-color: #E6E6E6;  
       font-family: Georgia;  
       line-height: 1.5;  
     }  
     h2 {  
       line-height: 1;  
       font-family: Arial, Helvetica, sans-serif;  
     }  
     img {  
       border: 0;  
     }  
   </style>  
 </head>  
 <body>  
   <h2>YANSIMA ARKA PLANININ RENKLENDİRİLMESİ</h2>  
   <div style="float: left; background-color: purple; padding: 10px;">  
     <img src="example.jpg" class="reflect" alt="" /></div>  
   <div style="float: left; background-color: orange; padding: 10px;">  
     <img src="example.jpg" class="reflect" alt="" /></div>  
   <div style="float: left; background-color: blue; padding: 10px;">  
     <img src="example.jpg" class="reflect" alt="" /></div>  
   <div style="float: left; background-color: pink; padding: 10px;">  
     <img src="example.jpg" class="reflect" alt="" /></div>  
 </body>  
 </html>

Ekran Görüntüsü:


YANSIMA YÜKSEKLİKLERİNİN DEĞİŞTİRİLMESİ

 Proje Kodları:
 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
 <!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head runat="server">  
   <script type="text/javascript" src="reflection.js"></script>  
   <title>Reflection.js ÖRNEK</title>  
   <style type="text/css">  
     body {  
       background-color: #E6E6E6;  
       font-family: Georgia;  
       line-height: 1.5;  
     }  
    
     h2 {  
       line-height: 1;  
       font-family: Arial, Helvetica, sans-serif;  
     }  
     img {  
       border: 0;  
     }  
   </style>  
 </head>  
 <body>  
   <h2>YANSIMA YÜKSEKLİKLERİNİN DEĞİŞTİRİLMESİ</h2>  
   <div style="float: left; padding: 15px;">  
     <img src="example.jpg" class="reflect rheight20" alt="" />  
   </div>  
   <div style="float: left; padding: 15px;">  
     <img src="example.jpg" class="reflect rheight50" alt="" />  
   </div>  
   <div style="float: left; padding: 15px;">  
     <img src="example.jpg" class="reflect rheight70" alt="" />  
   </div>  
   <div style="float: left; padding: 15px;">  
     <img src="example.jpg" class="reflect rheight95" alt="" />  
   </div>  
   <p style="clear: left;"></p>  
 </body>  
 </html>

Ekran Görüntüsü:



YANSIMA OPAKLIĞININ DEĞİŞTİRİLMESİ

 Proje Kodları:

 
 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>  
 <!DOCTYPE html>  
 <html xmlns="http://www.w3.org/1999/xhtml">  
 <head runat="server">  
   <script type="text/javascript" src="reflection.js"></script>  
   <title>Reflection.js ÖRNEK</title>  
   <style type="text/css">  
     body {  
       background-color: #E6E6E6;  
       font-family: Georgia;  
       line-height: 1.5;  
     }  
     h2 {  
       line-height: 1;  
       font-family: Arial, Helvetica, sans-serif;  
     }  
     img {  
       border: 0;  
     }  
   </style>  
 </head>  
 <body>  
   <h2>YANSIMA OPAKLIĞININ DEĞİŞTİRİLMESİ</h2>  
   <p>Opaklık 20%'den başlayarak 80%'e kadar arttırıldı.</p>  
   <div style="float: left; padding: 10px;">  
     <img src="example.jpg" class="reflect ropacity20" alt="" /></div>  
   <div style="float: left; padding: 10px;">  
     <img src="example.jpg" class="reflect ropacity40" alt="" /></div>  
   <div style="float: left; padding: 10px;">  
     <img src="example.jpg" class="reflect ropacity60" alt="" /></div>  
   <div style="float: left; padding: 10px;">  
     <img src="example.jpg" class="reflect ropacity80" alt="" /></div>  
   <p style="clear: left;"></p>  
 </body>  
 </html>


Ekran Görüntüsü:


Bu haftalık anlatacaklarım bu kadar, bir sonraki yazımda sizlere Bootbox.js kütüphanesinden bahsedeceğim. Şimdilik görüşmek üzere, hoşçakalın...

 KAYNAKLAR


Gönderen zaman:

Hiç yorum yok:

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)