Foros del Web » Programando para Internet » Javascript »

Efecto de anclaje

 Estas en el tema de Efecto de anclaje en el foro de Javascript en Foros del Web. Hola, Estuve viendo que en algunas web tienen un efecto de anclaje, que el scroll va deslizándose hacia su punto y no aparece de repente. ...
  #1 (permalink)  
Antiguo 12/10/2008, 18:53
Avatar de pato12  
Fecha de Ingreso: septiembre-2007
Ubicación: Salta
Mensajes: 1.620
Antigüedad: 17 años, 4 meses
Puntos: 101
Efecto de anclaje
Hola,
Estuve viendo que en algunas web tienen un efecto de anclaje, que el scroll
va deslizándose hacia su punto y no aparece de repente.
¿Como se puede hacerlo?
Gracias
Salu2
__________________
Half Music - www.halfmusic.com
  #2 (permalink)  
Antiguo 12/10/2008, 19:14
Avatar de Panino5001
Me alejo de Omelas
  
Fecha de Ingreso: mayo-2004
Ubicación: -34.637167,-58.462984
Mensajes: 5.148
Antigüedad: 20 años, 8 meses
Puntos: 834
Respuesta: Efecto de anclaje
Hace poco preguntaron lo mismo. Fijate si te sirve:
Código PHP:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style>
html,body{overflow:hidden;}
body{visibility:hidden;}
div{ background-color:orange; color:#FFF; width:100px; text-align:center; cursor:pointer; border:1px dashed black; }
</style>
<title>test</title>
<script>
var zz=(function(){
/* ---- métodos privados ---- */
    var metodosPrivados={
        addEvent: function(type, fn ) {
            if ( this.addEventListener ) {
                this.addEventListener( type, fn, false );
            } else if(this.attachEvent){
                var _this=this;
                var f= function(){fn.call(_this,window.event);}
                this.attachEvent( 'on'+type, f);
                this[fn.toString()+type]=f;
            }else{
                this['on'+type]=fn;
            }
            return this;
        },
        removeEvent: function(type, fn ) {
            if( this.removeEventListener){
                this.removeEventListener( type, fn, false );
            }
            else if(this.detachEvent){
                this.detachEvent('on'+type,this[fn.toString()+type]);
                this[fn.toString()+type]=null;
            }
            else{
                  this['on'+type]=function(){};
            }
            return this;
            }
    }
/* ---- métodos públicos ---- */
    return{
        extend:function(el,obj){
            for(var i in obj)
                el[i]=obj[i];
            return el;
        },
        get:function(id){
            return zz.extend(document.getElementById(id),metodosPrivados);
        },
        add:function(obj){
            zz.extend(metodosPrivados,obj);
        }
    }    
})();
var $=zz.get;
var efectos={
    _scroll:function(inicio,fin,coef,pausa){
        var tmp=[];
        var _this=this;
        if(_this.intervalo)
            clearInterval(_this.intervalo);
        scrollTo(0,inicio);
        this.test=0;
        this.pausa=pausa;
        this.val=inicio;
        this.intervalo=setInterval(
            function(){
                tmp[_this.test]=_this.val;
                if(_this.test>1 && tmp[tmp.length-2]==tmp[tmp.length-1]){
                    _this.val=fin;
                    scrollTo(0,_this.val);
                      clearInterval(_this.intervalo);
                }
                _this.test++;
                var r=self.pageYOffset || (document.documentElement.scrollTop+document.body.scrollTop);
                   _this.val=r+(fin-r) * coef;
                //_this.val=r+Math.min(5,((fin-r) * coef));
                scrollTo(0,_this.val);
            },this.pausa);
        return this;
    },
    getElementPosition:function() {
        var offsetTrail = this;
        var offsetLeft = 0;
        var offsetTop = 0;
        while (offsetTrail) {
            offsetLeft += offsetTrail.offsetLeft;
            offsetTop += offsetTrail.offsetTop;
            offsetTrail = offsetTrail.offsetParent;
        }
        
        return {left:offsetLeft, top:offsetTop};
    } 
}
zz.add(efectos);
onload=function(){
    $('pp').addEvent('click',function(){this._scroll($('pp').getElementPosition().top,$('ppp').getElementPosition().top,.09,20);});
    $('ppp').addEvent('click',function(){this._scroll($('ppp').getElementPosition().top,$('pp').getElementPosition().top,.09,20);});
    $('ppcentro').addEvent('click',function(){this._scroll($('ppcentro').getElementPosition().top,$('centroarriba').getElementPosition().top,.09,20);});
    $('centroarriba').addEvent('click',function(){this._scroll($('centroarriba').getElementPosition().top,$('pp').getElementPosition().top,.09,20);})
    
    $('centroabajo').addEvent('click',function(){this._scroll($('centroabajo').getElementPosition().top,$('ppp').getElementPosition().top,.09,20);})
    $('pppcentro').addEvent('click',function(){this._scroll($('pppcentro').getElementPosition().top,$('centroarriba').getElementPosition().top,.09,20);})
    document.body.style.visibility='visible';
}
</script>
</head>
<body>
<div id="pp">abajo</div>
<div id="ppcentro">centro</div>

<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="centroarriba">arriba</div>
<div id="centroabajo">abajo</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<div id="ppp">arriba</div>
<div id="pppcentro">centro</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html> 
  #3 (permalink)  
Antiguo 12/10/2008, 19:27
Avatar de pato12  
Fecha de Ingreso: septiembre-2007
Ubicación: Salta
Mensajes: 1.620
Antigüedad: 17 años, 4 meses
Puntos: 101
Respuesta: Efecto de anclaje
Hola,
Esta tal cual lo que buscaba.
Pero como puedo hacer para que envés de:
Código HTML:
onload=function(){ 
    $('pp').addEvent('click',function(){this._scroll($('pp').getElementPosition().top,$('ppp').getElementPosition().top,.09,20);}); 
    $('ppp').addEvent('click',function(){this._scroll($('ppp').getElementPosition().top,$('pp').getElementPosition().top,.09,20);}); 
    $('ppcentro').addEvent('click',function(){this._scroll($('ppcentro').getElementPosition().top,$('centroarriba').getElementPosition().top,.09,20);}); 
    $('centroarriba').addEvent('click',function(){this._scroll($('centroarriba').getElementPosition().top,$('pp').getElementPosition().top,.09,20);}) 
     
    $('centroabajo').addEvent('click',function(){this._scroll($('centroabajo').getElementPosition().top,$('ppp').getElementPosition().top,.09,20);}) 
    $('pppcentro').addEvent('click',function(){this._scroll($('pppcentro').getElementPosition().top,$('centroarriba').getElementPosition().top,.09,20);}) 
    document.body.style.visibility='visible'; 
}
Pongo:
Código HTML:
<a href="#abajo" name="arriba">Abajo</a>
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<a href="#arriba" name="abajo">Arriba</a>
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br /> 
<br />
Gracias
Salu2
__________________
Half Music - www.halfmusic.com
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta


« Tema Anterior | Próximo Tema »


La zona horaria es GMT -6. Ahora son las 22:16.