javascript - 使用 css 或 javascript 的视差横幅

Question

我正在学习使用 CSS 或 javascript 创建视差横幅广告，我受到此演示的启发，视差横幅在右侧滚动你会看到一个横幅，我想使用 CSS 或 js 创建相同的横幅，

Js Fiddle 演示：现场演示

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

/* 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

标签： javascripthtmlcsscss-selectors