Q&A
ありがとうございます！
クリックして動作することは考えていないので、
こちらは使えなさそうです・・・
送っていただいたのにすみません＞＜
足跡が歩くgifアニメを作ったのですが、
それを指定の位置までスクロールしたら歩き始めるように
動作させたいです。
歩き終わったあとは、そのまま足跡が残るように表示させたいです。
いろいろ調べてみたのですが、
「javascriptでgifアニメを動作させる」というのが
なかなか見つからずここで質問させていただきます。
わかりやすく説明していただけると助かります。。。
↓gif画像貼りました。
回答3件
0
静止画と、gif画像の2つの画像を用意する必要がありますが、以下のように行うことができると思いますが、いかがでしょうか？
HTML
1<!DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="utf-8"> 5 <title>タイトル</title> 6 <style type="text/css"> 7 * { 8 margin: 0; 9 padding: 0; 10 } 11 12 .box { 13 width: 100%; 14 height: 500px; 15 } 16 </style> 17</head> 18<body> 19<div class="box"></div> 20<div class="box"></div> 21<img src="https://placehold.jp/3370f2/ffffff/150x150.png?text=%E9%9D%99%E6%AD%A2%E7%94%BB" id="image1"> 22<div class="box"></div> 23<div class="box"></div> 24<script> 25 var flag = false; 26 window.addEventListener("scroll", function () { 27 var rect = document.getElementById("image1").getBoundingClientRect(); 28 if ((Math.max((document.body.offsetHeight - (window.pageYOffset + window.innerHeight)), 0)) <= (rect.top + window.pageYOffset) && flag === false) { 29 document.getElementById("image1").src = "https://placehold.jp/f23333/ffffff/150x150.png?text=gif%E7%94%BB%E5%83%8F"; 30 flag = true; 31 } 32 }, false); 33</script> 34</body> 35</html>
投稿2017/05/03 10:37
総合スコア14731
0
【[JS]アニメーションgifにスタートとストップ機能をつけられるスクリプト -gifplayer | コリス】
http://coliss.com/articles/build-websites/operation/javascript/jquery-plugin-gifplayer.html
こういうものを使えば出来ると思います。
投稿2017/04/30 07:37
総合スコア69625
0
HTMLやgif画像を見ていないので、よくわからないのですが、あらかじめ足跡の静止画像を表示させておき、指定の位置までスクロールしたら、足跡が歩くアニメ画像に切り替える、という実装が可能です。
投稿2017/04/30 05:24
総合スコア1105
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。