Jquery Scroll Animasyon Plugini - ScrollMe
UstaDerslik Soru-Cevap Yararlı Araçlar
arama ikon
Diller
Türkçe Türkçe

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(2335)
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 3 Yıl Önce Cevaplandı
admin harika anlatmışsın



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