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>