How do I make a CSS background GIF reset after hover

Question

I want to create a texture animation with the text but I can't figure out how to reload the CSS background GIF so the animation starts again when hovered again. Does somebody have an idea to do this with some JavaScript/jQuery? I can't find it anywhere.

It tried it like this but it won't reset the background:

$(document).ready(function() {
  $(".hoverClass").mouseleave(function() {
    $(this).removeClass("hoverClass");
    setTimeout(function() {
      $(this).addClass("hoverClass");
    });
  });
});

.navMenu2 li {
  color: #0e0e0e;
  font-size: 10rem;
  font-weight: 600;
  list-style-type: none;
  transition: background-image 2s ease-in-out;
}

.navMenu2 a {
  text-decoration: none;
  color: #0e0e0e;
}

.hoverClass:hover,
.hoverClass:focus {
  -webkit-text-fill-color: transparent;
  background: -webkit-linear-gradient(transparent, transparent), url(https://media.giphy.com/media/l2QDSTa6UcsRRSM5a/giphy.gif) repeat;
  background: linear-gradient(transparent, transparent), url(https://media.giphy.com/media/l2QDSTa6UcsRRSM5a/giphy.gif) repeat;
  -webkit-background-clip: text;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navMenu2">
  <ul>
    <li class="liHver hoverClass">
      <a href="index.html">
        <span class="jap">作業</span>
        <br>werk</a>
    </li>
  </ul>
</div>

JSFiddle

Possible duplicate of [Restart a gif animation without reloading the file](https://stackoverflow.com/questions/19831319/restart-a-gif-animation-without-reloading-the-file) — MrTux, Nov 06 '17 at 10:04

Pedram · Accepted Answer · 2017-11-06T10:43:28.010

2

You can't control repeat or reset an img like gif with js but you can do a trick.

First You should move all styles to js

Second You should add a random string end of the gif url to tell browser this gif isn't the previous one.

$(".navMenu2 li").mouseover(function() {
  var n = Date.now();
  // or   var n = Math.random();
  $(this).css({
    background: "linear-gradient(transparent, transparent), url(http://gifmaker.org/download/20171105-21-n9B1fxNwBctBCeMo/GIFMaker.org_ptEtRM.gif?ver=" + n + ") repeat",
    webkitTextFillColor: 'transparent',
    webkitBackgroundClip: 'text'
  });
});

$(".navMenu2 li").mouseleave(function() {
  $(this).css({
    background: "",
    webkitTextFillColor: '',
    webkitBackgroundClip: ''
  });
});

.navMenu2 li {
  color: #0e0e0e;
  font-size: 10rem;
  font-weight: 600;
  list-style-type: none;
  transition: background-image 2s ease;
}

.navMenu2 a {
  text-decoration: none;
  color: #0e0e0e;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="navMenu2">
  <ul>
    <li class="liHver"><a href="index.html"><span class="jap">作業</span><br>werk</a></li>
  </ul>
</div>

edited Nov 06 '17 at 10:43

answered Nov 06 '17 at 10:36

Pedram

15,766
10
44
73

@Rlour94 Your welcome. Glad to help you. Apart from technical discussion, this effect is really cool. It would be better if `gif` effect was repeated. – Pedram Nov 06 '17 at 11:00
1

Yeah with this gif a loop would be better, but i actually made this gif non-looping on purpose because the final effect im gonna use on my website is gonna make text disapear/apear like ink. Im gonna have to make the animation myself, but i think its gonna look nice:) – Rlour94 Nov 06 '17 at 11:35
Hey man, is there a way to do the same but with the gif on de website server? Because when i try this on my website the text will dissapear for a few seconds because he needs to load the gif. – Rlour94 Nov 07 '17 at 09:05
https://media.giphy.com/media/l2QDSTa6UcsRRSM5a/giphy.gif This is the gif i made and need to use. – Rlour94 Nov 07 '17 at 10:38
Unfortunately no, you can't do anything else in this case. – Pedram Nov 07 '17 at 10:51
1

Ah too bad:/ But thanks anyway. Do you also maybe know how to position the gif in the center of the li? I cant seem to figure that out. – Rlour94 Nov 07 '17 at 11:37
Did you try `background-position: center center;` ? – Pedram Nov 07 '17 at 11:52
1

Oh now it works, i put the center in "background". Thanks again! It looks great, i think ill just keep it this way and not worry about the delay. – Rlour94 Nov 07 '17 at 13:02

score 1 · Answer 2 · answered Nov 06 '17 at 10:09

1

Just add DOM reading command between two DOM writes. For example:

$(document).ready(function(){
  $(".hoverClass").mouseleave(function(){
    $(this).removeClass("hoverClass");
    this.offsetHeight;
    $(this).addClass("hoverClass");
  }); 
});

answered Nov 06 '17 at 10:09

I have very little understanding of DOM reading, but Im not sure thats the sollution to my problem. – Rlour94 Nov 06 '17 at 10:21
@Rlour94 Dont worry, it is the solution. Use it instead of setTimeout. – Nov 06 '17 at 10:35
Please add `snippet` or `fiddle` to show OP your answer works. but looks like it won't https://jsfiddle.net/jpmnuxw1/6/ – Pedram Nov 06 '17 at 10:41

How do I make a CSS background GIF reset after hover

2 Answers2