jQuery, CSS and HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/jquery.scrollfx/demo.css">

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>

<script>
  $(document).ready(function(){
    $('section, header').scrollFx({
      precision: 15,
      scaleElements: '.row',
      opacityElements: '.image'
    });
  });
</script>

</head>

<body>
<header id="top">
  <div class="container">
    <div class="row">
      <div class="col-xs-12">
        <h1>jquery<span class="hidden-sm hidden-xs">.</span><br><span class="text-success">scrollfx</span></h1>
        <p class="lead">A demo of effects as scroll down</p>
        <br>
        <div class="buttons">
          <a href="https://github.com/marksten/jquery.scrollfx" class="btn btn-lg btn-success">
            <i class="fa fa-github"></i>
            Download from github
          </a>
        </div>
      </div>
    </div>
  </div>
</header>

<section id="first" class="container-fluid">
  <div class="image"></div>

  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-6">
        <h2>The first part</h2>
        <hr>
        <p class="lead">
          Note the text scaling down change in background opacity as you scroll down
        </p>
        <a href="#top" class="btn btn-lg btn-primary" data-to-top>
          Scroll to top
          <i class="fa fa-chevron-top"></i>
        </a>
      </div>
    </div>
  </div>
</section>

<section id="second" class="container-fluid">
  <div class="image"></div>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h2>Section 2</h2>
        <hr>
        <p class="lead">
          Place some content here that you want to scale down
        </p>
        <a href="#top" class="btn btn-lg btn-primary" data-to-top>Scroll to top</a>
      </div>
    </div>
  </div>
</section>

<section id="third" class="container-fluid">
  <div class="image"></div>
  <div class="container">
    <div class="row">
      <div class="col-md-6 col-md-offset-6">
        <h2>Section 3</h2>
        <hr>
        <p class="lead">
          Also tested on smaller device
        </p>
        <a href="#top" class="btn btn-lg btn-primary" data-to-top>Scroll to top</a>
      </div>
    </div>
  </div>
</section>

<section id="fourth" class="container-fluid">
  <div class="image"></div>
  <div class="container">
    <div class="row">
      <div class="col-md-6">
        <h2>Section 4</h2>
        <hr>
        <p class="lead">
          Just set a few options and see the magic
        </p>
        <a href="#top" class="btn btn-lg btn-primary" data-to-top>Scroll to top</a>
      </div>
    </div>
  </div>
</section>

<footer>
</footer>

<script src="js/jquery.scrollfx/jquery.scrollfx.js"></script>
<script src="js/jquery.scrollfx/demo.js"></script>
</body>
</html>

jquery.
scrollfx

A demo of effects as scroll down

Download from github

The first part

Note the text scaling down change in background opacity as you scroll down

Scroll to top

Section 2

Place some content here that you want to scale down

Scroll to top

Section 3

Also tested on smaller device

Scroll to top

Section 4

Just set a few options and see the magic

Scroll to top