(function($) {
"use strict";
$('[data-parallax]').each(function() {
var $this = $(this);
var image = new Image();
image.src = $this.attr('data-parallax');
image.onload = function() {
$this.css({backgroundImage: "url('" + this.src + "')", backgroundRepeat: "repeat"});
$this.data('parallax-width', this.naturalWidth);
$this.data('parallax-height', this.naturalHeight);
$this.triggerHandler('parallax-update');
};
$(window).bind('scroll', function() {
$this.triggerHandler('parallax-update');
});
$(window).bind('resize', function() {
$this.triggerHandler('parallax-update');
});
}).bind('parallax-update', function() {
var $this = $(this);
if("undefined" === typeof $this.data('parallax-width') || "undefined" === typeof $this.data('parallax-height')) {
return;
}
var vieww = $this.outerWidth(true);
var viewh = $this.outerHeight(true);
var natw = $this.data('parallax-width');
var nath = $this.data('parallax-height');
var speed = "undefined" === typeof $this.attr('data-parallax-speed') ? 0.5 : Math.min(1, parseFloat($this.attr('data-parallax-speed')));
var scroll = Math.min(1, Math.max(-1, ($(window).scrollTop() - $this.offset().top) / viewh));
var width = vieww;
var height = Math.ceil(width * nath / natw);
if(height < viewh) {
height = viewh;
width = Math.ceil(height * natw / nath);
}
var left = Math.round((vieww - width) / 2);
var top = Math.round((viewh - height) / 2) + scroll * speed * viewh;
$this.css({backgroundSize: width + 'px ' + height + 'px', backgroundPosition: left + 'px ' + top + 'px'});
});
setTimeout(function() {
$('[data-parallax]').triggerHandler('parallax-update');
}, 1500);
})(jQuery);
<section id="conosco" data-parallax="http://3.bp.blogspot.com/-KkC1gBb0dCI/VVY0l-CzfeI/AAAAAAAAAOE/aHz1bf3mECk/s320/parallax-contact.jpg" style="background-image: url(http://3.bp.blogspot.com/-KkC1gBb0dCI/VVY0l-CzfeI/AAAAAAAAAOE/aHz1bf3mECk/s320/parallax-contact.jpg); background-size: 1349px 906px; background-position: 0px -279px; background-repeat: repeat;">
<div class="container">
<div class="section-heading"><span>CSS ZILLA parallax scrolling</span>CSS ZILLA parallax scrolling</div>
<div class="row">
<div class="col-xs-12 col-lg-12 col-md-12 col-sm-12 text-left animated-in" data-animated="0">
<form action="#" method="post" target="hidden">
<span class="col-xs-12 col-lg-4 col-md-4 col-sm-6">
<input type="text" name="name" placeholder="Nome">
</span> <span class="col-xs-12 col-lg-4 col-md-4 col-sm-6">
<input type="email" name="name" placeholder="E-mail">
</span> <span class="col-xs-12 col-lg-4 col-md-4 col-sm-6">
<input type="text" name="name" placeholder="Assunto">
</span> <span class="col-xs-12 col-lg-4 col-md-4 col-sm-6">
<input type="text" name="name" placeholder="Telefone">
</span> <span class="col-xs-12 col-lg-4 col-md-4 col-sm-6">
<input type="text" name="name" placeholder="Digite aqui a palavra que aparece ao lado">
</span> <span class="col-xs-12 col-lg-4 col-md-4 col-sm-6">
<p class="capcha"><img src="img/chapcha.jpg" alt="chapcha"></p>
</span> <span class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
<textarea name="message">Mensagem</textarea>
</span> <span class="col-xs-12 col-lg-4 col-md-4 col-sm-6 col-lg-offset-4 col-md-offset-4 col-sm-offset-3 col-xs-offset-0">
<input type="submit" class="limpar" value="lIMPAR">
<input type="reset" class="evviar" value="ENVIAR">
</span>
</form>
</div>
</div>
</div>
</section>
<section id="conosco" data-parallax="http://3.bp.blogspot.com/-KkC1gBb0dCI/VVY0l-CzfeI/AAAAAAAAAOE/aHz1bf3mECk/s320/parallax-contact.jpg" style="background-image: url(http://3.bp.blogspot.com/-KkC1gBb0dCI/VVY0l-CzfeI/AAAAAAAAAOE/aHz1bf3mECk/s320/parallax-contact.jpg); background-size: 1349px 906px; background-position: 0px -279px; background-repeat: repeat;">
<div class="container">
<div class="section-heading"><span>CSS ZILLA parallax scrolling</span>CSS ZILLA parallax scrolling</div>
<div class="row">
<div class="col-xs-12 col-lg-12 col-md-12 col-sm-12 text-left animated-in" data-animated="0">
<form action="#" method="post" target="hidden">
<span class="col-xs-12 col-lg-4 col-md-4 col-sm-6">
<input type="text" name="name" placeholder="Nome">
</span> <span class="col-xs-12 col-lg-4 col-md-4 col-sm-6">
<input type="email" name="name" placeholder="E-mail">
</span> <span class="col-xs-12 col-lg-4 col-md-4 col-sm-6">
<input type="text" name="name" placeholder="Assunto">
</span> <span class="col-xs-12 col-lg-4 col-md-4 col-sm-6">
<input type="text" name="name" placeholder="Telefone">
</span> <span class="col-xs-12 col-lg-4 col-md-4 col-sm-6">
<input type="text" name="name" placeholder="Digite aqui a palavra que aparece ao lado">
</span> <span class="col-xs-12 col-lg-4 col-md-4 col-sm-6">
<p class="capcha"><img src="img/chapcha.jpg" alt="chapcha"></p>
</span> <span class="col-xs-12 col-lg-12 col-md-12 col-sm-12">
<textarea name="message">Mensagem</textarea>
</span> <span class="col-xs-12 col-lg-4 col-md-4 col-sm-6 col-lg-offset-4 col-md-offset-4 col-sm-offset-3 col-xs-offset-0">
<input type="submit" class="limpar" value="lIMPAR">
<input type="reset" class="evviar" value="ENVIAR">
</span>
</form>
</div>
</div>
</div>
</section>
#conosco {
padding: 500px 0px 500px 0;
text-align: center;
-webkit-box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.15);
box-shadow: inset 0 2px 0 0 rgba(0,0,0,0.15);
}