• Resuelto Mgr10

    (@mgr10)


    Hola a todos,

    No sé si escribo en el sitio correcto.
    Estoy intentando crear un efecto parallax para mi pagina.

    Actualmente tengo una sección con fondo rosa en la que ya hay elementos que ya hacen este efecto. La cosa es que quiero conseguir que la capa amarilla con siluetas de cactus haga este efecto sobre la capa rosa.

    Me gustaría conseguir algo así:
    https://www.numero10.ch/fr/home

    Siento recurrir pero no tengo conocimientos de código y los desarrolladores de la plantilla me facilitan el codigo pero no me dan más información de como debo conseguirlo.

    Este es el código que aplico pero no me funciona, no se si me falta añadir algun paso más:

    
    <script type="text/javascript"> 
    
    (function($) {
    
    	$.fn.scrolling = function(speed) {
    		var $item = $(this);
    
    		if( $item.length == 0 ) return ;
    
    		var $parentBlock = $(this).closest('.fullwidth-block');
    		var positionTop = $item.data('positionTop');
    		var newPositionTop = positionTop+($(window).scrollTop()-$parentBlock.offset().top)*speed;
    		$item.css({top: newPositionTop});
    	}
    
    	$.fn.arrowRotate = function(speed) {
    		var $item = $(this);
    
    		if( $item.length == 0 ) return ;
    
    		var $parentBlock = $(this).closest('.fullwidth-block');
    		var angel = ($(window).scrollTop()-$parentBlock.offset().top)*speed*360/$parentBlock.outerHeight();
    		$item.css({
    			transform: 'rotate('+angel+'deg)',
    			MozTransform: 'rotate('+angel+'deg)',
    			WebkitTransform: 'rotate('+angel+'deg)',
    			msTransform: 'rotate('+angel+'deg)'
    		})
    	
    })(jQuery);
     </script>

    Si alguien tiene otra sugerencia de como conseguir el efecto me sería de mucha ayuda!

    Un saludo!

    • Este debate fue modificado hace 5 años, 9 meses por José Arcos.

    La página con la que necesito ayuda: [accede para ver el enlace]

Viendo 1 respuesta (de un total de 1)
Viendo 1 respuesta (de un total de 1)
  • El debate ‘Efecto parallax’ está cerrado a nuevas respuestas.