CSS伪类和JQuery Parallax效果导致闪烁

时间:2016-05-12 01:39:58

标签: jquery css3 parallax

我正在使用parallax.js plugin进行视差效果。我有一些用CSS创建的黑色三角形覆盖了我正在进行视差效果的标题div的一部分。我注意到当我向下滚动页面时,CSS三角形闪烁。你可以在jsfiddle中看到这一点。这个问题在IE和FireFox中非常明显。

导致此问题的原因是什么?是否可以解决此问题?

CSS代码:

body { background-color: #333; }
#header { background: transparent no-repeat center bottom; position: relative; height: 100%; background-size: cover; overflow: hidden; }

.big-triangle:after,.big-triangle:before {
content:'';
position:absolute;
bottom:0;
width:50%;
z-index:100;
border-bottom:75px solid black;
-moz-transform:rotate(0.000001deg);
-webkit-transform:rotate(0.000001deg);
-o-transform:rotate(0.000001deg);
-ms-transform:rotate(0.000001deg);
transform:rotate(0.000001deg);}

.big-triangle:before{
right:50%;
border-right:1000px solid transparent;
border-left:1000px solid;}

.big-triangle:after{
left:50%;
border-left:1000px solid transparent;
border-right:1000px solid;}

1 个答案:

答案 0 :(得分:0)

我最终使用纯CSS视差技术解决了这个问题。指向tutorial is here

的链接