使用CSS或JavaScript的视差横幅

如何解决使用CSS或JavaScript的视差横幅

我正在学习使用CSS或javascript制作Parallax横幅广告，此演示启发了我Parallax banner，在右侧滚动，您会看到一个横幅出现，我想使用CSS或js，

Js Fiddle演示：Live demo

到目前为止，这是我尝试过的

/* Content Parallax Section*/
.ParallaxContent {
    background: none repeat scroll 0 0 #2581e8;
    background: none repeat scroll 0 0 #2581e8b0;
    padding: 42px 0;
    color:#FFF; 
} 
.ParallaxContent h3{
  color:#FFF;   
  text-align:center;
}


/* Video Parallax Section*/
.ParallaxVideo{ 
  max-width: 932px;
  max-height: 250px;
  height: 100%;
  width: 100%;
  padding-bottom: 50px;
  padding-top: 50px; 
}
video{ 
  width: 932px;
  height: 250px;
  height: 100%;
  width: 100%;
  position: fixed;
  top:0;
  z-index: -9999;
}
.ParallaxVideo h3 {
    color: #fff;
    font-size: 76px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
}


/* General Section*/
.container {
  margin: 0 auto;
  padding:0 12px;
}
.headlines h2 {
    color: #fff;
    font-family: "PT Sans",sans-serif;
    font-size: 32px;
    margin: 0;
  text-align: center;
}
.headlines p {
    font-size: 16px;
    font-weight: 300;
    margin: 0;
  color:#f6f3f3;
  text-align: center;
}

<div class="main">
    <!-- Top Navigation -->
    <div class="cctop clearfix"></div>

    <div class="wrapper">
        <div class="ccparallaxeff">
            <div class="ParallaxVideo">
                <video autoplay muted loop>
                    <source src="videos/test.mp4" type="video/mp4" />
                    <source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg" />
                </video>
                <h3>Video Background</h3>
            </div>

            <div class="ParallaxContent">
                <div class="container">
                    <div class="headlines">
                        <h3>Responisve Design</h3>
                        <p>Work on all major devices</p>
                    </div>
                    <h2>Lorem Ipsum Dolor</h2>
                    <p>
                        Lorem ipsum dolor sit amet,consectetur adipiscing elit. Nunc ac dapibus dolor. Donec est elit,pellentesque eleifend risus euismod,mattis semper risus. Vestibulum dignissim,velit lacinia viverra bibendum,turpis nisi consequat odio,in rhoncus est purus a sem. Praesent orci velit,laoreet vitae ornare quis,pretium non nibh. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia
                        Curae; Nullam quis volutpat mi. Donec cursus tincidunt quam vitae convallis. Nullam sollicitudin erat at nisi porttitor tristique. Nulla non eros eget nulla accumsan malesuada vitae eget tellus. Sed ut mauris
                        ut dolor tincidunt fringilla et nec lorem. Phasellus non lacus sodales arcu vestibulum gravida. Fusce eu massa nisl.
                    </p>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- /container -->   

要获得与此演示Parallax Banner Demo相同的横幅，我需要做什么？