scrollEvents.js
now using requestAnimationFrame
// UTILISATION
$('.element').scrollEvents(options);
$('.element').scrollEvents(method [, flag], options);
// OPTIONS
options = {
selection: $(this), // Éléments auxquels sera associé l'événement
flag: false, // Identifiant de l'événement
offset: 0, // Décallage par rapport à la position de l'élément
//
visible: false, // Callback lorsque l'élément entre dans l'écran, par le haut ou par le bas
up:false, // Callback lorsque l'élément sort de l'écran par le haut
down:false, // Callback lorsque l'élément sort de l'écran par le bas
topUp: false, // Callback lorsque le haut de l'élément sort par le haut de l'écran
topDown: false, // Callback lorsque le haut de l'élément entre par le haut de l'écran
bottomUp: false, // Callback lorsque le bas de l'élément entre par le bas de l'écran
bottomDown: false, // Callback lorsque le bas de l'élément sort par le bas de l'écran
travel: false, // Callback qui se déclenche à chaque «scroll» où l'événement est visible
//
isVisible:false,
topIsVisible: false,
disabled: false
}
// METHODS
methods = [
'trigger', // Déclenche l'analyse des événements
//
'resize', // Récupère les tailles et offsets de tous les éléments
'update', // Comme le Resize, et met à jour les propriétés «isVisible»
//
'set', // Modifie un paramètre
//
'enable', // Active un événement
'disable', // Désactive un événement
'remove', // Supprime un événement
'destroy' // Destroy scrollEvents
]
1
$('.demo-1 .message').scrollEvents({
visible: function(event){
event.selection.removeClass('left');
},
down: function(event){
event.selection.addClass('left');
}
});
2
$('.demo-2 .message').scrollEvents({
offset: 300,
topUp: function(event){
event.selection.addClass('turquoise');
},
topDown: function(event){
event.selection.removeClass('turquoise');
}
});
3
$('.demo-3').scrollEvents({
travel: function(event){
var delta = event.data.delta();
$('.message em', event.data.selection).html(delta);
$('.demo-3 .overlay').width((delta*100)+'%');
}
});
5
// Animation du background-position
$('.demo-5').scrollEvents({
travel: function(e){
var dino = $('.demo-5 .dino')[0];
var delta = e.data.delta();
dino.style.left = ((delta*200)-50)+'%';
dino.style.backgroundPosition = '0px ' + ((delta*200)%10*-150) +'px';
}
});
// Methodes enable & disable
$('.demo-5 button').on('click', function(){
var active = $(this).toggleClass('active').hasClass('active');
$('.demo-5').scrollEvents( active ? 'disable' : 'enable' );
});
$(window).on('scroll')
$(window).on('resize')
