Javascript expand text fade-in

Я искал какой-то эффект затухания, используя Javascript, JQuery или просто CSS, в котором мой текст начнет очень мало и медленно увеличится, пока не достигнет конечного размера шрифта (в течение времени, которое я укажу). Я попытался вручную изменить размер шрифта каждую десятую секунды, но я уверен, что есть более простой способ сделать это, чем это.Javascript expand text fade-in

Любые предложения?

источник

2015-10-02 user1307079

http://jsfiddle.net/6zu4ouny/1/ Что-то вроде этого? Вы можете анимировать непрозрачность, тоже .... – sinisake

Я очень рекомендую GreenSock JS как невероятно простой способ справиться с анимировать любые HTML DOM элементов.

Пример очень простой, но эффективной линии анимации кода внутри тега JavaScript или файла будет следующим:

TweenLite.from("#myTextElement", 1, {scaleX: 0.1, scaleY: 0.1, alpha: 0});

Пример выше - по одной второй - живой #myTextElement (который может быть самый любой элемент с идентификатором «myTextElement») от шкалы от 10% до существующего значения CSS шкалы и от альфы 0% до существующего значения CSS прозрачности.

В отличие от этого, вместо TweenLite.to будет иметь обратный эффект.

источник

2015-10-02 00:58:21 DapperDirewolf

jQuery-UI и CSS упрощают работу. Вот небольшая демоверсия, которая делает размер шрифта для текста увеличенным до 5 × 5 000 мс (5 секунд), используя смягчение, которое делает его более гладким. Я также снизил скорость анимации до менее половины значения по умолчанию (что более чем удваивает частоту кадров).

<html lang="en"> 
<head> 
    <title>jQuery UI is Fun!</title> 
    <script src="//code.jquery.com/jquery-1.10.2.js"></script> 
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script> 
    <style> 
    #element { font-size: 1.0em; } 
    </style> 

    <script> 
    jQuery.fx.interval = 5; 
    $(function() { 
    $("#element").animate({ 
      "font-size": "5.0em" 
     }, 5000, "easeOutQuint"); 
    }); 
    </script> 
</head> 
<body> 
    <div id="element">This is my sample text.</div> 
</body> 
</html>

Вы можете прочитать больше о функциональности одушевленного здесь: http://jqueryui.com/animate/

источник

2015-10-02 00:53:16

Я пробовал что-то вроде этого, но вы не получаете очень гладкую анимацию с анимацией размера шрифта + jQuery. – user1307079

Вы можете установить частоту кадров и алгоритм «ослабления», что сделает анимацию более гладкой. Частота кадров по умолчанию - 13 мс, но вы можете установить ее так, как вам нравится: 'jQuery.fx.interval = 5;' Кроме того, читайте больше об облегчении здесь: http://api.jqueryui.com/easings/ –

Javascript expand text fade-in

ответ

Смежные вопросы