0

I am trying to make animated color change on text, but I got stucked with this problem: in specification is, that color should be changed on hover like "loading". From bottom of the text to top, slowly. Can anyone please help me, if that thing is even possible and how?

Thank you very much!

H Sturma
  • 301
  • 4
  • 17
  • 2
    can you post the code ? – Mannan Bahelim Sep 09 '16 at 13:00
  • so you want to animate text color change not all at once but from bottom to top or side to side? – depperm Sep 09 '16 at 13:07
  • Just looking around leads me to text gradients. http://stackoverflow.com/questions/39412019/animated-color-change could be a start. Then you need to jquery animate them – Richard Housham Sep 09 '16 at 13:18
  • Getting closer! http://www.jqueryscript.net/text/Simple-jQuery-Plugin-For-Text-Gradient-Effect-pxgradient.html – Richard Housham Sep 09 '16 at 13:20
  • @RichardHousham that link is to here – depperm Sep 09 '16 at 13:20
  • See https://codepen.io/giana/pen/RPdLaQ for a solution by Giana. – Hubert Grzeskowiak Sep 09 '16 at 13:43
  • Possible duplicate of [css text gradient](http://stackoverflow.com/questions/8384751/css-text-gradient) – Hubert Grzeskowiak Sep 09 '16 at 13:48
  • @HubertGrzeskowiak I don't think it could be a solution. It should look like: original text color is white. but on "mouseover" color should change with animation, that second color (blue) comes from bottom of the text and slowly goes to the top, in the end, whole text is blue. – H Sturma Sep 09 '16 at 13:53
  • 1
    I fear this is currently not easily possible with CSS. Your best chance would be an SVG text. SVG supports text gradients out of the box and they can be animated using JS. For a pure HTML, CSS, JS solution you'll need to do really nasty and hacky things. Do yourself a favor and change the planned design a little. E.g. make the background of the button have a gradient or use no gradients at all. – Hubert Grzeskowiak Sep 09 '16 at 14:18

1 Answers1

2

One way that seems to be a bit of a hack is to have each letter in it's own span and animate each separately

$('.animate').each(function() {
  $('#'+$(this).attr('id')).animate({ color: "#FF0000" }, parseInt($(this).attr('id').substring(1)));
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script   src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"   integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="   crossorigin="anonymous"></script>



<span class="animate" id="a1000">A</span><span class="animate" id="a2000">N</span><span class="animate" id="a3000">I</span><span class="animate" id="a4000">M</span><span class="animate" id="a5000">A</span><span class="animate" id="a6000">T</span><span class="animate" id="a7000">E</span>

And if you don't want the time in the id use the index

$('.animate').each(function(index) {
  $('#'+$(this).attr('id')).animate({ color: "#FF0000" }, index*1000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script   src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"   integrity="sha256-eGE6blurk5sHj+rmkfsGYeKyZx3M4bG+ZlFyA7Kns7E="   crossorigin="anonymous"></script>



<span class="animate" id="asdf">A</span><span class="animate" id="asdfge">N</span><span class="animate" id="erv">I</span><span class="animate" id="srbfd">M</span><span class="animate" id="yutj">A</span><span class="animate" id="a6werg000">T</span><span class="animate" id="dgfd">E</span>

EDIT

One method to do bottom to top animation is to use svg animation

<svg width="500" height="300" viewBox="0 0 1000 300">
  <defs>
    <linearGradient id="skyGradient" x1="100%" y1="100%">
      <stop offset="0%" stop-color="blue" stop-opacity=".5">
        <animate attributeName="stop-color" values="white;lightblue;blue;blue;blue;blue" dur="10s" repeatCount="indefinite" />
      </stop>
      <stop offset="100%" stop-color="blue" stop-opacity=".5">
        <animate attributeName="stop-color" values="white;white;lightblue;lightblue;blue;blue" dur="10s" repeatCount="indefinite" />       
      </stop>
    </linearGradient>
  </defs>
  <text id='message' x="0" y="0" font-family="Verdana" font-size="55" fill="url(#skyGradient)">
    Hello, out there
  </text>
</svg>
depperm
  • 10,606
  • 4
  • 43
  • 67