RealShadow.js – Mouseye duyarlı gölge efekti

RealShadow.js

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>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-04-12 tarihinde yayınlandı,Toplam 2250 karakterden oluşmaktadır.
Yeniden yazdırma ipuçları:Özel talimatlar dışında, bu sitedeki tüm makaleler CC-4.0 sözleşmesi kapsamında yayınlanmaktadır.Yeniden basılması için lütfen kaynak belirtiniz.
Yorum yap(Yorum yapılmamış)
Yükleniyor...