Bonjour
Je suis en train de faire une page qui lance differentes animations en fonction du scroll.
Le principe est simple, quand je suis dans un bloc ayant un data-attribute relatif au type de l'animation. Je lance cette animation.
Pour faire cela, mon script se base sur l'evenement $(window).scroll().
Quand mon $(window).scrollTop est égal à la position de mon block, je lance l'animation. Quand je sors de ce bloc, j'arrete l'animation. J'aimerais qu'une fois l'animation terminée, lancer une seule fois ma fonction reset. Actuellement, elle se lance en boucle tant que je ne suis pas dans un bloc ayant un data-attribute.
Demo

Je suis en train de faire une page qui lance differentes animations en fonction du scroll.
Le principe est simple, quand je suis dans un bloc ayant un data-attribute relatif au type de l'animation. Je lance cette animation.
Pour faire cela, mon script se base sur l'evenement $(window).scroll().
Quand mon $(window).scrollTop est égal à la position de mon block, je lance l'animation. Quand je sors de ce bloc, j'arrete l'animation. J'aimerais qu'une fois l'animation terminée, lancer une seule fois ma fonction reset. Actuellement, elle se lance en boucle tant que je ne suis pas dans un bloc ayant un data-attribute.
Demo
$(document).ready(init);
// Ma class Screen
function Screen(name){
this._name = $("#"+name);
this._hauteur;
this._position;
this._screenEnd;
this._screenEnd;
this.screenHeight = function() {
this._hauteur = this._name.data('height');
return this._hauteur;
}
this.topPosition = function() {
this._position = this._name.position().top;
return this._position;
}
this.screenEnd = function() {
this._screenEnd = (this._name.position().top)+(this._name.data('height'));
return this._screenEnd;
}
}
var mesScreens = new Array();
$(".screen").each(function(i){
mesScreens[i] = new Screen($(this).attr('id'));
mesScreens[i]._name.css("height", mesScreens[i].screenHeight());
//console.log(mesScreens[i]);
});
var fini = false;
function init(){
console.log($(".screen").length);
var scrollTimer = null;
$(window).scroll(function () {
var monScrollTop = $(window).scrollTop();
for (var i=0; i<mesScreens.length ; i++) {
if(monScrollTop>(mesScreens[i].topPosition()+5) && monScrollTop<=(mesScreens[i].screenEnd()+5)){
//started = true;
if(mesScreens[i]._name.data("func") == "panorama"){
horizontalPanel(mesScreens[i]._name, mesScreens[i]._hauteur, mesScreens[i]._position);
}else if(mesScreens[i]._name.data("func") == "anim"){
anim(mesScreens[i]._name, mesScreens[i]._hauteur, mesScreens[i]._position, 4);
}
//console.log(mesScreens[3]._hauteur);
}else {
//console.log("je sors");
reset(mesScreens[i]._name, mesScreens[i]._hauteur);
}
};
});
}
/*
* Function animateSequence
* @screen : le screen concerné
* @hauteur : la hauteur d'une image dans le sprite
* @nb : le nombre d'images dans le sprite
*/
function animateSequence(myScreen, height, nb) {
// started = true;
// var i = nb;
// setInterval(function(){
// nb--;
// if(i > nb){
// i = nb;
// }
// myScreen.css({'background-position' : '0 ' + (i*height) + 'px' });
// }, 250);
}
function calculateDistance(myScreen){
distance = myScreen.offset().top - $(window).scrollTop();
return distance;
}
/*
* Function horizontalPanel
* @screen : le screen concerné
* @hauteur : hauteur du div
*/
function horizontalPanel(myScreen, hauteur, position){
//console.log("Fonction horizontalPanel debut || fini = "+fini);
var $img = myScreen.children("img");
var deltaScroll = ($(window).scrollTop() - position);
var scrollPercentage = ((deltaScroll / (hauteur)) * 100) ;
//console.log(scrollPercentage);
$img.css('position', "fixed");
$img.css("bottom", "");
$img.css('top', "0px");
$img.css('left', "0px");
$img.css("left", -scrollPercentage+"%");
}
function anim(myScreen, hauteur, position, nbImg){
//console.log("ok");
var $img = myScreen.children("div.image");
var deltaScroll = ($(window).scrollTop() - position);
var scrollPercentage = ((deltaScroll / (hauteur)) * 100) ;
var percentNb = ((nbImg/hauteur) * 100).toFixed(2);
for(var i=0; i<nbImg; i++){
//console.log("if(bla)");
}
//console.log("__");
if(scrollPercentage)
//console.log(hauteur);
$img.css('position', "fixed");
$img.css("top", "0px");
$img.css("bottom", "");
$img.css('background-position', "0 "+ scrollPercentage + '%');
$img.css('left', "0px");
}
function reset(myScreen){
//console.log("Fonction Reset || fini = "+fini);
myScreen.children().css('position', "relative");
myScreen.children().css("bottom", "0px");
myScreen.children().css("top", "");
myScreen.children().css("left", "");
}
[/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i][/i]