exhtml
4/20/2017 - 5:39 AM

Parallax effect in background image ** faltaria añadir los estilos css **

Parallax effect in background image ** faltaria añadir los estilos css **

readme.md
content_copyfile_download
  • Rendered
  • Source

Mas refers / alternativas: – solo con CSS http://codepen.io/keithclark/pen/JycFw – con js pero este es con una imagen en lugar de una background image http://codepen.io/designcouch/pen/BNwjYX – ejemplo más avanzado/perfeccionado/reusable: http://codepen.io/ebrewe/pen/mPqVXv

parallax_effect.js
content_copyfile_download
/*
	Effect: parallax effect on hero banner images
	*/
	
	//
	// Requires debounce function
	//
	
	/*
	(esto no estoy seguro)
	la caja que lleva la imagen de fondo necesita tambien background-attachment: fixed

  @include background-size-cover;
  background-attachment: fixed;
  */

	var myc_parallax_bg = debounce(function() {
		//get Scroll Position of the Window
		scrollPos = $(this).scrollTop(); 

		//console.log(scrollPos);

		//change bakground position
		$('.js-parallax-hero-banner').css({
			//'background-position' : '50% ' + (-scrollPos/4)+"px"
			'background-position' : '50% ' + (scrollPos/4)+"px"
		});

		//animate title opacity
		$('.js-parallax-hero-banner-title').css({
			'opacity': 1-(scrollPos/300)
		});
	}, 0.2);

window.addEventListener('scroll', myc_parallax_bg);
	
/* Old way (without debounce function)
        $(window).scroll(function() {
					myc_parallax_bg();
				});
*/