Блог

Главная - Вопросы по программированию - Перемещение текста во время анимации одного слова

Перемещение текста во время анимации одного слова

#javascript #jquery #html #css #frontend

#javascript #jquery #HTML #css #интерфейс

Вопрос:

Я работаю над анимацией текстового элемента.

Элемент изменяет одну работу с анимацией. Очень похоже на этот пример. http://www.thepetedesign.com/demos/jquery_super_simple_text_rotator_demo.html

Дело в том, что мне не нравится, что когда я меняю одно слово, другие слова вокруг него резко меняются. Я пытаюсь использовать эффект, при котором другие слова, которые перемещаются, смещаются приятным образом. Как в этом примере.

http://www.thepetedesign.com/demos/jquery_super_simple_text_rotator_demo.html

Кто-нибудь знает, как это сделать? или свяжите меня с соответствующим решением?

Я использую HTML, CSS и JS

Комментарии:

1. сначала покажите нам, что вы пробовали, и сделайте Скрипку

Ответ №1:

Могут быть и другие способы сделать это, но наиболее последовательный кроссбраузерный способ сделать это, о котором я могу думать, это. Это некоторые рекомендации, но примеры кода были бы полезны.

Вам нужно, чтобы анимированное слово было заключено в дополнительный span . Затем вы захотите определить ширину внешнего интервала как ширину внутреннего интервала перед анимацией. Вы можете сделать это с помощью CSS, если знаете, какой будет ширина, или вы можете сделать это динамически следующим образом:

 $(outerSelector).width( $(innerSelector).width()   'px');

Анимируйте текст, затем анимируйте изменение ширины:

 $(outerSelector).animate({width: $(innerSelector).width()  'px'}, 500);

Это действительно работает только для уменьшения размера. Вы можете использовать этот метод для увеличения размера слова, но сначала вам нужно знать конечную ширину слова. Тогда вы могли бы просто иметь один интервал и сделать это:

 $(selector).animate({width:newWidth}, 500);

Если вы не беспокоитесь о кроссбраузерной совместимости или можете предположить, что у всех пользователей сайта будет браузер с поддержкой CSS 3, вы можете сделать это с помощью CSS:

 selector {
    transition: width 0.5s;
}

Затем для сокращения текста вам нужно будет снова установить ширину внешнего интервала, как указано выше, но после анимации текста вы можете просто сделать это:

 $(outerSelector).width( $(innerSelector).width()   'px');

Это связано с той же проблемой, что и необходимость заранее знать эту ширину для перехода к более длинному тексту. Вы можете узнать ширину, используя другой интервал с идентичным текстом.

 .copy {
    position: absolute;
    left: -100%;
}

Затем вы можете получить ширину скопированной версии и использовать ее в качестве новой ширины для анимации.

Метки: