Yui Scroll Kaydırma Animasyonu

0
180
Okunma

animasyon scroll yui 300x167 Yui Scroll Kaydırma Animasyonu

 

Yui Scrool Animasyonu ile içerik kaydırma:

Scroll okları  sayesinde  div içerisindeki   alanın yukarı  doğru  hareket  etmesini  sağlayan kodun yui  kısmı

[cc]
YUI({ filter: ‘raw’ }).use(“anim”, function(Y) {
var node = Y.one(‘#demo .yui3-bd’);
var anim = new Y.Anim({
node: node,
to: {
scroll: function(node) {
return [0, node.get(‘scrollTop’) +

node.get(‘offsetHeight’)] // http://mintik.com
}
},
easing: Y.Easing.easeOut
});
[/cc]

Scroll okları  sayesinde  div içerisindeki   alanın aşağı  doğru  hareket  etmesini  sağlayan kodun yui  kısmı

[cc]// scroll asagi http://mintik.com
var onClick = function(e) {
var y = node.get(‘offsetHeight’);
if (e.currentTarget.hasClass(‘yui3-scrollup’))

{ // http://mintik.com
y = 0 – y;
}anim.set(‘to’,

{ scroll: [0, y + node.get(‘scrollTop’)] });
anim.run();
};Y.all(‘#demo .yui3-hd a’).on(‘click’, onClick);
});[/cc]

Bu kodlar  css  den oluşturduğumuz  div alanında   css    overflow :  hidden sayesinde div alanı  içerisinde  görünmeyen kısımları ok  ile  kaydırma özelliği kazandırıp  bütün içeriğin gözle  görülebilmesine yarıyor.

Kaynak kodu ile alakalı oluşturduğumuz demo  örneği Türkiyenin coğrafi konumunu anlatan bir çerçeve.

Aşağıda  verdiğim demo adresinden örneğin çalışır  bir  halini  ve sizin için gerekli olan kaynak kodları  bulabilirsiniz.

 

Demo: Yui Scroll Animasyonu

Aranan kelimeler:

  • html scroll animasyonu

CEVAP VER

Lütfen yorumunuzu girin!
Please enter your name here