Скроллр исчезает из текста

Question

Скроллр исчезает из текста

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 с атрибутами данных для достижения этого или где я, я ошибаюсь.

Balaji Srinivasan 18 фев. 2014, в 04:50

Источник

Теги:

javascript

html

css

skrollr

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

Anjum.... 18 фев. 2014, в 01:21

0

Я попытался использовать левые атрибуты с процентами. Это работало как шарм. У меня есть пояснение о том, что 25% это будет то же самое, что выравнивание по центру, или это похоже на перемещение div в положение 25% вправо от левой стороны экрана.
Balaji Srinivasan 18 фев. 2014, в 06:49

Ещё вопросы

Я попытался использовать левые атрибуты с процентами. Это работало как шарм. У меня есть пояснение о том, что 25% это будет то же самое, что выравнивание по центру, или это похоже на перемещение div в положение 25% вправо от левой стороны экрана.

Chickenrice · Accepted Answer · 2014-02-18T02-47-00.000Z

Поскольку вы применили "положение: фиксированное" к div, оно будет отображаться в абсолютном позиционировании. Поэтому вам нужно установить "width" на 100%, если вы хотите выровнять текст в документе.

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

jsfiddle demo

Надеюсь, это полезно.

@Chikenrice Изменение ширины до 100%, помогите мне. Также попробовал решение, представленное ниже. Оба обеспечивают ожидаемый результат. Благодарю вас