アニメーション高度化

HTMLのCSSによってanimationを使って動的な表現をするとアピール度の高い情報発信をすることができます。そのとき、横方向に長い画像において空白が生じ、まだらっこしさを感じます。数珠のように隙間なく無限ループする表示を実現できましたので公開します。

CSSだけで数珠つなぎに無限ループするニュースティッカーを作ってみるを参考にしました。

制限事項など

公開される記事は取材、開発、確認などはローカル環境で行われれますが、公開サーバーにアップロードすると動作が異なり公開できる品質にならないことがあります。

このような場合、異なるサイトにアップロードしiframeで埋め込む方式があり、大方、解決方向に向かいますがこれも制限付きですれすれ合格ということもしばしばです。

iframeの最大横幅widthが500あるいは640の制限を受けることです。

多少の制限を受けながら、横長の集合画像を一つずつスキマなく描画するCSS、JavaScriptをまとめてみましたので公開します。

ねらい

30枚の超横長画像から1枚ずつ切り取って表示します。最後の画像を描画後に空白が生じることなく数珠つなぎに無限ループで表示されます。表示画像の上にカーソルをかざすと表示が一時的に停止します。カーソルが画像から離れると再開します。

サンプルコード

<style>				/* CSS */
.loopSlide {		/* マウスオーバーするとアニメーションが変化します */
	display:flex;
	width:204px;
	heigt:184px;
	overflow:hidden;
	background:#fff8ff;
	border:1px solid gold;
}
#first {
	animation: slide1 60s -30s linear infinite; animation-play-state:running;
}
#last2 {
	animation: slide2 60s linear infinite; animation-play-state:running;
}
@keyframes slide1 {
  0% {transform: translateX(100%);}
  to {transform: translateX(-100%);}
}
@keyframes slide2 {
  0% {transform: translateX(0);}
  to {transform: translateX(-200%);}
}
</style>
<!-- HTML -->
<div id="festa" class="loopSlide">										<!-- 空白を表示させないために同じもの二つ用意する -->
  <img id="first" src="https://aidesign.lolipop.jp/wp-content/uploads/2021/02/hinamatsu_30.png" width="6120" height="184">
  <img id="last2" src="https://aidesign.lolipop.jp/wp-content/uploads/2021/02/hinamatsu_30.png" width="6120" height="184">
</div>
<img id="overall" src="https://aidesign.lolipop.jp/wp-content/uploads/2021/02/hinamatsu_30.png" width="665" height="20" style="margin-top:5px;">
<div style="margin-left:5px; font-size:10px; color:darkred;">&copy;2021 TacM, Ver0.01</div>
<script type="text/javascript" charset="utf-8">
const v = document.getElementById('first').style;						//前半:target要素1を指定
const w = document.getElementById('last2').style;						//後半:target要素2を指定
document.getElementById("festa").addEventListener('mouseover', () => {	//マウスが要素上に入った時
	v.animationPlayState = 'paused';									//前半
	w.animationPlayState = 'paused';									//後半
}, false);
document.getElementById("festa").addEventListener('mouseleave', () => {	//マウスが要素上から離れた時
	v.animationPlayState = 'running';									//前半
	w.animationPlayState = 'running';									//後半
}, false);
</script>