javascript - 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

因为你已经对 div 应用了“位置：固定”，所以它将以绝对定位呈现。因此，如果要对齐文档上的文本，则需要将“宽度”设置为 100%。

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

jsfiddle 演示

希望这会有所帮助。