Approach.js

Approach.js

Evet sayın seyirciler bu gün sizlere Srobin tarafından yapılmış olan Appcroach.js uygulamasından ve kullanımından bahsedeceğim biraz. Uzaklığa dayalı diye başlık atmak biraz garip oldu sanırım. Başka türlü kısa bir şekilde örneğin tanıtımı nasıl olur hiç bir fikrim yok açıkçası.

Eğer Javascript ve jQuery konuları üzerine sürekli internette örnekler arayan biri iseniz mutlaka mouse pozisyonlarına göre hareket eden çalışmalar görmüşsünüzdür. Genelde parallax diye adlandırılırlar ve 3 boyutlu tasarımlar oluşturmak için kullanılırlar. Approach uygulaması da mouse pozisyonlarına göre hareket eden tasarımlar hazırlamanıza yarayan bir örnek. 3 boyutlu olmasa da çok güzel çalışmalar hazırlayabilmeniz mümkün.

Bazen videolu dersler incelediğimde mousenin  götürüldüğü nokta Ctrl ve + tuşları yardımıyla büyütülür videoyu hazırlayan kişi tarafından. Bu özellik te şu an aklıma geldi. Açıkçası buna benzer bir örnek yapılabileceği aklımın ucundan bile geçmezdi. İlk bakışta basit bir  gibi görünsede bir çok alanda kullanılabilir. Mesela mouse herhangi bir elementin üzerine geldiğinde büyüsün gibi birçok çalışma hazırlayabilirsiniz. Belki parametreleri hakkında bilgi edinip sizlere daha detaylı anlatabilirim diye düşünüyordum ama örneğin o kadar çok parametresi yok. Anlayacağınız kullanımı oldukça basit bir çalışma.

Kullanım 

Demo 1 :

  • Head  etiketleri  arasına eklenmesi  gerekn bölümler.

Js ve Css dosya  adresleri :

<link rel="stylesheet" href="jquery-approach.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="../jquery.approach.min.js"></script>

Javascript :

	<script type="text/javascript">
	  $("a#demo-link").approach({
	    "fontSize": "44px",
	    "color": "#CC3300"
	  }, 300);
  </script>
  •  Body  etiketleri  arasına eklenmesi  gereken bölüm.

Html :

<a id="demo-link">I likes to grow and change color</a>

 

Demo 2 :

  • Head  etiketleri  arasına eklenmesi  gereken bölümler.

Js ve Css :

<link rel="stylesheet" href="jquery-approach.css" type="text/css" media="screen" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="../jquery.approach.min.js"></script>

javascript  :

	<script type="text/javascript">
	  $("#wrap img").approach({
	    "opacity": 0.8,
	  }, 100);
  </script>
  •  Body  etiketleri  arasına eklenmesi  gereken bölüm.

Html :

  <div id="wrap">
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />

      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />

      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />

      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />
      <img src="circle.jpg" />

  </div>

 

Ali
Telif Hakkı Bildirimi:Bu sitedeki orijinal makaleyi Ali2021-02-22 tarihinde yayınlandı,Toplam 3168 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...