Jquery derslerimize devam ediyoruz.Bu derste
scrollme adlı plugini işleyeceğiz.Scrollme scroll indikçe belirlediğimiz alanı animasyonlarla gösteren veya gizleyen bir plugin.Aşağıdaki örnekten inceleyebilirsiniz.
İncele : http://ustaderslik.com/ornek/scrollme/
İndir : http://ustaderslik.com/dosya/scrollme.zip
Öncelikle plugini sayfamıza dahil ediyoruz.Örnek içinde dosyalar mevcut.Daha sonra
<div class="scrollme">
<div class="animateme"> Animasyon </div>
</div>
bu şekilde animasyon olacak divlerimizi koyuyoruz.Classlar bu şekilde olmalı.Animasyon parametrelerini
animateme clasına sahip dive veriyoruz.Şimdi parametreleri inceleyelim.
1-data-when
Data when animasyon konumunu belirler.
enter : scroll girdiğinde
exit : scroll çıktığıda
şeklinde parametreler alıyor.
<div class="animateme" data-when="enter"> Animasyon </div>
2- data-from , data-to
Bunlar animasyon başlama bitiş süreleri.1-0 arası değer alırlar.Örneğin froma 1 to ya 0 verirsek scroll aşağıya indiğinde belirlediğimiz animasyonda açılır. froma 0 to ya 1 verirsek belirlediğimiz animasyon ile gizlenir.
<div class="animateme ani1" data-when="enter" data-from="1" data-to="0.5"> Animasyon</div>
Yukarıdaki 2 madde ayardı şimdi animasyonlara bakalım.
3-data-opacity
Opaklığını artırarak veya azaltmak için.1-0 arası değer alır.
<div class="animateme ani1" data-when="enter" data-from="1" data-to="0.5" data-opacity="0"> Animasyon</div>
4-data-translatex,data-translatey,data-translatez
x,y,z konumlarından sayfadaki bulunduğu konuma hareket ettirmek için.
<div class="animateme ani1" data-when="enter" data-from="1" data-to="0" data-translatex="-800" data-translatey="-500" data-translatey="300"> Animasyon</div>
5-data-rotatex,data-rotatey,data-rotatez
x,y,z eksenlerinde döndürerek animasyonlu şekilde açmak veya kapatmak için.Dereceler ile çalışır.
<div class="animateme ani1" data-when="enter" data-from="0.5" data-to="0.7" data-rotatez="360"> Animasyon</div>
6-data-scale
Alanı belirli boyutlarda büyültüp küçültmek için.
<div class="animateme ani1" data-when="enter" data-from="0.5" data-to="0.7" data-scale="1.3"> Animasyon</div>
Genel örnek :
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<title>UstaDerslik</title>
<script type="text/javascript" src="jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="jquery.scrollme.min.js"></script>
<style type="text/css">
.ani1{width:500px;height:50px;padding:150px;margin:auto;background:#15d4f5;text-align:center;color:#fff;margin-bottom:25px;}
</style>
</head>
<body>
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />
<div class="scrollme">
<div class="animateme ani1" data-when="enter" data-from="1" data-to="0.5" data-opacity="0"> Animasyon-1</div>
</div>
<div class="scrollme">
<div class="animateme ani1" data-when="enter" data-from="1" data-to="0" data-translatex="-800" data-translatey="-500" data-translatey="300"> Animasyon-2</div>
</div>
<div class="scrollme">
<div class="animateme ani1" data-when="enter" data-from="0.5" data-to="0.7" data-rotatez="360"> Animasyon-3</div>
</div>
<div class="scrollme">
<div class="animateme ani1" data-when="enter" data-from="0.5" data-to="0.7" data-scale="1.3"> Animasyon-4</div>
</div>
<div class="scrollme">
<div class="animateme ani1" data-when="enter" data-from="0.5" data-to="0" data-rotatez="360" data-rotatey="360"> Animasyon-5</div>
</div>
</body>
</html>
Görüntüsü :
Kullanımı bu kadar.
UstaDerslik
