Hi. I have this gif-logo in the Nav-bar at top and I want it to reload when the user scrolls down and then back up to the top. Is that possible?
Regards,
Staale
Have you tried changing its display setting to “none” for a brief moment? That should do the trick
Sorry for being a novice, but how would you go about to do that?
I have no problems showing you. Could you share your site’s read-only link? Go here if you don’t know how to do that.
Turns out, it did not do the trick. The gif’s timeline remains cached even when not displayed, meaning that it doesn’t stop and restart as it should.
I’m doing some research, and all the proper solutions I’m seeing involve javascript in some measure. It is definitively doable, but it’s not as easy as I thought. I have a work call in 10 minutes, I can come back to you in a few hours if it hasn’t been solved by then.
That would be great. Thanks for helping me with this. I’ve tried different solutions, but as I’m not a programmer, it is hard to find the right javascript that will actually do the trick.
I’m back. And I have no idea what’s happening. I would appreciate if someone with more experience with js custom code could help us figure out the issue.
This is the solution I’m trying to replicate. Nothing fancy, it simply resets the gif’s source upon click. And it works on paper, as demonstrated by this JS Fiddle.
I tried several things, but even the most basic one isn’t firing, as you can see: http://test-4-gifs.webflow.io/
This is the code I’m using, before the </body> tag. There is nothing else on the page.
<img id = "img"
src = "https://uploads-ssl.webflow.com/5b24120adcd52867299132f3/5b2412172e57c1a9f6c1b153_Webflow%20Gif%20Test.gif">
<script>
(function(){
var image = new Image();
image.src ='https://uploads-ssl.webflow.com/5b24120adcd52867299132f3/5b2412172e57c1a9f6c1b153_Webflow%20Gif%20Test.gif';
$('#img').click(function(){
$(this).attr('src',image.src);
});
});
</script>