詳しい人求む！

リンクボタンにgifアニメを使えるか

解決済

質問者：くろねこ9625
質問日時：2021/09/07 00:06
回答数：1件

webサイトののリンクボタンにgifアニメを使うことは可能でしょうか。

ボタンA
↓
（ホバー時）ボタンB
↓
（クリック）gifアニメ再生
↓
（再生が終わってから）リンク先へ遷移

という動きにしたいのですが、webデザインの勉強を始めたばかりで、やり方が分かりません。
htmlとcssの記述の仕方を教えていただけるとありがたいです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (1件)

ベストアンサー優先
最新から表示
回答順に表示

No.1ベストアンサー

回答者： sukitaro
回答日時：2021/09/07 13:33

htmlとcssだけではできなかったので、

javascriptでページの移動を遅らせて、
その間にgifを表示するということを
してみました。

sample.gifというgifアニメと、
anotherpage.htmlというリンク先ファイルを、
以下のhtmlファイルと同じフォルダに入れてから
実行してみてください。

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>gif-anime</title>
<style>
.gif{
margin:10% auto;
width:300px;
height:300px;
}
.btn {
background-color: #45d;
color: #fff;
}
.btn>.b {
display: none;
}
.btn:enabled:hover {
background-color: #d45;
}
.btn:enabled:hover>.a {
display: none;
}
.btn:enabled:hover>.b {
display: inline;
}
.btn:disabled {
background-color: #333;
color:#aaa;
}
</style>
</head>
<body>
<button id="btn" class="btn" disabled>ボタン<span class="a">A</span><span class="b">B</span></button>
<img src="sample.gif" id="gif" class="gif" style="display:none;"/>
<script>
const delayTime = 3000, // 待ち時間（ミリ秒）
linkURL = 'anotherpage.html'; // リンク先URL

const btn = document.getElementById('btn'),
gif = document.getElementById('gif');

gif.addEventListener('load', () => { // 画像が読み込まれたら
btn.disabled = false; // ボタンを押せるようにする
btn.addEventListener('click', () => { // クリックされたら
gif.style.display = 'block'; // gifを表示する
window.setTimeout(()=>{ // 待ち時間分遅らせる
location.href = linkURL; // リンク先へ飛ぶ
},delayTime);
}, false);
}, false);
</script>
</body>
</html>