JSFiddle - React, Tailwind, and code Playground

by ankit saxena

HTML

<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...

CSS

#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);
}

JavaScript

(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);