Jquery Scroll Animasyon Plugini - ScrollMe
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon

bilgi UstaDerslik
Bu uyari kutusudur.
Tamam
Anasayfa
İletişim
Üyeler

Jquery Scroll Animasyon Plugini - ScrollMe

profil
cArleone
BEĞEN(0)
BEĞENME(0)
GÖRÜNTÜLENME(4225)
RAPOR ET
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ü :
http://ustaderslik.com/resim/ders/gdfg5vgh.png

Kullanımı bu kadar.




uzman13
uzman13 5 Yıl Önce Cevaplandı
admin harika anlatmışsın
NAKAMOZ
NAKAMOZ 145 Gün Önce Cevaplandı
Width ve Height komutlarını nasıl animasyonlarız peki bu scrolllime ile



Kod
Kalın
Vurgu
Resim
Video
Url
CEVAPLA
Tüm Hakları Saklıdır. ©Arleone 2013-2014 UstaDerslik






Giriş
Şifremi Unuttum...
Şifre Talep
  Kuralları Kabul Ediyorum.
Kaydol