https://jsfiddle.net/mrvyw1m3/
I am using CSS to clip a background GIF to text and encountering an issue. To ensure the GIF starts from the beginning on hover, I added a random string to the URL which causes a delay in displaying the GIF. During this delay, the text momentarily disappears before the GIF appears.
Is there a way to achieve this effect without the text disappearing before the GIF loads?
$(".navMenu2 li").mouseenter(function() {
var n = Date.now();
// or var n = Math.random();
$(this).css({
background: "linear-gradient(transparent, transparent), url(https://media.giphy.com/media/l2QDSTa6UcsRRSM5a/giphy.gif?ver=" + n + ") center",
webkitTextFillColor: 'transparent',
webkitBackgroundClip: 'text'
});
});
$(".navMenu2 li").mouseleave(function() {
$(this).css({
background: "",
webkitTextFillColor: '',
webkitBackgroundClip: ''
});
});