There are several screenshots cut from the video, how can you make an animated image of them that would run only when you hover the cursor?
Priority: CSS, JS, everything else

  • go read what a slider is - ParanoidPanda
  • @ParanoidPanda I know what a slider is, and it also seems that it can be done without using a bulky code - Plush

3 answers 3

Well, here is the first thing that came to mind:

var cats = ["http://i.stack.imgur.com/y7lKj.jpg", "http://i.stack.imgur.com/Utqdx.jpg", "http://i.stack.imgur.com/Pj16W.jpg" ]; var t, counter = 0; var $image = $('.image'); $(".image").mouseover(function() { if (!t) { t = setInterval(function() { $image.attr('src', cats[counter]); counter = (counter + 1) % 3; }, 500); } }) $(".image").mouseout(function() { if (t) { clearInterval(t); t = null; } $image.attr('src', 'http://i.stack.imgur.com/Ho1KD.jpg'); }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <img class="image" src="http://i.stack.imgur.com/Ho1KD.jpg">

  • Tell me, what is responsible for speed? setInterval(... ,500); ? - Plush
  • @Plush, that's right. 500 in milliseconds indicates the frame rate (pictures) - LEQADA
  • @NickVolynkin, tried on Yosemite, Firefox 43 - works fine. If you put the cursor on a div, then the animation begins. - LEQADA
  • @NickVolynkin, you are probably embarrassed by the fact that the animation works on the whole div , and not just img . Put the class on img . Now it will only work on the picture. - LEQADA
  • Let's continue the discussion in the chat . - LEQADA 2:53

An order of magnitude easier can be done with a simple css using animation and its steps parameter. Here is an example :

 <div class="imgframe"> </div> 

 .imgframe { background: url(http://mintdesigncompany.com/wp-content/themes/mintymint/imgs/portfolio/work-edge-tl.png); width: 100px; height: 125px; background-size: cover; -webkit-animation: moving 3s steps(24) infinite; animation: moving 3s steps(24) infinite } @-webkit-keyframes moving { from { background-position: 0; } to { background-position: -100%; } } @keyframes moving { from { background-position: 0; } to { background-position: -100%; } }

  • That is, for the normal operation of your example, it is enough to put several screenshots in a row on one picture? - Plush
  • Yes. Why not? - NeedHate
  • There is not enough animation on hover, and not just animation. - Vadim Ovchinnikov

The solution is in pure CSS, it works only in webkit-browsers, since the animation of the background-image property is supported only there:

 .image { background-image: url(http://i.stack.imgur.com/Ho1KD.jpg); width: 200px; height: 200px; background-size: cover; } .image:hover { animation: moving 3s 1s infinite; } @keyframes moving { 0% { background-image: url("http://i.stack.imgur.com/y7lKj.jpg"); } 50% { background-image: url("http://i.stack.imgur.com/Utqdx.jpg"); } 100% { background-image: url("http://i.stack.imgur.com/Pj16W.jpg") } } 
 <div class="image"> </div>

  • the animation doesn't work - Plush
  • @Plush all works for me at hover, strange. - Vadim Ovchinnikov
  • @Plush and which browser? - Vadim Ovchinnikov
  • Opened in Firefox - Plush
  • @Plush Everything works in Chrome, now I’ll look into Firefox - Vadim Ovchinnikov