0

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;
}

フェードインとフェードアウトは期待どおりに機能しています。しかし、テキストは中央に配置されていません。これを達成するためにデータ属性で Position を使用する必要がありますか、それともどこで間違っているのでしょうか。

4

2 に答える 2

2

はい、これを達成するためにデータ属性を使用できます。

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

于 2014-02-18T03:52:24.133 に答える
1

div に「position: fixed」を適用したため、絶対位置でレンダリングされます。したがって、ドキュメントのテキストを揃える場合は、「幅」を 100% に設定する必要があります。

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

jsfiddle デモ

これが役に立てば幸いです。

于 2014-02-18T04:15:38.423 に答える