Efecto parallax

De 33system wiki
Saltar a: navegación, buscar

<< Informática

Efecto parallax

Teoría

Práctica

# En la cabecera ponemos la referencia al script
<script src="/jquery-1.4.3.min.js" type="text/javascript"></script>
<script>
	$(function() {
        $.fn.parallax = function(options){
            var $$ = $(this);
            offset = $$.offset();
            var defaults = {
                "start": 0,
                "stop": offset.top + $$.height(),
                "coeff": 0.95
            };
            var opts = $.extend(defaults, options);
            return this.each(function(){
                $(window).bind('scroll', function() {
                    windowTop = $(window).scrollTop();  
                    if((windowTop >= opts.start) && (windowTop <= opts.stop)) {
                        newCoord = windowTop * opts.coeff;
                         
                        $$.css({
                            "background-position": "0 "+ newCoord + "px"
                        });
                    } 
                });
            });
        };
		
     $('.back').parallax({ "coeff":-1 });
	 $('.back .middleback').parallax({ "coeff":-1.50 });
	 $('.back .middleback .middlefront').parallax({ "coeff":-2.15 });
     $('.back .middleback .middlefront .logo').parallax({ "coeff":-3.15 });
	})
</script>

Documentación