Gif-Videos abspielen lassen mit Ankerpunkten
Konkret möchte ich auf einer Seite gifs einbauen, die sich mit Ankerpunkten abspielen lassen. Z. B.: Ich setze einen Ankerpunkt in die Mitte des Bildschirmes und einen Ankerpunkt in die Mitte des gifs, wenn sich dann die Ankerpunkte treffen (z.B.: beim runterscrollen der Seite) wird das gif abgespielt bis es vorbei ist. Beim nächsten gif genau das Gleiche. Also es soll nicht abrupt Enden, wenn die Ankerpunkte sich nicht mehr berühren, sondern noch zu Ende abspielen, auch wenn schon das nächste gif den Ankerpunkt berührt hat.
Gerade sieht es auf der Seite so aus, dass die gifs sich im Loop abspielen und nur zu sehen sind wenn man mit der Maus drüber fährt. Ich habe darüber schwarze Rechtecke (als png-Bilder) gesetzt die, die ganze Zeit zu sehen sind und dementsprechend verschwinden wenn man mit der Maus drauf kommt.
Der hier verwendete Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<script src="/js_webseite/libgif.min.js"></script>
<script src="/js_webseite/rubbable.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
<title>
Example gif
</title>
</head>
<body>
<center>
<h1>Example with controls and no auto-play</h1>
<img id="example1" rel:animated_src="/image/rub_test.gif" rel:auto_play="0" width="467" height="375" />
<br>
<script>
var sup1 = new SuperGif({ gif: document.getElementById('example1') } );
sup1.load();
</script>
<a href="javascript:;" onmousedown="sup1.pause(); return false;">Pause</a> |
<a href="javascript:;" onmousedown="sup1.play(); return false;">Play</a> |
<a href="javascript:;" onmousedown="sup1.move_to(0); return false;">Restart</a> |
<a href="javascript:;" onmousedown="sup1.move_relative(1); return false;">Step forward</a> |
<a href="javascript:;" onmousedown="sup1.move_relative(-1); return false;">Step back</a>
</body>
</html>