Ağustos 12

Resimlerde Yansıma Yapmak

JavaScript & DOM Cumhur KORKUT

ajaxyansima.jpgEvet, arkadaşlar, pratik bilgilerime devam ediyorum. Bugünkü konum ise resimlerde yansıma yapmak. Bunun için Reflection adlı kütüphaneyi kullanacağız. Kütüphane deyince hemen gözünüz korkmasın, alt tarafı 171 satır bir kodcuk. :)

Bu sefer kod vermeyip sizi indireceğiniz yere yönlendireceğim. Buyrun buradan orjinal siteye gidelim.

Orjinal siteden "reflection"'ı indirdikten sonra inen reflection.zip'i açalım. İçinde "reflection.js" adlı bir dosya bulunuyor, bizim işimize yarayacak dosya bu.

Neyse, yeni bir sayfa açalım veya hazır bir sayfaya kod monte edelim. Ben kod monte etmeyi tercih ediyorum çünkü eminim ki yansımayı boş bir sayfada kullanmak hiçbirinizin işine yaramayacaktır. :)

Öncelikle reflection.js dosyasını sitemizin bulunduğu dizine kopyalayınız. Sonrasında ise sayfada <head> </head> etiketleri arasına

PLAIN TEXT
PHP:
  1. <script type="text/javascript" src="reflection.js"></script>

kodunu yerleştirmelisiniz. Ben reflection.js dosyasını ana dizine koyduğum için src(source/kaynak)'ye direkt olarak dosya ismini yazdım.

Resimlere yansıma yerleştirmek ise çok kolay. Normal bir resim için şu kodları girerken:

PLAIN TEXT
PHP:
  1. <img src="example.jpg" alt="" />

Yansımalı bir resim için ise:

PLAIN TEXT
PHP:
  1. <img src="example.jpg" class="reflect" alt="" />

kodlarını giriyoruz. Yani sadece HTML üzerinden class özelliğini reflect olarak belirliyoruz. Bu kadar basit! Tabii işi daha da fazla karmaşıklaştırabiliriz.

Yansıma size kısa mı geldi? Ya da belli belirsiz mi? İşte bu soruların cevabını şimdi alabileceksiniz.

Yansıma size kısa geldiyse class"reflect" 'i class="reflect rheight20" olarak değiştirebilirsiniz. Bu demektir ki yansıma resmin %20'si kadar olacak. Bu rakamı 10,20,30,40,50,60,70,80,90 yapabilirsiniz. Şimdi sıra geldi yansmanın belli olmasına. Bunun için ise class="reflect ropacity20" ekleyeceğiz. Bu da 10,20,30,40,50,60,70,80,90 yapılabilir.

Bunun dışında bilgi istiyorsanız ise sizi başka yerlere yönlendirmek durumundayım. Kütüphanenin orjinal sitesinden yeterli bilgiyi alabilirsiniz.

Kısa ama yararlı bir makale oldu sanırım. Umarım işinize yarar. Pratik uygulamalara devam edeceğim.

Javascript Yansıma uygulamasını test edin.
Javascript Yansıma uygulamasını indirin.

İyi günler!

Toplamda 6128 kez okunmuş.
Şu an 1 kişi okuyor.
En fazla 6 kişi aynı anda okumuş.
Bugün 0 kez okunmuş.

Etiketler: , , , , , 

1 oy2 oy3 oy4 oy5 oy (14 oy, ortalama 4.29) Oylanıyor ... Oylanıyor ...

  1. PHP ve Yerleşik DOM Sınıfları
  2. Javascript Sanal Klavye Yapalım
  3. Ajax Olmasaydı Ne Yapardık ? :)

Trackback Yorumları takip et Baskı Önizleme

21 yorum var

  1. # Fthrkl | 13 Ağustos 2007, 06:27 Gravatar

    hehe forumlarda görüyordum :) heralde bunu aspjpeg gibi bir komponentle yapıyolar diyordum :) yazı için teşekkürler.

  2. # Hakan ERSU | 14 Ağustos 2007, 19:09 Gravatar

    Gerçekten oldukça güzel bir makale olmuş.Toplu reflection efektlerinde elle tek tek resimlerin yansımalarını vermektense bu tarz bir script kullanmak oldukça akıllıca olur.
    Ayrıca bu konuda tavsiye edebileceğim bir yazıda burda bulunmakta.

  3. # Burcu | 16 Ağustos 2007, 04:07 Gravatar

    çok bir güsel örnek, ama kullanışlı diil. clientın makinayı boşu boşuna yormaktansa photshopda 2dkyı tercih ediyorum :D

  4. # DeepSo | 17 Ağustos 2007, 19:32 Gravatar

    Bende bunun gibi birşey arıyordum.İşime yarayacak gibi görünüyor.Sağol ;)

  5. # ismetcergin | 17 Ağustos 2007, 23:45 Gravatar

    teşekkürler…

  6. # YASİN ÖZTÜRK | 25 Ağustos 2007, 12:45 Gravatar

    Çok güzel bir örnek. İşimize yarar.

  7. # mehmet | 03 Eylül 2007, 20:41 Gravatar

    Vay anasına sayın seyirciler deyesi geliyo insanın sen nelere kadirsin ajax :)

  8. # Sezer | 05 Eylül 2007, 20:14 Gravatar

    cok teşekkurler. ancak sorum olacak bu kutüphaneyi uyguladığım resme link verdigimde link calısmıyor. bunu nasıl duzenleriz? saygılar

  9. # Sezer Çoban | 21 Eylül 2007, 13:16 Gravatar

    Anlatım için teşekkurler ancak firefox ta text align le ortalanmıs bir div table vs içerisine resmi koyup reflect efekti verince resim ortalanmıyor sola kayıyor. bunun bir cozum yolu wasrmıdır acaba_;?

  10. # ergin | 22 Eylül 2007, 23:45 Gravatar

    güzel bir yazı.

  11. # Kenan Kurtay | 05 Ekim 2007, 11:19 Gravatar

    Ayıptır sorması, fontun adı nedir bu örnekteki yazının

  12. # serpilcalis | 05 Kasım 2007, 14:32 Gravatar

    kesinlikle photoshop daha mantıklı :D

  13. # abdullah | 08 Kasım 2007, 12:58 Gravatar

    Çok güzel elinize sağlık

  14. # Cumhur KORKUT | 11 Kasım 2007, 12:23 Gravatar

    Sezer, o sorun bu kütüphaneden kaynaklanmıyor.

    Kenan, o yazı bana ait değil.

  15. # Burak Yücesoy | 23 Aralık 2007, 22:33 Gravatar

    İyide bunun AJAX la alakası yok bu bildiğimiz javascript. Lütfen Javascript ile AJAX ı birbirine karıştırmayalım.

  16. # eburhan | 25 Aralık 2007, 11:55 Gravatar

    @Burak Yücesoy
    Sitenin Kategoriler bölümüne bakarsanız burada yalnızca AJAX anlatılmadığını göreceksiniz. Ayrıca AJAX ve JavaScript birbirlerinden çok uzak konular değiller. Siz de bunu karıştırmazsanız seviniriz.

  17. # JasepH | 07 Ocak 2008, 03:37 Gravatar

    Üstad teşekkür ederim çok faydalı bilgiler yayınlıyorsun sitende.
    Kaç saatir böyel bir kaynak arıyordum Siten Favorimdir artık..

  18. # Utku Demir | 09 Şubat 2008, 07:02 Gravatar

    Üstad çok sagol çok güzel bilgiler yayınlıyorsun.

  19. # Reflection maker { Resmi zemine Yansıtma} | 15 Mart 2008, 11:57 Gravatar

    […] Birçok blogda buna benzer yansıma efektleri görmüşsünüzdür. Genelde bunlar Adobe Photoshop programıyla yapılır, bazen gerektiğinde bende photoshopla yapıyorum. Webmasterlar genelde bu yansıma efektlerini severler hatta şurada birzamanlar ajax yardımı ile bu yansıma efektlerin hazırlanması anlatılmıştı. Ben Photoshop bilmem, Ajax dan hele hiç anlamam diyenlere iki site ismi veriyorum. Mesela bu yandaki yansıma görünümünü bu generator siteleri tarafından yaptım. Bence gayet güzel çalışıyorlar, ister image isterseniz yazı üzerinde istediğiniz efekti uygulayabilirsiniz. İlk sitemizin adı Reflectionmaker Burada ister image resminin upload linkini istersenizde doğrudan bilgisayarınızdan yükleyebiliyorsunuz. Refloction size ayarıylada yansımanın derinliğini seçiyorsunuz. İkinci sitemiz ise Ruido-blanco bu sitede aynı görevi görüyor, ama diğerinden farkı derinlik ayarının ikitane olması. Bence oldukça faydalı siteler. Generatör listeme dahil ettim bile. En azından blogu olanlar resim koyarken biraz daha profesyonel görsellik katabilirler. […]

  20. # ErrorLog | 23 Nisan 2008, 12:56 Gravatar

    Online olarakta yansıtabiliyorduk sanırım =) birde vb eklentisi vardı . GüzeL anlatım teşekkürLer =)

  21. # cemre | 21 Mayıs 2008, 20:00 Gravatar

    çok güzel bir makale ama ben bunu aramıyorum saatlerdeki yansımayı arıyorum bir gün lütfen onuda anlatın

Yorum yazın

sayfa sayacı