How to Make a Simple Parallax

Question

I need to make an effect Parallax where this the image of a game character and this the following phrase we play everything ... only that I tried everything and nothing works follows one of the links I used :

http://tableless.com.br/parallax-simples-com-jquery-e-css/

has as a score Parallax smooth in this image only in it follows an example of how I wanted it to stay:

http://themeforest.net/item/blend-multipurpose-responsive-website-template/full_screen_preview/11380432

html,
body {
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
ul li {
  list-style-type: none;
}
.text-center {
  text-align: center !important;
}
.menu {
  text-align: center;
}
.menu li {
  display: inline;
}
.menu li a {
  margin: 10px;
  color: #fff;
  font-family: Gabriola;
  font-size: 1.5em;
}
.menu li a:hover {
  color: #f80;
}
.seta-menu {
  margin-top: 3%;
}
#texto-header {
  margin-top: 20%;
}
header h1 {
  color: #fff;
  text-align: center;
  font-family: Gabriola;
  font-size: 5em;
}
header strong {
  color: #f80;
}
header p {
  color: #fff;
  text-align: center;
  font-family: gabriola;
  font-size: 1.2em;
  margin-top: -3%;
}
.botao-circulo {
  background: transparent;
  width: 50px;
  height: 50px;
  -webkit-transform: scale(1.5);
  -o-transform: scale(1.5);
  -ms-transform: scale(1.5);
  -moz-transform: scale(1.5);
  transform: scale(1.5);
  border-radius: 50px;
  border: 1px solid #fff;
  position: absolute;
  margin-top: 10%;
}
.botao-circulo:hover {
  background: rgba(255, 255, 255, 0.06);
}
.botao-circulo img {
  -webkit-transform: scale(0.2);
  -o-transform: scale(0.2);
  -ms-transform: scale(0.2);
  -moz-transform: scale(0.2);
  transform: scale(0.2);
  margin-left: -42px;
  margin-top: -17px;
}
#video {
  width: 100%;
  height: 100%;
}
video {
  height: 100%;
  width: 100%;
  z-index: -100;
  position: absolute;
  top: 0;
  left: 0;
  -webkit-transform: scaley(1.72);
  -o-transform: scaley(1.72);
  -ms-transform: scaley(1.72);
  -moz-transform: scaley(1.72);
  transform: scaley(1.72);
}
#bg-video {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -50;
  width: 100%;
  height: 100%;
}
#buttonbar #volDn {
  border-radius: 100%;
  border: 4px solid #fff;
  cursor: pointer;
  -webkit-transform: scale(0.3);
  -o-transform: scale(0.3);
  -ms-transform: scale(0.3);
  -moz-transform: scale(0.3);
  transform: scale(0.3);
  background: transparent;
  outline: none;
}
#buttonbar #volDn:hover {
  background: rgba(255, 255, 255, 0.06);
  outline: none;
}
#menos {
  -webkit-transform: scale(0.3);
  -o-transform: scale(0.3);
  -ms-transform: scale(0.3);
  -moz-transform: scale(0.3);
  transform: scale(0.3);
  outline: none;
}
#buttonbar #volUp {
  border-radius: 100%;
  border: 4px solid #fff;
  cursor: pointer;
  -webkit-transform: scale(0.3);
  -o-transform: scale(0.3);
  -ms-transform: scale(0.3);
  -moz-transform: scale(0.3);
  transform: scale(0.3);
  background: transparent;
  outline: none;
}
#buttonbar #volUp:hover {
  background: rgba(255, 255, 255, 0.06);
}
#buttonbar #btn-mais {
  -webkit-transform: scale(0.3);
  -o-transform: scale(0.3);
  -ms-transform: scale(0.3);
  -moz-transform: scale(0.3);
  transform: scale(0.3);
}
#buttonbar #mute {
  border-radius: 100%;
  border: 4px solid #fff;
  cursor: pointer;
  -webkit-transform: scale(0.3);
  -o-transform: scale(0.3);
  -ms-transform: scale(0.3);
  -moz-transform: scale(0.3);
  transform: scale(0.3);
  background: transparent;
  outline: none;
}
#buttonbar #mute:hover {
  background: rgba(255, 255, 255, 0.06);
}
#buttonbar #btn-mudo {
  -webkit-transform: scale(0.5);
  -o-transform: scale(0.5);
  -ms-transform: scale(0.5);
  -moz-transform: scale(0.5);
  transform: scale(0.5);
}
#buttonbar {
  position: absolute;
  bottom: 3%;
  right: 0;
  margin-right: 5%;
  outline: none;
}
#buttonbar button {
  margin: -30px;
  outline: none;
}
/***************************************************************************

									Corpo-1

****************************************************************************/

.corpo-1 h1 {
  color: #000;
  text-align: center;
  font-family: Gabriola;
  font-size: 2.8em;
  font-weight: bold;
  margin-top: 40%;
}
.corpo-1 p {
  color: #000;
  text-align: center;
  font-family: Gabriola;
  font-size: 1.2em;
  margin-top: -2%;
}
.linha-titulo {
  width: 30%;
  height: 1.9px;
  border: none;
  background: #000;
}
.tamanho {
  -webkit-transform: scale(0.6);
  -o-transform: scale(0.6);
  -ms-transform: scale(0.6);
  -moz-transform: scale(0.6);
  transform: scale(0.6);
}
.info h1 {
  margin-top: -3%;
}
.info p {
  line-height: 10px;
}
.info {
  text-align: center;
  margin-top: 5%;
}
.info li {
  display: inline;
  float: left;
  width: 33%;
}
#btn-info {
  border: 3px solid #000;
  border-radius: 5px;
  width: 220px;
  height: 50px;
  text-align: center;
  font-family: Gabriola;
  font-size: 1.5em;
  color: #000;
  background: transparent;
  cursor: pointer;
  margin-top: 5%;
  clear: both;
}
#btn-info:hover {
  background: #000;
  color: #fff;
}
/***************************************************************************

									Corpo-2

****************************************************************************/

.corpo-2 {
  background-image: url(http://fc09.deviantart.net/fs71/f/2013/360/1/0/jinx__bang_bang_galore___league_of_legends_by_eddy_shinjuku-d6z60yc.jpg);
  width: 100%;
  clear: both;
  padding: 6em 0 4em 0;
}
.corpo-2 h1 {
  color: #fff;
  text-indent: 100px;
  font-family: Gabriola;
  font-size: 5em;
}
.corpo-2 > p {
  color: #fff;
  text-align: left;
  font-family: Gabriola;
  font-size: 1.2em;
  margin-left: 8%;
  margin-top: -4%;
}
.corpo-2 strong {
  color: #f80;
}
#btn-jogos {
  background-color: transparent;
  color: #fff;
  width: 220px;
  height: 50px;
  border: 3px solid #fff;
  text-align: center;
  margin-left: 15%;
  margin-top: 1%;
  border-radius: 6px;
  font-family: Gabriola;
  font-size: 1.7em;
  outline: none;
}
#btn-jogos:hover {
  background-color: #fff;
  color: #000;
}

<!doctype html>

<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Nova Era Team</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="description" content="" />
  <meta name="keywords" content="" />
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/style.css">
  <script src="js/video.js"></script>
</head>

<body onload="init();">
  <header>
    <ul class="menu">
      <li><a href="">Home</a>
      </li>
      <li><a href="">Sobre</a>
      </li>
      <li><a href="">Games</a>
      </li>
      <li><a href="">Eventos</a>
      </li>
      <li><a href="">Team</a>
      </li>
      <li><a href="">Contato</a>
      </li>
      <li><a href="">Ajuda</a>
      </li>
      <li><a href="">Forum</a>
      </li>
    </ul>

    <p class="text-center">

    </p>


    <div id="video">
      <video id="Video1" width="100%" height="100%" loop>
        <source src="video/League-warrios.mp4" type="video/mp4" />
      </video>
    </div>

    <div id="texto-header">
      <h1>Lorem Ipsum <strong>Dolor</strong></h1>
      <p>dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
        <br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus, mollis sit amet vehicula id, volutpat eget mauris.</p>
    </div>

    <div id="buttonbar">
      <button id="volDn">
        <img src="images/video/menos.png" id="menos" />
      </button>
      <button id="volUp">
        <img src="images/video/mais.png" id="btn-mais" />
      </button>
      <button id="mute">
        <img src="images/video/som.png" id="btn-mudo" />
      </button>
    </div>
  </header>

  <section class="corpo-1">
    <h1>Lorem ipsum dolor adipiscing<br />
            amet dolor consequat</h1>

    <p>Adipiscing a commodo ante nunc accumsan interdum mi ante adipiscing. A nunc lobortis non nisl amet vis volutpat aclacus nascetur ac non.
      <br/>Lorem curae eu ante amet sapien in tempus ac. Adipiscing id accumsan adipiscing ipsum.</p>

    <hr class="linha-titulo">
    <!-- <img src="images/logo-transp.png" /> -->
    <ul class="info">
      <li>
        <img src="images/headset.png" alt="" class="tamanho" />
        <h1>Lorem Ipsum Dolor</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
        <p>Vestibulum at purus sed erat suscipit.</p>
        <p>Cras facilisis viverra wisi. Class sociosqu...</p>
      </li>

      <li>
        <img src="images/controle.png" alt="" class="tamanho" />
        <h1>Lorem Ipsum Dolor</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
        <p>Vestibulum at purus sed erat suscipit.</p>
        <p>Cras facilisis viverra wisi. Class sociosqu...</p>
      </li>

      <li>
        <img src="images/notebook.png" alt="" class="tamanho" />
        <h1>Lorem Ipsum Dolor</h1>
        <p>Lorem ipsum dolor sit amet, consectetuer elit.</p>
        <p>Vestibulum at purus sed erat suscipit.</p>
        <p>Cras facilisis viverra wisi. Class sociosqu...</p>
      </li>
    </ul>

    <p class="text-center">
      <a href="#">
        <button id="btn-info">leia mais ...</button>
      </a>
    </p>
  </section>



  <section class="corpo-2">
    <h1 class="jogos-nomes">Jogamas de tudo <strong class="slideText">Mobas</strong></h1>

    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
      <br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus,
      <br>mollis sit amet vehicula id, volutpat eget mauris. Lorem ipsum dolor sit amet
      <br>consectetur adipiscing elit. Sed at risus neque. Cras sit amet ligula ut justo commodo
      <br>porta id ut enim. Nulla est lectus, mollis sit amet vehicula id, volutpat eget mauris.
      <br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed at risus neque.
      <br>Cras sit amet ligula ut justo commodo porta id ut enim. Nulla est lectus, mollis sit amet
      <br>vehicula id, volutpat eget mauris.Lorem ipsum dolor sit amet, consectetur
    </p>

    <button id="btn-jogos">Conheça nossos jogos ...</button>
  </section>

</body>

</html>