Bir HTML öğesi ekranda görüntülendiği anda nasıl canlandırılır?Öğe ekranda görüntülendiğinde animasyonlar nasıl başlatılır?
Yığın taşması tour page üzerinde bir örnek buldum; burada bilgi öğeleri yeterince aşağıya iner inmez sayfaya kaydırılır. Bunun arkasındaki hile nedir?
Görünümün konumunu algılamak ve görünür hale geldiğinde etkinleştirmek için javascript kullanmanız gerekir.
Devreleri algılamak ve yürütmek için javascript'i ve animasyonları yapmak için css veya javascript'i kullanabilirsiniz.
Bunu yapmak için birçok jquery tabanlı komut dosyası bulunmaktadır.
1.
<div class="demo"></div>
2. Yük javascript kütüphanesi ve jQuery Görünüm Denetleyicisi eklentisi Belgenin sonunda jQuery.
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="viewportchecker.js"></script>
3. Çağrı bu eleman üzerinde eklenti ve javascript şey yapın.
<script>
$(document).ready(function(){
$('.demo').viewportChecker({
// Class to add to the elements when they are visible
classToAdd: 'visible',
// The offset of the elements (let them appear earlier or later)
offset: 100,
// Add the possibility to remove the class if the elements are not visible
repeat: false,
// Callback to do after a class was added to an element. Action will return "add" or "remove", depending if the class was added or removed
callbackFunction: function(elem, action){}
});
});
</script>
Thx, bana iyi bir şey! Kullanacağım ^^ – Matrix