Skrollr淡出文本

Question

我正试图淡入淡出并使用skrollr淡出文本。以下是代码段

<div id="style" data-100="opacity:0;" data-600="opacity:1;" data-700="opacity:0;">
      Howdy World
 </div>

CSS如下

#style{
    font-size: 80px;
    color: white;
    text-align: center;
    position: fixed;
}

淡入淡出正在按预期工作。但是文本没有与中心对齐。 我应该使用具有数据属性的位置来实现这一点，或者我在哪里出错。

Answer 1

是的，您可以使用数据属性来实现此目的。

我创作了JsFiddle http://jsfiddle.net/anjum121/zkym4/

<div id="style" data-100="opacity:0; left:25%;"  data-600="opacity:1;left:25%;" data-700="opacity:0;left:25%;" >
  Howdy World

Answer 2

因为您已将“position：fixed”应用于div，所以它将以绝对定位呈现。因此，如果要在文档上对齐文本，则需要将“宽度”设置为100％。

 #style{
   font-size: 80px;
   color: white;
   text-align: center;
   position: fixed;
   width: 100%;
 }

jsfiddle demo

希望这有用。