par
_activmik » 04 août 2008, 12:03
Bonjour,
Je début en javascript et j'aimerais faire un petit bout de code qui me permettrait de faire un scroll automatique d'une ancre (qui sera en bas de page) vers le haut.
J'ai un peu regardé du côté de smoothscroll ou du Fx.scroll de mootools, mais j'arrive pas à les intégrer, et ensuite de les modifier afin que ce ne soit pas sur un évenement 'click' mais sur un settimeout.
En résumé, j'aimerais un effet comme celui
là, mais automatique, et au bout de 3/5 sec...
J'espère que ma requête est compréhensible
[edit] changement du titre pour plus de pertinence
D'avance merci.
[edit] Bon et bien j'ai trouvé la solution
et pour les 31 personnes qui sont venus voir le sujet, je post la réponse
J'ai donc utilisé la librairie mootools et ajax.
Ce qui donne :
Code : Tout sélectionner
<html>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/moo.extend.js"></script>
<script type="text/javascript">
Fx.Properties = Fx.Styles.extend({
increase: function(){for ( var p in this.now) this.element[p] = this.now[p]; }
});
Fx.FlyingScroller = Fx.Properties.extend({
initialize: function(el, options){
this.parent(el, options);
this.options = Object.extend(this.options || {}, Object.extend({
paddingLeft: 0,
paddingTop: 0
}, options || {}));
},
toElement: function(el, paddingLeft, paddingTop){
this.goTo(el.offsetLeft - (paddingLeft || this.options.paddingLeft || 0), el.offsetTop - (paddingTop || this.options.paddingTop || 0));
},
goTo: function(x, y){
this.custom({
'scrollLeft': [this.element.scrollLeft, x],
'scrollTop': [this.element.scrollTop, y]
})
}
});
</script>
<script > setTimeout("panel.clearTimer().toElement($('content2')); return false;",6000)</script>
<style type="text/css">
/* Définition des parametres d'affichage*/
.scrolling-content{position:absolute;width: 0px;height:0px;}
#tile-wrap{;overflow: hidden;position: relative}
#tile-inner{width: 1676px; height: 947px; }
/* gestion de la vitesse de défilement avec le parametre top */
#content1{left: 0px;top: 250px;}
</style>
</html>
et
Code : Tout sélectionner
<html>
<script type="text/javascript">
var panel = new Fx.FlyingScroller($('tile-wrap'), {
transition: Fx.Transitions.quadInOut,
duration: 2400,
paddingLeft: 0,
paddingTop:0
});
</script>
</html>
Bonjour,
Je début en javascript et j'aimerais faire un petit bout de code qui me permettrait de faire un scroll automatique d'une ancre (qui sera en bas de page) vers le haut.
J'ai un peu regardé du côté de smoothscroll ou du Fx.scroll de mootools, mais j'arrive pas à les intégrer, et ensuite de les modifier afin que ce ne soit pas sur un évenement 'click' mais sur un settimeout.
En résumé, j'aimerais un effet comme celui [url=http://dannyblackman.com/]là[/url], mais automatique, et au bout de 3/5 sec...
J'espère que ma requête est compréhensible :oops:
[edit] changement du titre pour plus de pertinence
D'avance merci.
[edit] Bon et bien j'ai trouvé la solution 8-) et pour les 31 personnes qui sont venus voir le sujet, je post la réponse :roll:
J'ai donc utilisé la librairie mootools et ajax.
Ce qui donne :
[code]<html>
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/moo.extend.js"></script>
<script type="text/javascript">
Fx.Properties = Fx.Styles.extend({
increase: function(){for ( var p in this.now) this.element[p] = this.now[p]; }
});
Fx.FlyingScroller = Fx.Properties.extend({
initialize: function(el, options){
this.parent(el, options);
this.options = Object.extend(this.options || {}, Object.extend({
paddingLeft: 0,
paddingTop: 0
}, options || {}));
},
toElement: function(el, paddingLeft, paddingTop){
this.goTo(el.offsetLeft - (paddingLeft || this.options.paddingLeft || 0), el.offsetTop - (paddingTop || this.options.paddingTop || 0));
},
goTo: function(x, y){
this.custom({
'scrollLeft': [this.element.scrollLeft, x],
'scrollTop': [this.element.scrollTop, y]
})
}
});
</script>
<script > setTimeout("panel.clearTimer().toElement($('content2')); return false;",6000)</script>
<style type="text/css">
/* Définition des parametres d'affichage*/
.scrolling-content{position:absolute;width: 0px;height:0px;}
#tile-wrap{;overflow: hidden;position: relative}
#tile-inner{width: 1676px; height: 947px; }
/* gestion de la vitesse de défilement avec le parametre top */
#content1{left: 0px;top: 250px;}
</style>
</html>[/code]
et
[code]<html>
<script type="text/javascript">
var panel = new Fx.FlyingScroller($('tile-wrap'), {
transition: Fx.Transitions.quadInOut,
duration: 2400,
paddingLeft: 0,
paddingTop:0
});
</script>
</html>
[/code]
