RealShadow.js – Mouseye duyarlı gölge efekti

By

Real Shadow

Eskiden Photoshop kullanarak  web sitesi için farklı tasarımlar üretmeye çalışırdık. En çok kullandığımız ve en çok popüler olanlar gölge efektleriydi. Web sitesindeki içeriklere gölge efekti verince 3 boyutlu bir  görünüm kazanır ve bir hayli de çekici olurdu. Bu günkü web teknolojisi  ile artık Photoshop olmadan da bölge efektleri kullanmak mümkün. Henüz bütün tarayıcılar tarafından desteklenmese  bile major diye adlandırılan en çok kullanılan tarayıcılar üzerinde yapılabiliyor.

Css3 box-shadow ile kutulara text-shadow ile de yazılara bunu yapabilmek mümkün. Kendi başına mouseye duyarlı olmasa bile 3D  görünümlü web tasarımları hazırlamak için oldukça işe yarıyor.  Ivan Indamix  tarafından  geliştirilen RealShadow.js uygulaması da hazırladığınız divlere gölge efekti vermek için yapılmış. Eklentinin en güzel yanı gölgenin mouse pozisyonlarına göre hareket etmesidir. Mousenizi bir ışık veya güneş olarak düşünün ve çerçevelerin etrafında gezdirin. Bu sırada gölgelerin nasıl mouseye duyarlı bir şekilde hareket ettiğini göreceksiniz.

Kullanım

  • Head  etiketleri arasına eklenmesi gereken bölümler.
Js ve stil dosyaları : 
<link rel="stylesheet" href="example.css"/>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="realshadow.js"></script>

 JavaScript : 

Bu  kısıma  gölge efekti  olmasını sitediğiniz div yada  elementleri ekleyerek gölge  efektini kullanabilirsiniz. Örnek  olarak eklenmiş olan elementler : button, .container, .text

	<script type="text/javascript">

	$(function(){
		$('button, .container, .text').realshadow({
			pageY: 10
		});
	});
	</script>

 Basit  kullanım : 
<script type="text/javascript">
$(selector).realshadow(); // options are optional Secenekler istege bagli

$(selector).realshadow({

    followMouse: false,   // true by default / true default olarak calisir

    pageX:       x,       // x coordinate of the light source / x isik kaynagi koordinati
    pageY:       y        // y coordinate of the light source  / y isik kaynagi  koordinati

    c: {                  // shadow color /Golge rengi
        r: 1,             // red   channel for shadow / Golge icin kirmizi kanal
        g: 1,             // green channel for shadow / golge icin yesil kanal
        b: 1,             // blue  channel for shadow / golge icin mavi kanal
    }

});
</script>

 

  •  Body etiketleri arasına eklemeniz gereken bölüm.

Html : 

	<div class="container">
		<ul class="menu">
			<li><button>1</button></li>
			<li><button>2</button></li>
			<li><button>3</button></li>
			<li><button>4</button></li>
			<li><button>5</button></li>
		</ul>

		<p class="text">Mintik.com</p>

		<p class="text">Mintik.com</p>
	</div>

 



Leave a Comment

Your email address will not be published.

You may also like

Trend