RealShadow.js – Mouseye duyarlı gölge efekti

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="https://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>

Download

Demo