使用css或javascript的视差横幅

我正在学习使用CSS或javascript创建视差横幅广告，我的灵感来自右侧滚动的这个演示，你会看到一个横幅出现，我想使用CSS或js创建相同的横幅

Js小提琴演示：

到目前为止，我已经尝试过了

/*内容视差部分*/
.视差过高{
背景：无重复滚动0 0#2581e8；
背景：无重复滚动0 0#2581e8b0；
填充：42px0；
颜色：#FFF；
} 
.视差高含量h3{
颜色：#FFF；
文本对齐：居中；
}
/*视差部分*/
.视差
最大宽度：932px；
最大高度：250px；
身高：100%；
宽度：100%；
填充底部：50px；
填充顶部：50px；
}
视频{
宽度：932px；
高度：250px；
身高：100%；
宽度：100%；
位置：固定；
排名：0；
z指数：-9999；
}
.视差h3{
颜色：#fff；
字体大小：76px；
字号：700；
文本对齐：居中；
文本转换：大写；
}
/*总务科*/
.集装箱{
保证金：0自动；
填充：0 12px；
}
.标题h2{
颜色：#fff；
字体系列：“PT Sans”，无衬线；
字体大小：32px；
保证金：0；
文本对齐：居中；
}
.标题{
字体大小：16px；
字体大小：300；
保证金：0；
颜色：#F6F3；
文本对齐：居中；
}

视频背景
响应设计
在所有主要设备上工作

同侧阴唇

Lorem ipsum dolor sit amet，是一位杰出的献身者。Nunc ac dapibus dolor。不要再做精英了，佩伦茨克·埃利芬德·里苏斯·尤伊斯莫，马蒂斯·森佩尔·里苏斯。高贵的前庭，
罗非鱼（turpis nisi consequat odio），在罗非鱼属和普卢斯属中。奥奇·维利特先生、奥纳雷·奎斯先生、非尼布先生。肘部虎鲸和乌龟同侧前庭
库雷；我不知道。不要让我们的生活充满欢乐。nisi porttitor tristique的Nullam sollicitudin erat酒店。不存在非爱欲，也不存在对生命的积累。塞德乌特莫里斯酒店
这是弗林斯和内科勒姆的故事。妊娠前庭无腔隙弓状肌。Fusce eu massa nisl。