vertical Parallax en jQuery

Actualmente estoy construyendo mi sitio de cartera, y yo estoy teniendo un poco de dificultad, básicamente, tengo dos pequeños problemas ...vertical Parallax en jQuery

no puedo conseguir la posición de fondo para animar en del eje y cuando la posición contiene un "centro" atributo en el eje x
no puedo conseguir el efecto ocurra mientras se desplaza, hacer una pausa cuando deje de desplazarse y continuar cuando continúo para desplazarse

Aquí está el código que estoy usando:

//Top section parallax 
$(function parallaxInnerAnimation(){ 

    //Reset the background position 
    $('#first-canvas .inner').css({backgroundPosition: 'center 0px'}); 

    //Set the animations 
    $(window).scroll(function() { 
     $('#first-canvas .inner').animate({ 
     backgroundPosition:"(center -200px)" 
     }, 5000, 'linear'); 
    }); 

});

estoy usando el plug-in v1.22 jquery.backgroundPosition por Alexander Farkas, y jQuery 1.6.1.

Este sitio es CSS3 y HTML5, y está destinado principalmente a apoyar IE9, Firefox 4 y Chrome 11, etc ... Estoy haciendo un sitio diferente para los navegadores antiguos compatibilidad hacia atrás por lo que se puede sacrificar

este momento si es una pregunta tonta, en realidad no soy un desarrollador, más un diseñador que puede codificar cosas de front-end, gracias de antemano.

ACTUALIZACIÓN:

Para ponerlo en contexto, ya lo he puesto en mi servidor vivo http://charlieryan.co.uk/stack-overflow/

Fuente

2011-05-25 Charlie Ryan

¿Tiene usted un ejemplo vivo? Esto suena interesante pero es difícil saber qué está pasando mal. – namuol

No lo hice, pero lo puse en mi servidor - http://charlieryan.co.uk/stack-overflow/ ¡gracias! –

Recibo un error de javascript tan pronto como me desplazo: 'línea 42 de backgroundPosition.charlieryan.js: res is null'. Este podría ser su problema. – namuol

Miré backgroundPosition.charlieryan.js plugin, que no son compatibles para la posición de fondo en el centro . Puede que tenga que modificar el complemento y usarlo. Hay un método llamado Array que debería modificarme. El error js está relacionado con este problema. Dejame saber si necesitas mas ayuda.

Fuente

2011-05-31 17:11:34 ShankarSangoli

gracias, he estado buscando en esto, pero yo soy mucho de un experto (el guión no fue escrito por mí después de todo, el nombre es sólo porque trabajar en cientos de sitios y es fácil de organizar cosas como esa), ¿cómo voy a hacer esto? –

por favor, sustituir el método toArray en ese plugin con el código de abajo \t función toArray (strg) { \t strg = strg.replace (/ left | superior/g, '0px'); \t strg = strg.replace (/ right | bottom/g, '100%'); strg = strg.replace (/ center/g, '50% '); strg = strg.replace (/ - \ s/g, '-'); \t strg = strg.replace (/ ([. 0-9 \] +) (\ S | \) | $)/g, "$ 1px $ 2"); ? \t res var = strg.match (/ (- [. 0-9 \] +) (px | \% | em | pt) \ s (- +) (px? [0-9 \.] | \ % | em | pt) /); \t de retorno [parseFloat (res [1], 10), res [2], parseFloat (res [3], 10), res [4]]; } Esto solucionará el problema. – ShankarSangoli

eso es perfecto, gracias, ahora solo tengo que resolver la segunda parte de la pregunta (sobre el desplazamiento) –

$(window).scroll(function() 
{ 
var yPos=-($(window).scrollTop()/6); 
if($(window).scrollTop()>100) 
{ 
    document.getElementById("div1_wrapper").style.backgroundPosition="100% "+yPos+"px"; 
} 
if($(window).scrollTop()<100) 
{ 
    document.getElementById("div1_wrapper").style.backgroundPosition="100% 100%"; 
} 
});

tutorial oficial here

Fuente

2016-03-22 05:16:48 aman

Respuesta

Cuestiones relacionadas